Per la prima volta in assoluto, tutti i principali fornitori di browser e le altre parti interessate si sono uniti per risolvere i principali problemi di compatibilità dei browser identificati dagli sviluppatori web. L'interoperabilità 2022 migliorerà l'esperienza di sviluppo per il web in 15 aree chiave. In questo articolo, scopri come siamo arrivati a questo punto, su cosa è incentrato il progetto, come verrà misurato il successo e come puoi monitorare i progressi.
Tutto è iniziato nel 2019
Nel 2019 Mozilla, Google e altri paesi hanno iniziato un grande impegno per comprendere i punti deboli degli sviluppatori tramite i sondaggi sulla valutazione delle esigenze degli sviluppatori MDN e il report sulla compatibilità del browser di approfondimento. Questi report ci hanno fornito informazioni dettagliate e strategiche per affrontare le principali sfide per gli sviluppatori che utilizzano la piattaforma web e hanno portato all'iniziativa di Compat del 2021.
Tra le altre cose, Compat 2021 ha portato alla creazione di solide basi per funzionalità potenti come la griglia CSS (utilizzo del 12% e in costante crescita) e flexbox di CSS (77% di utilizzo), inclusa la proprietà gap in Flexbox, che risolve un problema principale per gli sviluppatori quando adottano nuovi metodi di layout.
Siamo stati felici di raggiungere un punteggio di oltre il 90% in tutte le implementazioni alla fine del 2021.
Che cos'è l'interoperabilità 2022?
Interop 2022 è un benchmark, concordato dai rappresentanti di tre principali implementazioni dei browser e sviluppato tramite un processo di nomina pubblica e revisione con il contributo dei sostenitori Apple, Bocoup, Google, Igalia, Microsoft e Mozilla.
Il benchmark si concentra su 15 aree, identificate dagli sviluppatori come particolarmente problematiche quando non sono presenti o hanno problemi di compatibilità tra i browser. Tutti i fornitori di browser hanno convenuto di concentrarsi su queste aree e tutti i soggetti coinvolti sono entusiasti di iniziare a migliorare sensibilmente l'esperienza di sviluppo per il web.
Le 15 aree di interesse
Le seguenti funzionalità saranno il fulcro di Interop 2022. Includono 10 nuove aree, più 5 riportate da Compat 2021. Le nuove aree di interesse sono:
Livelli a cascata
I livelli a cascata offrono agli sviluppatori web un maggiore controllo sulla catena. Consentono di raggruppare i selettori in livelli, ciascuno con la propria specificità. Ciò significa che non devi ordinare con attenzione i selettori o crearne di molto specifici per sovrascrivere le regole CSS di base.
Spazi colore e funzioni colore CSS
Per utilizzare le funzioni colore in un sistema di progettazione, al momento devi fare affidamento sui valori HSL, Sass, PostCSS o calc(). Le funzioni colore incorporate nel CSS implicano che i colori possono essere aggiornati in modo dinamico e i nuovi spazi colore eliminano le restrizioni alla gamma sRGB e le limitazioni percettive di HSL.
In CSS Color Level 5 sono definite due funzioni che consentono di creare temi più dinamici sulla piattaforma web:
color-mix(): prende due colori e restituisce il risultato della loro combinazione in uno spazio colore specificato per una quantità specificata.color-contrast(): seleziona da un elenco di colori, dal colore con il contrasto più elevato a un colore singolo specificato.
Queste funzioni supportano gli spazi colore espansi (LAB, LCH e P3) e, oltre a HSL e sRGB, utilizzano per impostazione predefinita lo spazio colore LCH uniforme.
Nuove unità area visibile
Le difficoltà relative alle dimensioni delle aree visibili sono evidenti sia nel Report sulla compatibilità del browser MDN del 2020 sia nel nuovo sondaggio State of CSS 2021. Livello 4 delle unità e dei valori CSS aggiunge nuove unità per le dimensioni più grandi, più piccole e dinamiche dell'area visibile, lv*, sv* e dv*. Con queste unità sarà più semplice creare layout che riempiano l'area visibile sui dispositivi mobili tenendo conto della barra degli indirizzi.
Inoltre, il team multifornitore che si occupa di Interop 2022 collaborerà alla ricerca e al miglioramento dello stato di interoperabilità delle funzionalità di misurazione dell'area visibile esistenti, inclusa l'unità vh esistente.
Scorrimento
Il report del sondaggio di scorrimento del 2021 conferma che le funzionalità di scorrimento e la compatibilità dello scorrimento sono difficili da implementare e hanno molte aree di miglioramento. Ci concentreremo sull'allineamento dello scorrimento, sul comportamento dello scorrimento e sul comportamento dello scorrimento per fare in modo che lo scorrimento sia più coerente e fluido su tutte le piattaforme.
Stiamo anche esaminando nuove proposte di funzionalità di agganciamento a scorrimento.
Griglia
Il valore subgrid pari a grid-template-columns e grid-template-rows indica che un elemento della griglia a cui è applicato display: grid può ereditare la definizione della traccia dalla parte della griglia principale su cui è posizionato.
Ad esempio, i seguenti tre componenti di schede hanno intestazione e piè di pagina allineati con le intestazioni e i piè di pagina delle schede adiacenti, anche se ciascuna scheda ha una griglia indipendente. Questo pattern funziona perché ogni scheda è un elemento che si estende su tre righe della griglia principale e utilizza la griglia per ereditare queste righe nella scheda.
Inclusi anche
- Contenimento CSS (la proprietà
contain) - Elemento
<dialog> - Controlli del modulo
- Tipografia e codifiche: tra cui
font-variant-alternates,font-variant-position, l'unitàice le codifiche del testo CJK - Web Compat, incentrato sulle differenze tra i browser che hanno causato problemi di compatibilità del sito che interessano gli utenti finali
Le seguenti aree hanno fatto grandi progressi nel progetto Compat 2021, ma c'è ancora margine di miglioramento. Pertanto, sono stati inclusi in Interop 2022 per risolvere i problemi rimanenti.
- Formato
- Flexbox
- Griglia
- Posizionamento permanente
- Trasformazioni
Iniziative di indagine
Oltre alle 15 aree di interesse, Interoperabilità 2022 include tre iniziative di indagine. Si tratta di aree problematiche e che devono essere migliorate, ma in cui lo stato attuale delle specifiche o dei test non è ancora abbastanza buono da poter valutare i progressi utilizzando i risultati del test:
- Editing,
contenteditableeexecCommand - Eventi puntatore e mouse
- Misurazione dell'area visibile
I fornitori di browser e le altre parti interessate collaboreranno per migliorare i test e le specifiche per queste aree, in modo che possano essere incluse nelle future iterazioni di questa iniziativa.
Valutazione dei risultati e monitoraggio dei progressi
La dashboard web dei test delle piattaforme esistente verrà utilizzata per monitorare i progressi nelle 15 aree di interesse. Per ogni area, è stata identificata una serie di test. In questi test viene assegnato un punteggio ai browser, che viene assegnato un punteggio per ciascuna area e un punteggio complessivo per tutte e 15 le aree.
Per seguire e monitorare i progressi, dai un'occhiata alla dashboard di Interop 2022. Nel corso dell'anno, puoi seguire il tuo percorso e capire come sta migliorando la piattaforma per cui crei.
Cosa cambierà per gli sviluppatori?
L'obiettivo di questi sforzi pluriennali di interoperabilità, sotto forma di Compat 2021, Interop 2022 e molto altro, è quello di riconoscere pienamente e risolvere i punti deboli che gli sviluppatori hanno sperimentato da molti anni. E non si tratta di uno sforzo unico nel browser, ma di una solida collaborazione tra tutti i principali fornitori di browser e amici per migliorare la piattaforma web a tutti i livelli.
In sostanza, l'obiettivo è rendere la piattaforma web più utilizzabile e affidabile per gli sviluppatori, in modo che possano dedicare più tempo alla creazione di ottime esperienze web invece di aggirare le incoerenze del browser.
Facci sapere la tua opinione
Ci piacerebbe conoscere la tua opinione sui miglioramenti apportati durante Compat 2021 o su una qualsiasi delle funzionalità incluse in Interop 2022. Quale di queste funzionalità farà la differenza nel tuo lavoro? Che cosa ti piace davvero? Invia problemi per il repository GitHub o comunicacelo su Twitter.
Scopri di più su Interop 2022 da: