Base di riferimento 2023

Rachel Andrew

La base di riferimento sta arrivando su caniuse.com! In questo post, scoprirai sull'integrazione e scoprire alcune delle funzionalità che sono diventate parte Base di riferimento nel 2023.

Con la nuova definizione di Baseline, è possibile sono due fasi del ciclo di vita di una funzionalità: quando diventa nuova disponibile e quando sarà disponibile su tutti dopo 30 mesi. Una caratteristica diventa parte di Baseline appena disponibile quando diventa interoperabile nei seguenti browser:

  • Safari (MacOS e iOS)
  • Firefox (computer e Android)
  • Chrome (computer e Android)
  • Edge (computer)

La base di riferimento raggiunge il valore "Can I use"

Come passaggio successivo per chiarire la disponibilità delle funzionalità, la base di riferimento sta iniziando a vai su Posso usare da oggi. Quando visiti alcune pagine della pagina Posso usare, vedrai un badge che indica se la funzionalità è nella base di riferimento ampiamente disponibile.

Screenshot di Posso usare con il badge ampiamente disponibile nel layout a griglia CSS.

Le funzionalità in Baseline appena disponibili mostreranno anche un badge, insieme a l'anno in cui sono diventate disponibili. Tutto ciò che è diventato interoperabile il browser principale impostato quest'anno fa parte di Baseline 2023.

Screenshot di Posso utilizzare con il badge appena disponibile nelle query contenitore.

Nel resto di questo post, scopri le funzionalità che hanno raggiunto questo traguardo nel corso del 2023. Tutte queste funzionalità sono Baseline 2023: nuovo disponibile.

Dimensioni delle query container e delle unità di query container

Dimensiona le query contenitore consente di eseguire query sulle dimensioni di un elemento, proprio come per le query supporti ti consente di eseguire query sulla dimensione dell'area visibile. Consentono di creare componenti riutilizzabili creando componenti che reagiscono alle dimensioni dell'area in cui vengono inseriti.

Supporto dei browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Origine

Il design delle seguenti schede cambia in base alla larghezza del componente. Per saperne di più, consulta Le query dei container vengono eseguite nei browser stabili.

Nuovi spazi colore e funzioni

CSS ora supporta gli spazi colore che ti consentono di accedere ai colori al di fuori della gamma sRGB. Ciò significa che puoi supportare display HD (alta definizione) che utilizzano i colori dell'HD diverse gamut.

Nuovi modelli di colore

Ora in Baseline, le funzioni colore lch(), lab(), oklch() e oklab() Concedi l'accesso ai modelli di colore LCH, Lab, OKLCH e OKLab.

Supporto dei browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Origine

Uno screenshot dell'editor gradient.style con una sfumatura vivace dal rosa al blu.
Prova i nuovi spazi colore utilizzando gradient.style.

La funzione color-mix()

Inoltre, sono entrate a far parte di Baseline nuove funzioni colore. color-mix() consente di combinare un colore con un altro, in uno qualsiasi degli spazi colore. Nel seguente CSS, il 25% del blu è misto al bianco, nello spazio colore s web.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Supporto dei browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Origine

Scopri di più su color-mix().

La funzione color()

La color() può essere utilizzata per qualsiasi spazio colore che specifica i colori con R, G e B canali. color() prende prima un parametro dello spazio colore, poi una serie di valori di canale per RGB e, facoltativamente, alcuni alpha. Puoi utilizzare una delle seguenti opzioni: 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 ad alta definizione dei CSS offre molti altri esempi dei nuovi spazi colore e delle nuove funzioni, oltre informazioni su come utilizzare e quando.

Flussi di compressione

L'API Compression Streams è un'API JavaScript che consente di comprimere e decomprimere flussi di dati. App utilizzando questa compressione integrata, non è più necessario includere una libreria di compressione.

Supporto dei browser

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Origine

Per saperne di più, consulta Ora gli stream di compressione sono supportati in tutti i browser.

Canvas fuori schermo

Prima di OffscreenCanvas, le funzionalità di disegno del canvas erano associate all'<canvas> , il che significa che dipendeva direttamente dal DOM. Disaccoppia OffscreenCanvas il DOM dall'API Canvas spostando il canvas fuori dallo schermo.

