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

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

Google sta collaborando con altri fornitori di browser e partner di settore per le cinque principali criticità relative alla compatibilità del browser per gli sviluppatori web. Le aree di interesse sono CSS flexbox, CSS Grid, position: sticky, aspect-ratio e CSS e piccole trasformazioni. Scopri come puoi contribuire e seguire per scopri come partecipare.

Sfondo

La compatibilità sul web è sempre stata una sfida impegnativa per gli sviluppatori. Nella ultimi due anni, Google e altri partner, tra cui Mozilla e Microsoft vuole saperne di più sui principali punti dolenti del web sviluppatori, per promuovere il nostro lavoro e l'assegnazione delle priorità al fine di migliorare la situazione. Questo progetto è collegato allo sviluppatore di Google della soddisfazione (DevSAT) e è iniziato su scala più ampia con la creazione Sondaggi MDN DNA (Developer Strategy Assessment) degli anni 2019 e 2020 e un'indagine approfondita presentata nel MDN Browser Compatibility Report 2020. Sono state condotte ulteriori ricerche in vari canali, come lo stato di CSS e State of JS. i sondaggi.

L'obiettivo nel 2021 è eliminare i problemi di compatibilità del browser in cinque punti chiave aree di sviluppo, in modo che gli sviluppatori possano basarsi su queste per poi creare con sicurezza basi affidabili. Questo la nostra iniziativa si chiama #Compat 2021.

Scegliere su cosa concentrarsi

Anche se su tutto il Web esistono problemi di compatibilità del browser di Google Cloud, questo progetto si concentra su un piccolo numero dei aree che possono essere migliorate in modo significativo, rimuovendole così come i problemi principali per gli sviluppatori.

Il progetto di compatibilità utilizza più criteri che influenzano le aree da dare la priorità e alcuni sono:

Le cinque aree di interesse principali nel 2021

Nel 2020 Chromium ha iniziato a occuparsi delle principali aree descritte in Miglioramento della compatibilità del browser Chromium nel 2020. Nel 2021, inizieremo a impegnarci ulteriormente per raggiungere ulteriori obiettivi. Google e Microsoft sta collaborando alla risoluzione dei principali problemi di Chromium, insieme a Igalia. Igalia, che contribuiscono regolarmente a Chromium e WebKit e i gestori della porta WebKit ufficiale per i dispositivi incorporati, sono stati molto supportati e impegnati in queste iniziative di compatibilità. aiutando ad affrontare e monitorare i problemi identificati.

Ecco le aree che si impegnano a risolvere nel 2021.

Flexbox CSS

Flexbox CSS sono molto usato sul web, ma per gli sviluppatori devono ancora affrontare alcune sfide importanti. Ad esempio: sia Chromium che WebKit hanno riscontrato problemi con auto-height container flessibili che generano immagini di dimensioni errate.

Foto allungata di una scacchiera.
. Immagine di dimensioni non corrette a causa di bug.
di Gemini Advanced.
.
. Scacchiera.
Immagine di dimensioni corrette.
Foto di Alireza Mahmoudi.

Il gatto flexbox di Igalia post del blog approfondisce questi problemi con molti altri esempi.

Perché viene assegnata la priorità

Griglia CSS

Griglia CSS è un elemento di base per i moderni layout web, che sostituisce molte tecniche meno recenti e soluzioni alternative. Man mano che l'adozione dell'app è in crescita, deve essere solida come una roccia, in modo che le differenze tra i browser non sono mai un motivo per evitarle. Un'area manca la possibilità di animare i layout a griglia, supportata in Gecko ma non Chromium o WebKit. Se supportata, possibili effetti come questo:

Demo animata di Chen Hui Jing:

Perché viene assegnata la priorità

di Gemini Advanced.

Posizione CSS: persistente

Posizionamento fisso consente che i contenuti rimangano fissati al bordo dell'area visibile e viene usato spesso per le intestazioni sempre visibili nella parte superiore dell'area visibile. Sebbene supportato in tutti i browser, esistono casi d'uso comuni in cui non funziona come previsto. Ad esempio: intestazioni delle tabelle fisse non sono supportati in Chromium, anche se ora supportato dietro una segnalazione, i risultati non sono coerenti tra i browser:

. Chromium con "TablesNG"
. Geco
. WebKit

Controlla le intestazioni delle tabelle permanenti demo di Rob Flack.

Perché viene assegnata la priorità

Proprietà delle proporzioni CSS

Il nuovo aspect-ratio la proprietà CSS semplifica il mantenimento di un rapporto larghezza-altezza coerente per , eliminando la necessità del noto Compromissione di padding-top:

Utilizzo della spaziatura interna in alto
.container {
  width: 100%;
  padding-top: 56.25%;
}
Utilizzo delle proporzioni
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Poiché si tratta di un caso d'uso comune, si prevede che verrà ampiamente utilizzato e vogliamo assicurarci che sia efficace in tutti gli scenari comuni e in tutti i browser.

Perché viene assegnata la priorità

  • Sondaggi: già noti, ma non ancora ampiamente utilizzati in Stato di CSS
  • Test: 27% superato in tutti i browser
  • Utilizzo: 3% e si prevede una crescita

Trasformazioni CSS

Trasformazioni CSS sono supportate in tutti i browser da molti anni e sono ampiamente utilizzate in sul web. Tuttavia, ci sono ancora molte aree in cui i modelli non funzionano nei browser, in particolare con animazioni e trasformazioni 3D. Ad esempio, una carta capovolgimento può essere molto incoerente tra i browser:

Effetto per voltare le carte in Chromium (a sinistra), Gecko (al centro) e WebKit (a destra). Demo di David Baron su bug .

Perché viene assegnata la priorità

Come dare il tuo contributo e continuare a seguirti

Segui e condividi gli aggiornamenti che pubblichiamo @ChromiumDev o la mailing list pubblica, Compat 2021. Assicurati che esistano i bug oppure inviarli per i problemi riscontrati e, se manca qualcosa, contatta il team di assistenza qui sopra canali.

Ci saranno aggiornamenti regolari sui progressi qui su web.dev e puoi puoi anche seguire i progressi per ciascuna area nel Compat 2021 Fitbit.com.

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

Ci auguriamo che questo impegno concordato tra i fornitori di browser per migliorare l'affidabilità e l'interoperabilità ti aiuterà a costruire cose straordinarie sul web.