Aggiornamento di fine anno su Compat 2021, un tentativo di eliminare i problemi di compatibilità del browser in cinque aree chiave: CSS Flexbox, CSS Grid, posizione: persistente, proporzioni e trasformazioni CSS.
La fine dell'anno è vicina ed è il momento di un aggiornamento finale su Compat 2021, un tentativo di eliminare i problemi di compatibilità del browser in cinque aree chiave.
Oltre il 90%
punteggio in tutti i browser
Dopo il nostro ultimo aggiornamento, abbiamo continuato a riscontrare miglioramenti in tutti i browser. Tutti i browser hanno iniziato con punteggi di test molto più bassi all'inizio dell'anno, ma ora tutti i browser hanno superato il 90%. Ciò significa che la piattaforma web ha migliorato significativamente l'interoperabilità delle cinque aree.
I contributi ai motori dei browser non vengono forniti solo dai fornitori di browser, ma anche da altri membri della community web. Per questo progetto, vogliamo ringraziare in particolare Igalia per il coinvolgimento e per aver continuato a lavorare per migliorare i punteggi. Igalia ha contribuito a migliorare tutte e cinque le aree di interesse di Compat 2021.
Su wpt.fyi, la dashboard dei risultati dei test, è ora disponibile una vista dei risultati dei test filtrati che mostra tutti i test inclusi in Compat 2021, che mostra anche le visualizzazioni per Chrome, Firefox e Safari confrontando i risultati con il nostro ultimo aggiornamento di luglio.
Diamo un'occhiata ai miglioramenti apportati in ogni area.
Flexbox CSS
flex-basis: content è ora disponibile su tutti i browser con implementazioni in
Chromium e
WebKit. (Il valore content era già
supportato da Gecko.)
In Chromium, viene risolto un problema relativo alle dimensioni della Flexbox, che corrisponde al comportamento di Gecko e della specifica. Inoltre, in Gecko sono stati risolti diversi problemi relativi a Compat 2021, tra cui un problema con l'altezza percentuale degli elementi flessibili. Infine, in WebKit è stato aggiunto il supporto di più valori delle proprietà di allineamento (left,right, self-start, self-end, start, end) e sono stati apportati numerosi miglioramenti al posizionamento assoluto, migliorando anche i risultati dei test flexbox in Compat 2021.
Griglia CSS
L'utilizzo della griglia CSS sul web continua a crescere, come si vede sia in 2021 Web Almanac che nelle metriche di utilizzo di Chrome.
Il lancio di GridNG in Chrome ed Edge 93, ha risolto molti problemi di lunga data con Grid, chiudendo ben 38 problemi nel tracker dei bug di Chromium. Insieme a molti miglioramenti più piccoli, il punteggio di Compat 2021 per la griglia in Chromium è migliorato dal 3% al 97%. Questo lavoro è stato condotto dal team Edge di Microsoft.
Un bug di posizionamento assoluto che interessa Grid è stato corretto in Gecko e molte correzioni sono state applicate in WebKit, con un miglioramento dell'1% per Firefox e del 3% per i test di Safari sulla griglia.
CSS position: sticky
Nell'ultimo aggiornamento, abbiamo notato che position: sticky è stata la prima area in cui i browser (in questo caso Chrome ed Edge) hanno superato il 100% dei test. Ora, a seguito di una serie di correzioni nell'implementazione di WebKit, anche Safari ottiene un punteggio del 100% per questi test. La maggior parte di questi miglioramenti
era inclusa in Safari 15.
Proprietà aspect-ratio CSS
Il supporto cross-browser per la definizione delle proporzioni (rapporto larghezza-altezza) degli elementi ha continuato a migliorare e i punteggi di Compat 2021 hanno raggiunto il 99%, il 97% e il 95% rispettivamente per Chrome/Edge, Firefox e Safari. La maggior parte dei miglioramenti non riguarda la proprietà aspect-ratio stessa,
ma il modo in cui gli attributi width e height vengono mappati a un valore aspect-ratio predefinito
per gli elementi. Questa funzionalità è stata implementata per più elementi in WebKit e <canvas> per Chromium.
Trasformazioni CSS
Il supporto di transform: perspective(none) è ora supportato in
Chromium,
Gecko e
WebKit. In questo modo sarà più facile animarsi
tra una prospettiva e nessuna.
In Chromium, transform-style: preserve-3d (che consente agli elementi secondari di partecipare alla stessa scena 3D) e la proprietà perspective (che applica una trasformazione prospettica agli elementi secondari) sono ora allineati alla specifica rendendoli applicabili solo agli elementi secondari.
Il notevole aumento dei punteggi per le trasformazioni CSS in tutti i browser è dovuto principalmente ai miglioramenti della suite di test, in cui sono stati corretti o rimossi i test errati. Ciò semplifica la comprensione dei problemi di interoperabilità rimanenti ed evita le regressioni in futuro.
Conclusione
Siamo grati per il lavoro che tutti hanno dedicato alla fine dell'anno con molti miglioramenti al punteggio e una migliore infrastruttura di test. aspect-ratio era una funzionalità richiesta a lungo
dagli sviluppatori web ed è ora supportata in tutti i browser. L'uso di Flexbox, Grid e position: sticky sono in crescita e queste funzionalità sono ora supportate meglio nei vari browser grazie ai numerosi miglioramenti apportati nel corso del 2021.
Passaggi successivi Siamo entusiasti di continuare a collaborare con altri fornitori di browser e con la comunità più ampia nella prossima iterazione di questo impegno. Abbiamo iniziato a studiare e discutere le aree di interesse per il 2022. Non perderti un annuncio a breve.
In caso di feedback o domande, contattaci su Twitter all'indirizzo @ChromiumDev.