Compat 2021: elimina i cinque principali punti deboli della compatibilità sul web

Google collabora con altri fornitori di browser e partner di settore per risolvere i cinque principali problemi di compatibilità dei browser per gli sviluppatori web: flexbox CSS, CSS Grid, position: sticky, aspect-ratio e trasformazioni CSS.

Google collabora con altri fornitori di browser e partner del settore per risolvere i cinque principali problemi di compatibilità dei browser per gli sviluppatori web. Le aree di interesse sono CSS flexbox, CSS Grid, position: sticky, aspect-ratio e le trasformazioni CSS. Consulta la sezione Come puoi contribuire e seguire la diretta per scoprire come partecipare.

Sfondo

La compatibilità sul web è sempre stata una grande sfida per gli sviluppatori. Negli ultimi due anni, Google e altri partner, tra cui Mozilla e Microsoft, hanno cercato di scoprire di più sui principali problemi degli sviluppatori web, per migliorare il nostro lavoro e le nostre priorità e migliorare la situazione. Questo progetto è collegato al lavoro di soddisfazione degli sviluppatori (DevSAT) di Google ed è iniziato su larga scala con la creazione dei sondaggi DNA (Developer Needs Assessment) di MDN nel 2019 e nel 2020 e con un'attività di ricerca approfondita presentata nel report sulla compatibilità dei browser di MDN 2020. Sono state condotte ulteriori ricerche in vari canali, come i sondaggi State of CSS e State of JS.

L'obiettivo per il 2021 è eliminare i problemi di compatibilità del browser in cinque aree di interesse chiave, in modo che gli sviluppatori possano utilizzarle come basi affidabili. Questo impegno è chiamato #Compat 2021.

Scegliere su cosa concentrarsi

Sebbene esistano problemi di compatibilità con i browser praticamente in tutte le piattaforme web, l'obiettivo di questo progetto è concentrarsi su un numero limitato di aree più problematiche che possono essere migliorate in modo significativo, rimuovendole come problemi principali per gli sviluppatori.

Il progetto di compatibilità utilizza più criteri che influiscono sulle aree da dare la priorità, tra cui:

Le cinque aree di intervento principali nel 2021

Nel 2020, il team di Chromium ha iniziato a lavorare per risolvere i problemi principali descritti in Miglioramento della compatibilità del browser di Chromium nel 2020. Nel 2021, inizieremo un impegno dedicato per fare ancora di più. Google e Microsoft stanno collaborando per risolvere i principali problemi di Chromium, insieme a Igalia. Igalia, che contribuisce regolarmente a Chromium e WebKit e si occupa della manutenzione della porta WebKit ufficiale per i dispositivi embedded, ha fornito un'assistenza molto importante e si è impegnata in questi sforzi di compatibilità e aiuterà a risolvere e monitorare i problemi identificati.

Di seguito sono riportate le aree che ci impegniamo a correggere nel 2021.

Flexbox CSS

Le sezioni flex del CSS sono ampiamente utilizzate sul web e ci sono ancora alcune sfide importanti per gli sviluppatori. Ad esempio, Chromium e WebKit hanno riscontrato problemi con i contenitori flessibili auto-height che hanno generato immagini con dimensioni errate.

Foto allungata di una scacchiera.
Immagine con dimensioni errate a causa di bug.
Scacchiera.
Immagine con dimensioni corrette.
Foto di Alireza Mahmoudi.

Il post del blog Gatti di Igalia su flexbox esamina più in dettaglio questi problemi con molti altri esempi.

Perché è data la priorità

Griglia CSS

CSS Grid è un elemento di base per i layout web moderni, che sostituisce molte tecniche e soluzioni alternative precedenti. Man mano che l'adozione cresce, deve essere solida, in modo che le differenze tra i browser non siano mai un motivo per evitarla. Un'area carente è la possibilità di animare i layout di griglia, supportata in Gecko, ma non in Chromium o WebKit. Se supportati, sono possibili effetti come questo:

Demo di scacchi animati di Chen Hui Jing.

Perché è data la priorità

CSS position: sticky

Il posizionamento fisso consente di fissare i contenuti al bordo dell'area visibile ed è comunemente utilizzato per le intestazioni sempre visibili nella parte superiore dell'area visibile. Sebbene sia supportato in tutti i browser, esistono casi d'uso comuni in cui non funziona come previsto. Ad esempio, le intestazioni delle tabelle fisse non sono supportate in Chromium e, anche se ora sono supportate tramite un flag, i risultati non sono coerenti tra i browser:

Chromium con "TablesNG"
Gecko
WebKit

Dai un'occhiata alla demo delle intestazioni tabella fisse di Rob Flack.

Perché è data la priorità

Proprietà aspect-ratio CSS

La nuova proprietà CSS aspect-ratio consente di mantenere facilmente un rapporto larghezza/altezza coerente per gli elementi, eliminando la necessità del noto hack padding-top:

Utilizzo di padding-top
.container {
 
width: 100%;
 
padding-top: 56.25%;
}
Utilizzo di aspect-ratio
.container {
 
width: 100%;
 
aspect-ratio: 16 / 9;
}

Poiché si tratta di un caso d'uso molto comune, dovrebbe diventare di uso comune e vogliamo assicurarci che sia affidabile in tutti gli scenari comuni e su tutti i browser.

Perché è data la priorità

Trasformazioni CSS

Le trasformazioni CSS sono supportate in tutti i browser da molti anni e sono ampiamente utilizzate sul web. Tuttavia, rimangono ancora molte aree in cui non funzionano allo stesso modo su tutti i browser, in particolare con animazioni e trasformazioni 3D. Ad esempio, un effetto di capovolgimento della scheda può essere molto incoerente tra i browser:

Effetto di capovolgimento della scheda in Chromium (a sinistra), Gecko (al centro) e WebKit (a destra). Demo di David Baron dal commento bug.

Perché è data la priorità

Come puoi contribuire e seguire la diretta

Segui e condividi gli aggiornamenti che pubblichiamo su @ChromiumDev o sulla mailing list pubblica, Compat 2021. Assicurati che i bug esistano o segnalali per i problemi che stai riscontrando. Se manca qualcosa, contattaci tramite i canali indicati sopra.

Verranno forniti aggiornamenti regolari sui progressi su web.dev e potrai anche monitorare i progressi per ogni area di interesse nella dashboard di compatibilità 2021.

Dashboard Compat 2021
La dashboard di Compat 2021 (screenshot acquisito il 16 novembre 2021).

Ci auguriamo che questo impegno congiunto dei fornitori di browser per migliorare l'affidabilità e l'interoperabilità vi aiuti a creare cose straordinarie sul web.