Baseline sarà in arrivo su caniuse.com. In questo post, scoprirai l'integrazione e scoprirai 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: quando diventa nuovamente disponibile e poi quando diventa ampiamente 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 del sito "Posso usare", vedrai un badge che indica se la funzionalità è disponibile in Baseline su larga scala.
Anche le funzionalità in Baseline appena disponibili saranno contrassegnate da un badge e dall'anno in cui sono diventate disponibili. 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 nel programma Baseline 2023.
Dimensione delle query del container e unità di query del container
Le query relative al contenitore ti consentono di eseguire query sulle dimensioni di un elemento, in modo molto simile alle query multimediali. Semplificano notevolmente la creazione di componenti riutilizzabili perché ti permettono di creare componenti che reagiscono alle dimensioni dell'area in cui vengono 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 ti consentono di accedere a colori che non rientrano nella 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 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 sstream.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
La funzione color()
La funzione color() può essere utilizzata per qualsiasi spazio colore che specifica i colori con i canali R, G e B. color() richiede prima un parametro dello spazio colore, poi una serie di
valori del canale per RGB e, facoltativamente, alcuni valori alpha. 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 offre molti altri esempi dei nuovi spazi colore e delle nuove funzioni, oltre a informazioni su quali utilizzare quando.
Flussi di compressione
L'API Compression Streams è un'API JavaScript per comprimere e decomprimere flussi di dati. Le app che utilizzano questa compressione integrata non devono 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 dipendevano direttamente dal DOM. OffscreenCanvas disaccoppia
il DOM dall'API Canvas spostando la tela 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 c'è sincronizzazione tra i due. Può essere utilizzato anche per spostare il lavoro di rendering in 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ù nella pagina 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.
Impara a utilizzare queste funzioni e scopri alcuni casi d'uso in Funzioni trigonometriche in CSS.
L'attributo inerte
Quando contrassegni un elemento DOM come inert, rimuovi il movimento o l'interazione
sull'elemento. 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à.
Aggiungi questo attributo agli elementi che sono fuori schermo o nascosti in altro modo. Per ulteriori informazioni, consulta la sezione 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 gli elementi in griglie nidificate separate.
Nella griglia CSS troverai alcuni esempi e link a molti altri post ed esempi che illustrano casi d'uso delle sottogriglie.
Formato numerico V3
Intl.NumberFormat V3 è un insieme di nuove funzionalità per Intl.NumberFormat che sono diventate parte di Baseline nel 2023. Le funzionalità aggiuntive sono:
- Tre nuove funzioni per formattare intervalli di numeri:
formatRange,formatRangeToPartseselectRange - 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 di queste nuove funzionalità.
L'API Fullscreen
L'API Fullscreen consente di inserire un elemento come <video> in modalità
a schermo intero chiamando il metodo requestFullscreen(). Offre inoltre metodi per rilevare se un elemento è in modalità a schermo intero e se il documento è in uno stato che consente di richiedere la modalità a schermo intero.
Scopri di più in questa guida all'API Fullscreen su MDN.
Il selettore :has() del CSS
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 consente di selezionare un elemento in base ai contenuti 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
Altre funzionalità che sono diventate parte di Baseline quest'anno includono:
- 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 su Interop 2023. È entusiasmante vedere come le funzionalità possono essere implementate attraverso questo processo e arrivare a Baseline come nuove disponibili, così da far sì che vengano rese disponibili su larga scala. Ciò crea un percorso più chiaro per decidere quando adottare le funzionalità nei tuoi progetti.