Google sta collaborando con altri fornitori di browser e partner di settore per risolvere i cinque principali problemi di compatibilità del browser per gli sviluppatori web: CSS Flexbox, CSS Grid, position: sticky, aspect-ratio e trasformazioni CSS.
Google sta collaborando con altri fornitori di browser e partner del settore per risolvere i cinque principali problemi di compatibilità del browser per gli sviluppatori web. Le aree di interesse sono CSS Flexbox, Griglia CSS, position: sticky, aspect-ratio e trasformazioni CSS. Consulta Come puoi contribuire e seguirci per scoprire come partecipare.
Contesto
La compatibilità sul web è sempre stata una sfida importante per gli sviluppatori. Negli ultimi due anni, Google e altri partner, tra cui Mozilla e Microsoft, hanno deciso di approfondire le principali criticità degli sviluppatori web per migliorare il nostro lavoro e le priorità per migliorare la situazione. Questo progetto è collegato al lavoro di Google Developer Satisfaction (DevSAT) ed è iniziato su più larga scala con la creazione dei sondaggi MDN DNA (Developer Needs Assessment) nel 2019 e il 2020, nonché un'approfondita ricerca presentata nel MDN Browser Compatibility Report 2020. Sono state condotte ulteriori ricerche in vari canali, ad esempio i sondaggi relativi allo stato del CSS e allo stato di JS.
L'obiettivo nel 2021 è eliminare i problemi di compatibilità del browser in cinque aree di intervento principali, in modo che gli sviluppatori possano basarsi su questi elementi come basi affidabili. Questo progetto è denominato #Compat 2021.
Scegliere su cosa concentrarti
Sebbene esistano problemi di compatibilità con il browser praticamente in tutta la piattaforma web, l'attenzione di questo progetto è concentrata su un numero limitato di aree più problematiche che possono essere migliorate in modo significativo, rimuovendole quindi dai problemi principali per gli sviluppatori.
Il progetto di compatibilità utilizza più criteri che influenzano le aree a cui assegnare le priorità. Alcuni sono:
- Utilizzo delle funzionalità. Ad esempio, flexbox è utilizzato nel 75% di tutte le visualizzazioni di pagina e l'adozione è in forte crescita in HTTP Archive.
- Numero di bug (in Chromium, Gecko, WebKit) e, per Chromium, quante stelle hanno questi bug.
Risultati del sondaggio:
- Indagini sul DNA della MDN
- Report di compatibilità del browser MDN
- Le funzionalità più note e utilizzate sullo stato del CSS
Risultati dei test web-platform-test. Ad esempio, flexbox on wpt.fyi.
Posso usare le funzionalità più cercate?
Le cinque aree di interesse principali nel 2021
Nel 2020 Chromium ha iniziato a occuparsi delle aree principali descritte nell'articolo Migliorare la compatibilità del browser di Chromium nel 2020. Nel 2021 cominceremo a impegnarci ancora di più. Google e Microsoft stanno collaborando per risolvere i problemi principali di Chromium, oltre che con Igalia. Igalia, che collabora regolarmente a Chromium e WebKit e gestisce la porta ufficiale WebKit per i dispositivi incorporati, ha fornito un grande supporto e coinvolgimento in queste attività di compatibilità, aiutandoti ad affrontare e monitorare i problemi identificati.
Di seguito sono riportate le aree che dovranno essere risolte nel 2021.
Flexbox CSS
CSS Flexbox
è
ampiamente usato
sul web e per gli sviluppatori sono ancora presenti alcune sfide importanti. Ad esempio, sia Chromium che WebKit hanno riscontrato problemi con i container flessibili auto-height che hanno portato a immagini di dimensioni errate.
Foto di Alireza Mahmoudi.
Il post del blog flexbox Cats di Igalia approfondisce questi problemi con molti altri esempi.
Perché ha la priorità
- Sondaggi: problema principale nel report sulla compatibilità del browser MDN, il più noto e utilizzato nello stato del CSS.
- Test: 85% superato in tutti i browser
- Utilizzo: 75% delle visualizzazioni di pagina, in forte crescita in HTTP Archive
Griglia CSS
La griglia CSS è un componente di base dei moderni layout web, che sostituisce molte tecniche e soluzioni alternative meno recenti. Poiché l'adozione è in crescita, deve essere estremamente efficace, in modo che le differenze tra i browser non siano mai un motivo per evitarla. Un'area che manca è la possibilità di animare i layout a griglia, supportati in Gecko ma non in Chromium o WebKit. Se supportati, è possibile ottenere effetti simili ai seguenti:
Perché ha la priorità
- Sondaggi: secondo classificato nel Report sulla compatibilità del browser MDN, ben noto ma meno utilizzato nello State of CSS
- Test: superato del 75% in tutti i browser
- Utilizzo: 8% e in crescita costante, leggera crescita in HTTP Archive
Posizione CSS: fissa
Il posizionamento permanente consente ai contenuti di rimanere fissati al bordo dell'area visibile ed è comunemente utilizzato per le intestazioni che sono sempre visibili nella parte superiore dell'area visibile. Sebbene sia supportato in tutti i browser, in alcuni casi d'uso comuni non funziona come previsto. Ad esempio, le intestazioni delle tabelle permanenti non sono supportate in Chromium e, sebbene ora siano supportate dietro un flag, i risultati non sono coerenti tra i browser:
Guarda la demo delle intestazioni delle tabelle persistenti di Rob Flack.
Perché ha la priorità
- Sondaggi: altamente conosciuti/utilizzati nello stato dei CSS ed sono stati riportati più volte nel Report sulla compatibilità del browser MDN
- Test: 66% di superamento in tutti i browser
- Utilizzo: 8%
Proprietà delle proporzioni CSS
La nuova
proprietà CSS aspect-ratio
consente di mantenere facilmente un rapporto larghezza-altezza coerente per
gli elementi, eliminando la necessità del noto
compromesso padding-top:
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Poiché si tratta di un caso d'uso molto comune, prevediamo che venga ampiamente utilizzato e vogliamo assicurarci che sia coerente in tutti gli scenari comuni e nei vari browser.
Perché ha la priorità
- Sondaggi: già noti, ma non ancora ampiamente utilizzati nello stato dei CSS
- Test: superato il 27% in tutti i browser
- Utilizzo: 3% e si prevede una crescita
Trasformazioni CSS
Le trasformazioni CSS sono supportate da molti anni in tutti i browser e sono ampiamente utilizzate sul web. Tuttavia, rimangono molte aree in cui non funzionano allo stesso modo nei vari browser, in particolare con le animazioni e le trasformazioni 3D. Ad esempio, l'effetto di capovolgimento delle schede può essere molto incoerente tra i browser:
Perché ha la priorità
- Sondaggi: molto noti e utilizzati nello stato dei CSS
- Test: superamento del 55% in tutti i browser
- Utilizzo: 80%
Come puoi contribuire e seguire
Segui e condividi eventuali aggiornamenti che pubblichiamo su @ChromiumDev o sulla mailing pubblica pubblica, Compat 2021. Assicurati che esistano bug o segnalali per problemi che hai riscontrato e, se manca qualcosa, contatta i canali menzionati in precedenza.
Ci saranno aggiornamenti regolari sui progressi qui su web.dev e puoi anche seguire l'avanzamento per ogni area nella dashboard di Compat 2021.
Ci auguriamo che questo impegno collaborativo tra i fornitori di browser per migliorare l'affidabilità e l'interoperabilità ti aiuterà a realizzare progetti straordinari sul web.