Interoperabilità 2022: aggiornamento di fine anno

Scopri solo alcune delle funzionalità che sono diventate interoperabili nel corso del 2022.

Rachel Andrew

Siamo giunti alla fine di un altro anno ed è il momento di dare un'occhiata ai miglioramenti apportati dai browser mentre collaboriamo per migliorare l'interoperabilità della piattaforma web. Puoi dare un'occhiata a come tutto è iniziato nel nostro post di marzo di quest'anno, quando è stata lanciata l'iniziativa.

I punteggi complessivi alla fine dell'anno mostrano un grande miglioramento in tutti i motori.

In questo post, scoprirai i progressi compiuti nel 2022. Oltre a queste funzionalità principali, tutti i motori hanno apportato molti miglioramenti minori. Sono stati risolti i problemi di minore entità che possono causare incongruenze tra i motori e provocare arresti anomali durante lo sviluppo. Poter vedere le grandi funzioni disponibili in più browser è sicuramente entusiasmante, ma a volte sono i piccoli aspetti a causare i problemi maggiori ed è fantastico vedere quanto è stato migliorato.

Livelli a cascata

I livelli a cascata ti consentono di gestire i selettori a cascata raggruppandoli in livelli. È il tipo di funzionalità che diventa utile solo se è supportata ovunque. Tutti i principali motori ora supportano i livelli a cascata e i punteggi di tutti i browser riflettono quanto sia interoperabile la funzione, con solo pochi test rimasti per Firefox.

L'elemento della finestra di dialogo

L'elemento finestra di dialogo consente di creare finestre di dialogo modali e non modali. Si tratta di uno schema comune sul web e l'utilizzo di questo elemento ti offre usabilità e accessibilità che altrimenti dovresti sviluppare e testare durante la creazione dei tuoi componenti. Nell'articolo Creazione di un componente di una finestra di dialogo, Adam Argyle spiega come basarsi su questo elemento per realizzare diversi tipi di finestre di dialogo.

Griglia secondaria

All'inizio del 2022, l'unico browser che supportava il valore subgrid per grid-template-rows e grid-template-columns era Firefox. Nel 2022 Safari ha ricevuto il supporto e la funzionalità è in fase di sviluppo in Chrome. Rimanderà la scadenza di fine anno per l'interoperabilità, ma è in arrivo.

Unità area visibile

Le unità visibili sono l'unica funzionalità che ha superato il 100% dei test superati in tutti i motori. Sono inclusi i concetti di area visibile piccola e grande, che tengono conto della variazione delle dimensioni dell'area visibile sui dispositivi mobili quando gli elementi UI dei dispositivi appaiono e scompaiono. Per saperne di più su queste unità, leggi il post sulle unità aree visibili grandi, piccole e dinamiche.

Colore 4

Questa raccolta di colori consente al CSS non solo di specificare i colori in gamut a definizione più alta (ad esempio, display p3, rec2020), ma anche di fornire nuove funzioni di colore, ciascuna delle quali dispone di utilità uniche per la gestione del colore. I nuovi spazi colore sono lch(), oklch(), lab(), oklab(), display-p3, rec2020, a98-rgb, prophoto-rgb, xyz, xyz-d50, xzy-d65: provali in versione canary oggi stesso con questo flag attivato. Queste modifiche si applicano anche ai gradienti, consentendo agli autori di specificare lo spazio colore utilizzato dai loro gradienti. Lo stesso flag attiva anche il supporto di color-mix(), consentendoti di combinare due colori in uno spazio a tua scelta. Anche la funzione color-mix() è nascosta da un flag in Safari e Firefox. Più colori, colori migliori, gradienti migliori e strumenti migliori.

Interoperabilità 2023

Spero che sarai felice di sapere che non abbiamo intenzione di fermarsi alla fine del 2022 e che Interop 2023 ha già terminato la fase di pianificazione iniziale. Nel nuovo anno potremo annunciare le funzioni selezionate e ci auguriamo che trascorra un altro anno per semplificarne lo sviluppo per il web.

Immagine hero di Ian Schneider.