Aggiornamento di metà anno su Compat 2021, un tentativo di eliminare i problemi di compatibilità del browser in cinque aree di interesse principali: CSS Flexbox, CSS Grid, posizione: persistente, proporzioni e trasformazioni CSS.
È il momento dell'aggiornamento di metà anno di Compat 2021, un tentativo di eliminare i problemi di compatibilità del browser in cinque aree chiave. Per ulteriori dettagli sul lavoro #compat2021 e su come abbiamo deciso le aree di interesse, consulta l'annuncio di marzo.
I miglioramenti a Chromium descritti in questo post saranno applicati a Chrome, Edge e tutti i browser basati su Chromium.
Come misuriamo i progressi
Puoi controllare i test delle piattaforme web nella dashboard Compat 2021 per conoscere il numero di test superati e i grafici delle tendenze per i diversi browser.
Un semplice numero di test superati non fornisce un quadro completo della compatibilità del browser, ma è uno dei segnali che utilizziamo per controllare i progressi del nostro impegno. Meno differenze tra i browser nei risultati dei test significa una maggiore interoperabilità di una funzionalità web su più browser.
Flexbox CSS
Tutti e tre i motori del browser hanno visto miglioramenti a Flexbox.
Safari 14.1 ha spedito la proprietà gap per flexbox. La proprietà gap è un modo conveniente per impostare la spaziatura tra gli elementi. Questa proprietà viene spesso utilizzata
nel layout griglia e il supporto nel layout flexbox era una delle funzionalità più richieste nel
report sulla compatibilità del browser MDN
. Con questo aggiornamento, la proprietà gap nei layout flessibili è disponibile in tutti i principali browser e viene risolta una delle principali sfide di compatibilità. Safari 14.1 ha incluso anche molte correzioni per le immagini in flexbox, eliminando la necessità di soluzioni alternative precedenti.
Firefox ha risolto il rendering delle tabelle come elementi flessibili, avvicinando Firefox al 100% di superamento dei test (attualmente al 98,5%).
Chromium ha corretto anche le tabelle come elementi flessibili.
In Chromium 88 è stata anche eseguita una riscrittura delle immagini come elementi flessibili,
risolvendo una serie di bug di lunga data. Infine, di recente Chromium ha aggiunto il supporto per le nuove parole chiave di allineamento: start, end, self-start, self-end, left e right. Puoi provare queste parole chiave in
Chrome Canary e
Edge Canary.
Griglia CSS
L'utilizzo della griglia CSS è in costante aumento, attualmente pari al 9% delle visualizzazioni di pagina. Tutti e tre i principali motori del browser implementano la griglia CSS e stanno già superando più dell'89% dei test correlati della piattaforma web. È importante colmare il divario di compatibilità per favorire una crescita costante di questa funzionalità.
Finora nel 2021 Safari è migliorato dall'89% al 93% superando i test e Chromium sta lavorando a una nuova architettura per risolvere altri problemi di griglia CSS, chiamata GridNG. Si tratta di un'iniziativa guidata dal team Microsoft che ha portato al recente aumento dal 94% al 97% nei test della griglia target. Presto riceverai un aggiornamento su GridNG sul blog di Edge.
CSS position: sticky
In Chromium, il problema position: sticky per le intestazioni delle tabelle è stato risolto con il lancio di TablesNG, un'iniziativa pluriennale di riprogettazione del rendering delle tabelle.
Questa modifica, insieme ad alcune correzioni
finali, ha spinto il canale per sviluppatori di Chrome ed Edge 93 a superare il 100% dei test scelti come target.
Oltre position: sticky,
TablesNG ha risolto 72 bug di Chromium.
Proprietà aspect-ratio CSS
La proprietà aspect-ratio, che semplifica l'impostazione del rapporto larghezza-altezza, è fondamentale per il Adattamento web. Rappresenta inoltre una soluzione per evitare variazioni cumulative del layout.
La proprietà aspect-ratio è ora supportata nelle versioni stabili di Chrome, Edge e Firefox, nonché in Safari 15 beta. Con il miglioramento del supporto tra browser, l'utilizzo aumenta.
Anche se nessun browser ha superato i test al 100%, il divario di compatibilità per aspect-ratio è il minimo di tutte e cinque le aree su cui concentrarti per Compat 2021. Oltre il 90% ha superato i test per tutti i principali browser. In futuro, continueremo a monitorare i progressi utilizzando questa suite di test per renderla una funzionalità solida.
Scopri di più sull'utilizzo e sui vantaggi della proprietà aspect-ratio su web.dev.
Trasformazioni CSS
I risultati dei test mirati per le trasformazioni CSS sono stati migliorati lentamente e costantemente, a causa delle correzioni di bug e dei miglioramenti apportati ai test stessi.
Il team di Chromium sta anche lavorando per migliorare l'interoperabilità di transform-style:
preserve-3d e transform :perspective(). Ci auguriamo di avere ulteriori progressi
da condividere nel prossimo aggiornamento.
Miglioramenti del punteggio complessivo
Dall'annuncio di marzo, tutti e tre i motori del browser hanno migliorato i punteggi di Compat 2021:
- Chrome ed Edge Dev sono passati da 86 a 92.
- Firefox è passato da 83 a 86.
- Safari è passato da 64 a 82.
In particolare, Safari si è spinto per colmare il divario di compatibilità di 18 punti, grazie al grande lavoro dei collaboratori di WebKit. In particolare, il team di
Igalia ha contribuito
alla proprietà aspect-ratio e a molti miglioramenti a Flexbox e Grid, come gap per Flexbox
e vari bug corretti.
Segui i progressi di Compat 2021
Per seguire i progressi di Compat 2021, tieni d'occhio la dashboard, iscriviti alla nostra mailing list o contatta usat @chromiumdev. Se riscontri problemi, assicurati di segnalare un bug per il browser interessato.