Grazie a questo disaccoppiamento, il rendering di OffscreenCanvas viene scollegato completamente il DOM, quindi offre alcuni miglioramenti di velocità rispetto al canvas normale, non avviene alcuna sincronizzazione tra i due. Può essere utilizzato anche per spostare il lavoro di rendering a un web worker, anche se non è disponibile alcun DOM, liberando al thread principale e rendere l'applicazione più reattiva.

Supporto dei browser

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 105.
  • Safari: 16.4.

Origine

Scopri di più in OffscreenCanvas: accelera le operazioni del canvas con un worker web

Precaricamento del 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, quindi inserisce i risultati nella mappa del modulo da eseguire.

Supporto dei browser

  • Chrome: 66.
  • Bordo: ≤79.
  • Firefox: 115.
  • Safari: 17.

Origine

Scopri di più in Precaricare i moduli.

Funzioni trigonometriche in CSS

Nel 2023, le funzioni trigonometriche dai valori CSS e dalle unità di livello 4 è diventata interoperabile. Ciò significa che le funzioni sin(), cos(), tan(), asin(), acos(), atan() e atan2() fanno parte della base di riferimento 2023.

Supporto dei browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Origine

Questa demo utilizza le funzioni trigonometriche per spostare gli elementi su un percorso circolare intorno a un punto centrale.

Impara a usare queste funzioni e scopri alcuni casi d'uso in Funzioni trigonometriche in CSS.

Attributo inerte

Quando contrassegni un elemento DOM come inert, rimuovi il movimento o l'interazione da li annotino. L'attributo inert fa sì che il browser ignori l'elemento:

  • L'evento click non si attiva se un utente fa clic sull'elemento.
  • L'elemento non acquisirà lo stato attivo.
  • L'elemento e i suoi contenuti sono esclusi dall'albero dell'accessibilità.

Supporto dei browser

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Origine

Aggiungi questo attributo a elementi fuori schermo o nascosti. Per ulteriori informazioni informazioni, consulta Attributo inert.

Griglia secondaria nel layout a griglia CSS

Il valore subgrid per grid-template-columns e grid-template-rows consente si utilizzano le tracce definite su una griglia principale, su griglie nidificate. Ciò significa che puoi allineare tra loro gli elementi in griglie nidificate separate.

Supporto dei browser

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Origine

Nella griglia secondaria CSS, troverai alcuni esempi e link a molti altri post ed esempi che evidenziano casi d'uso della griglia secondaria.

Formato numerico V3

Intl.NumberFormat V3 è un insieme di nuove caratteristiche per Intl.NumberFormat che sono diventate parte della base di riferimento nel corso del 2023. Le funzionalità aggiuntive sono:

  • Tre nuove funzioni per formattare 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
  • Negativo pubblicità display

Supporto dei browser

  • Chrome: 106.
  • Edge: 106.
  • Firefox: 116.
  • Safari: 15.4.

Origine

La proposta per NumberFormat V3 nel dettaglio ognuna di queste nuove funzionalità.

API Fullscreen

L'API Fullscreen consente di posizionare un elemento come <video> a schermo intero richiamando 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.

Supporto dei browser

  • Chrome: 71.
  • Edge: 79.
  • Firefox: 64.
  • Safari: 16.4.

Origine

Scopri di più in questa guida all'API Fullscreen su MDN.

Selettore :has() CSS

A partire dal 2023, c'è il selettore :has(), che accederai su Firefox 121 del 19 dicembre. Questo selettore, ad esempio, ha la funzione di selettore padre, che ti permette di selezionare un elemento in base agli elementi presenti al suo interno. li annotino. Ad esempio, puoi applicare CSS diversi a seconda che ci siano o meno di un'immagine all'interno di un elemento.

Supporto dei browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Origine

Scopri di più in :has(): il selettore della famiglia.

Altre funzionalità incluse in Baseline quest'anno

Altre funzionalità che sono entrate a far parte della base di riferimento quest'anno includono:

Molte di queste funzionalità hanno raggiunto l'interoperabilità grazie al lavoro collaborativo su Interop 2023. È entusiasmante vedere come le funzionalità possono essere portate avanti attraverso questo processo e arrivare alla base di riferimento appena disponibile, che fanno partire il timer per renderli disponibili su larga scala. Questo crea un un percorso più chiaro per decidere quando adottare le funzionalità nei tuoi progetti.