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 due anni fa, Google e altri partner, tra cui Mozilla e Microsoft vuole saperne di più sui principali punti critici 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:
- Utilizzo delle funzionalità. Ad esempio, flexbox viene utilizzato Il 75% di tutte le visualizzazioni di pagina e l'adozione è in forte aumento in HTTP Archivio.
- Numero di bug (in Chromium, Geco WebKit) e, per Chromium, il numero di stelle gli insetti.
Risultati del sondaggio:
- Sondaggi sul DNA dell'MDN
- Report sulla compatibilità del browser MDN
- Stato del CSS le funzionalità più note e usate
Risultati dei test di web-platform-tests. Ad esempio, flexbox on wpt.fyi.
Posso utilizzare le funzionalità più cercate?
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 e 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 di Alireza Mahmoudi.
Il gatto flexbox di Igalia post del blog approfondisce questi problemi con molti altri esempi.
Perché viene assegnata la priorità
- Sondaggi: problema principale in MDN Browser Compatibility Report più noto e utilizzato nello stato SSC
- Test: 85% superato in tutti i browser
- Utilizzo: Il 75% delle visualizzazioni di pagina, con una forte crescita in HTTP Archivio
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:
Perché viene assegnata la priorità
- Sondaggi: Secondo posto tra MDN Browser Compatibility Report ben nota ma utilizzata meno spesso nello stato di SSC
- Test: 75% superato in tutti i browser
- Utilizzo: 8%, in costante crescita, lieve crescita di HTTP Archivio
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:
Controlla le intestazioni delle tabelle permanenti demo di Rob Flack.
Perché viene assegnata la priorità
- Sondaggi: molto noti/utilizzati nello Stato di CSS ed è stato visualizzato più volte Report sulla compatibilità del browser MDN
- Test: Superamento del 66% in tutti i browser
- Utilizzo: L'8%
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:
.container {
width: 100%;
padding-top: 56.25%;
}
.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:
Perché viene assegnata la priorità
- Sondaggi: molto noti e utilizzati nello Stato di CSS
- Test: 55% superato in totale browser
- Utilizzo: L'80%
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.
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!