Interoperabilità 2022: aggiornamento di fine anno

Scopri alcune delle funzionalità che sono diventate interoperabili durante il 2022.

Rachele Andrei

Abbiamo raggiunto la fine di un altro anno ed è il momento di esaminare i miglioramenti apportati dai browser mentre lavoriamo insieme per migliorare l'interoperabilità della piattaforma web. Puoi dare un'occhiata a come è iniziato tutto nel nostro post a marzo di quest'anno, quando è stata lanciata l'iniziativa.

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

In questo post, scopri i progressi compiuti nel corso del 2022. Oltre a queste funzionalità principali, sono stati apportati molti miglioramenti più piccoli apportati da tutti i motori. Sono stati risolti i piccoli problemi che potrebbero causare incongruenze tra i motori e provocare problemi durante lo sviluppo. Vedere grandi funzionalità disponibili su più browser è decisamente entusiasmante, ma a volte sono gli aspetti più piccoli che causano il maggior numero di problemi ed è fantastico vedere quanto è stato migliorato.

Livelli a cascata

I livelli a cascata consentono di gestire la cascata raggruppando i selettori in livelli. Si tratta di un tipo di funzionalità che diventa utile solo se è supportato ovunque. Tutti i principali motori ora supportano i livelli a cascata e i punteggi in tutti i browser riflettono quanto sia interoperabile la funzionalità, con solo pochi test da superare per Firefox.

L'elemento della finestra di dialogo

L'elemento di dialogo consente la creazione di finestre di dialogo modali e non modali. Si tratta di un modello comune sul web e l'uso di questo elemento ti offre usabilità e accessibilità che altrimenti avresti bisogno di sviluppare e testare durante la creazione dei tuoi componenti. Nell'articolo Creazione di un componente delle finestre di dialogo, Adam Argyle spiega come sviluppare sulla base di questo elemento per creare diversi tipi di finestre di dialogo.

Griglia

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

Unità area visibile

Le unità area visibile sono l'unica funzionalità che ha superato il 100% dei test 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 man mano che gli elementi UI dei dispositivi appaiono e scompaiono. Per ulteriori informazioni su queste unità, consulta il post sulle unità visibili grandi, piccole e dinamiche.

Colore 4

Questa raccolta di colori consente al CSS non solo di specificare colori in gamut a definizione più alta (ad esempio display p3, rec2020), ma fornisce anche nuove funzioni colore, ciascuna con utilità uniche per lavorare con i colori. I nuovi spazi colore sono lch(), oklch(), lab(), oklab(), display-p3, rec2020, a98-rgb, prophoto-rgb, xyz, xyz-d50 e xzy-d65: provali in Canary oggi stesso con questo flag abilitato. Queste modifiche vengono applicate anche ai gradienti, per consentire agli autori di specificare lo spazio colore utilizzato dai gradienti. Lo stesso flag attiva anche il supporto di color-mix(), permettendoti di mescolare due colori in uno spazio a tua scelta. La funzione color-mix() è contrassegnata da un flag anche in Safari e Firefox. Più colori, colori migliori, gradienti e strumenti migliori.

Interoperabilità 2023

Spero ti piaccia sapere che non abbiamo intenzione di fermarci alla fine del 2022 e che Interop 2023 ha già completato la fase di pianificazione iniziale. Il nuovo anno riusciremo ad annunciare le funzionalità che sono state selezionate e ci auguriamo che un altro anno lo svilupperemo più facilmente per il web.

Immagine hero di Ian Schneider.