Baseline sarà in arrivo su caniuse.com. In questo post, scoprirai l'integrazione e alcune delle funzionalità che sono diventate parte di Baseline nel 2023.
Con la nuova definizione di Baseline, il ciclo di vita di una funzionalità prevede due fasi. Innanzitutto, quando sarà disponibile da poco, poi completamente disponibile dopo 30 mesi. Una funzionalità diventa parte di Baseline appena disponibile quando diventa interoperabile nei seguenti browser:
- Safari (macOS e iOS)
- Firefox (computer e Android)
- Chrome (desktop e Android)
- Edge (computer)
La base di riferimento arriva su Can I Use
Come passaggio successivo per chiarire la disponibilità delle funzionalità, a partire da oggi Baseline inizierà ad arrivare su Can I Use. Quando visiti alcune pagine della pagina Posso usare la funzionalità, viene visualizzato un badge che indica se la funzionalità è disponibile in Baseline su larga scala.
Anche le funzionalità nella base di riferimento disponibili di recente mostreranno un badge e l'anno in cui sono diventate disponibili. Quindi, tutto ciò che è diventato interoperabile nel set di browser principali quest'anno fa parte di Baseline 2023.
Nel resto di questo post, scopri le funzionalità che hanno raggiunto questo traguardo nel 2023. Tutte queste funzionalità sono disponibili nella versione Baseline 2023.
Dimensione delle query del container e unità di query del container
Le query relative alle dimensioni del contenitore ti consentono di eseguire query sulle dimensioni di un elemento, in modo molto simile alle query supporti che consentono di eseguire query sulle dimensioni dell'area visibile. Semplificano molto la creazione di componenti riutilizzabili, poiché puoi creare componenti che reagiscono alle dimensioni dell'area in cui sono posizionati.
Il design della scheda seguente cambia in base alla larghezza del componente. Per saperne di più, consulta Le query container vengono visualizzate in browser stabili.
Nuovi spazi colore e funzioni
CSS ora supporta gli spazi colore che consentono di accedere a colori al di fuori della gamma di colori sRGB. Ciò significa che sono supportati i display HD (alta definizione), che utilizzano i colori della gamma HD.
Nuovi modelli di colore
Ora nella base di riferimento, le funzioni colore lch(), lab(), oklch() e oklab() consentono di accedere ai modelli di colore LCH, Lab, OKLCH e OKLab.
La funzione color-mix()
Inoltre, nuove funzioni colore sono diventate parte di Baseline. La funzione color-mix() consente di combinare un colore con un altro, in qualsiasi spazio colore. Nel CSS seguente, il 25% di blu viene mescolato al bianco nello spazio colore sgsuite.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
La funzione color()
La funzione color() può essere utilizzata per qualsiasi spazio colore che specifichi i colori con i canali R, G e B. color() prende prima un parametro dello spazio colore, poi una serie di valori di canale per RGB e, facoltativamente, alcuni alfa. Puoi utilizzare: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 e xyz-d65. Ad esempio:
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
La guida ai colori CSS ad alta definizione fornisce molti altri esempi dei nuovi spazi colore e delle nuove funzioni, oltre a informazioni su dove utilizzare quando.
Flussi di compressione
L'API Compression Streams è un'API JavaScript per comprimere e decomprimere flussi di dati. Grazie all'utilizzo di questa compressione integrata, le applicazioni non dovranno più includere una libreria di compressione.
Scopri di più nella pagina Gli stream di compressione sono ora supportati in tutti i browser.
Tela fuori schermo
Prima di OffscreenCanvas, le funzionalità di disegno su tela erano legate all'elemento <canvas>,
il che significava che dipendeva direttamente dal DOM. OffscreenCanvas, come implica il nome, disaccoppia il DOM e l'API Canvas spostandolo fuori dallo schermo.
Grazie a questo disaccoppiamento, il rendering di OffscreenCanvas è completamente scollegato dal DOM, quindi offre alcuni miglioramenti della velocità rispetto al canvas normale, in quanto non avviene alcuna sincronizzazione tra i due. Inoltre, può essere utilizzato per spostare il lavoro di rendering su un web worker, anche se non è disponibile un DOM, liberando il thread principale e rendendo l'applicazione più reattiva.
Scopri di più in OffscreenCanvas: accelera le operazioni su canvas con un web worker
Precaricamento modulo
Il precaricamento dei moduli può ridurre i tempi di download ed elaborazione. Aggiungi rel="modulepreload" all'elemento link che fa riferimento a un modulo JavaScript e il browser ottiene il modulo, lo analizza e lo compila e inserisce i risultati nella mappa del modulo pronti per l'esecuzione.
Scopri di più nell'articolo Precaricare i moduli.
Funzioni trigonometriche in CSS
Nel 2023 le funzioni trigonometriche della specifica CSS Values and Units Level 4 sono diventate interoperabili. Ciò significa che le funzioni sin(), cos(), tan(), asin(), acos(), atan() e atan2() fanno parte di Baseline 2023.
Scopri come utilizzare queste funzioni e scoprire alcuni casi d'uso in Funzioni trigonometriche in CSS.
L'attributo inerte
Inerte indica l'assenza della capacità di muoversi, quindi quando contrassegni qualcosa di inerte, si rimuove il movimento o l'interazione da questi elementi DOM. L'attributo inert fa sì che il browser ignori l'elemento.
- L'evento
clicknon viene attivato se un utente fa clic sull'elemento. - L'elemento non sarà evidenziato.
- L'elemento e i suoi contenuti sono esclusi dall'albero dell'accessibilità.
Questo attributo deve essere aggiunto agli elementi fuori schermo o nascosti in altro modo. Per saperne di più, consulta L'attributo inerte.
Griglia nel layout griglia CSS
Il valore subgrid per grid-template-columns e grid-template-rows consente di utilizzare le tracce definite in una griglia principale all'interno di griglie nidificate. Ciò significa che puoi allineare tra loro gli elementi all'interno di queste griglie nidificate.
Nell'articolo sottogriglia CSS troverai alcuni esempi e link a molti altri post ed esempi che evidenziano i casi d'uso di questa griglia.
Formato numerico V3
Intl.NumberFormat V3 è un insieme di nuove funzionalità per Intl.NumberFormat, che sono diventate parte di Baseline nel corso del 2023. Le funzionalità aggiuntive sono:
- Tre nuove funzioni per formattare gli intervalli di numeri: formatRange, formatRangeToParts e selectRange.
- Enum raggruppamento
- Nuove opzioni di arrotondamento e precisione
- Priorità di arrotondamento
- Interpretare le stringhe come decimali
- Modalità di arrotondamento
- Segno negativo
La proposta per NumberFormat V3 descrive nel dettaglio ciascuna delle nuove funzionalità.
L'API Fullscreen
L'API Fullscreen consente di inserire un elemento, ad esempio <video>, in modalità a schermo intero chiamando il metodo requestFullscreen(). Fornisce inoltre metodi per rilevare se un elemento è in modalità a schermo intero e se il documento è in uno stato che ti consente di richiedere la modalità a schermo intero.
Scopri di più in questa guida all'API Fullscreen su MDN.
Il selettore CSS :has()
Baseline 2023 è il selettore :has(), che verrà visualizzato in Firefox 121 il 19 dicembre. Tra gli altri utilizzi, questo selettore funge da selettore principale e ti consente di selezionare un elemento in base agli elementi che si trovano al suo interno. Ad esempio, puoi applicare CSS diversi a seconda che all'interno di un elemento sia presente o meno un'immagine.
Scopri di più in :has(): il selettore della famiglia.
Altre funzionalità incluse in Baseline quest'anno
In questo post sono incluse alcune delle funzionalità principali che sono diventate parte di Baseline quest'anno, ma ce ne sono altre.
- Fogli di stile costruibili
- Selettori secondari complessi in CSS
- Sintassi dell'intervallo per le query supporti
- Importa Maps
- Più valori per la visualizzazione CSS
- @counter-style
- La proprietà CSS
counter-set - La funzione di easing di
linear() - File system privato di origine (OPFS)
- Nesting CSS, inclusa la modifica che aggiunge un'analisi semplificata.
- Selettore di pseudo-classe
:dir()CSS - Unità di lunghezza CSS
cap - Mascheramento CSS
- Supporto delle query supporti per gli elementi
<source>del video HTML - L'elemento HTML
<search> - Caricamento lento degli elementi
<iframe>(in arrivo su Firefox 121 il 19 dicembre) - Le unità di altezza riga CSS
lherlh
Molte di queste funzionalità hanno raggiunto l'interoperabilità grazie al lavoro collaborativo di Interop 2023. È entusiasmante vedere come le funzionalità possono essere implementate attraverso questo processo e come arrivare a Baseline come nuove disponibili, così da impostare il timer in modo che diventino ampiamente disponibili. In questo modo, viene creato un percorso più chiaro per decidere quando adottare le funzionalità nei tuoi progetti.