Alla fine dell'anno scorso l'interoperabilità 2023 si è conclusa. L'impegno di fornitori di browser e di terze parti mira a creare un Web più interoperabile, con meno differenze tra i browser e, di conseguenza, che possano interferire. Questo post condivide i risultati finali e alcune delle funzionalità preferite dal team di Chrome.
I punteggi finali
È fantastico vedere così tanto verde, confrontarlo con i punteggi all'inizio del 2023. Ne abbiamo fatto molta strada, e ogni browser ha registrato un enorme aumento del punteggio.
Che cosa ci entusiasma?
Puoi trovare l'elenco completo delle aree di interesse per il 2023 nella dashboard di Interop 2023. Alcune aree di interesse, come :has(), le query relative ai container e l'attributo inert, hanno riguardato l'intera funzionalità. Altre, ad esempio il lavoro su Flexbox, hanno affrontato alcuni lievi errori di test in una funzionalità cross-browser esistente.
:has()
"Infine, un selettore principale per CSS. Questa richiesta è stata richiesta quasi sin dal primo giorno e finalmente averlo in tutti i browser è fantastico e gli sviluppatori devono eseguire meno JavaScript per emulare questo selettore." - Thomas Steiner, Developer Relations Engineer su Chrome.
È stato accolto con grande entusiasmo la pseudo-classe funzionale :has(), perché ha portato sulla piattaforma una richiesta chiave da parte degli sviluppatori. Fornisce un selettore principale in cui puoi selezionare un elemento in base agli elementi che si trovano al suo interno. Tuttavia, può essere usato per molto altro. Come spiegato in Con wrapping di CSS, puoi selezionare molto più di un elemento principale ed effettuare selezioni lateralmente.
:has(): dockUna Kravets, Developer Relations Engineer nel team di Chrome, ha spiegato:
"Il selettore :has() è una delle nuove funzionalità CSS più flessibili e potenti. che ti consente di definire lo stile di qualsiasi elemento principale in base alla presenza, allo stato o persino al numero di elementi secondari. Ma la cosa più importante è che puoi combinarla con altri combinatori per assegnare uno stile ai fratelli e ottenere un nuovo livello di controllo dello stile sulla tua UI. È una funzionalità molto flessibile. Ho già visto un sacco di demo interessanti che riducono la necessità di fare affidamento su script aggiuntivi per sfruttare il potere di :has()."
Come mi ha ricordato Philip Jägenstedt, un software engineer di Chrome, :has() è stata
la funzionalità principale con cui gli sviluppatori hanno avuto difficoltà a causa della mancanza di supporto quando è stato chiesto
nel sondaggio State of CSS del 2023.
Quindi non siamo le uniche persone entusiasti di avere questo servizio disponibile.
Puoi ascoltare Una, insieme ad Adam Argyle, parlare di has() su The CSS Podcast, quindi scoprire di più su :has() in questi post della community web.
- Scopri il selettore CSS
:has()tramite esempi - Blocco scorrimento con
:has() - Un caso d'uso per CSS
:has()
Query container
Il 2023 si è rivelato un grande anno per cose che un tempo si sentivano impossibili. Oltre a :has(), la piattaforma web ha finalmente ottenuto il supporto cross-browser per le query nei container. Hai richiesto query sui container (o sugli elementi) dal
2011, solo un anno dopo l'introduzione del concetto di progettazione reattiva. Ora è arrivato ed è disponibile in tutti i principali motori dei browser.
Una e Adam hanno discusso delle query sui container nel podcast CSS e Una le ha presentate in un episodio di Designing in the Browser. La community ha anche condiviso molti suggerimenti e idee.
Griglia
Subgrid è la mia inclusione preferita in Interop 2023. Consente di definire una griglia su un elemento principale e di utilizzare le dimensioni delle tracce definite nell'elemento principale nelle griglie nidificate all'interno di quella griglia principale. Grazie al lavoro degli ingegneri della piattaforma web di Microsoft Edge, sottogrid è diventata disponibile in tutti i principali motori dei browser nel corso del 2023 per migliorare il punteggio di Chrome e offrire questa entusiasmante funzionalità a tutti.
Adriana Jara, ingegnere per le relazioni con gli sviluppatori di Chrome, mi ha spiegato in che modo la creazione di una griglia di base e di una griglia
"Sono pessima per le immagini e i layout, per avere un aspetto coerente e per adattarmi agli schermi. Tuttavia, grazie a griglia e griglia è possibile creare un design che funziona su schermi di dimensioni diverse e si adatta automaticamente ai contenuti. È il mio preferito perché soddisfa l'esigenza fondamentale di creare un sito web che offra agli utenti un'esperienza soddisfacente senza un certo sforzo."
Ho scritto alcuni casi d'uso dei sottotitoli in un articolo per 12 giorni di web e, come per le altre funzionalità di questo post, puoi ascoltare un episodio del podcast CSS tutto in merito. Esistono anche tantissime risorse da tutto il web.
- Scopri la sottogriglia di CSS
- Video: layout semplici e più coerenti grazie alla griglia
- Definire il layout dei contenuti con la griglia CSS e la griglia
Spazi colore e funzioni
Non è stato sorprendente che lo sviluppatore CSS di Chrome Adam Argyle mi abbia detto che gli spazi colore e le funzioni sono stati la sua funzionalità preferita,
"Addio imbarazzante matematica per la variabile di valore del canale HSL; è arrivata la sintesi vocale delle varianti di colore just-in-time. I nuovi spazi colore e le nuove funzioni non solo risolvono i problemi relativi al flusso di lavoro dei colori, ma consentono di accedere a colori e gradienti più avanzati, affidabili e vivaci. Cosa c'è di meglio sullo sblocco di alcune funzionalità e contemporaneamente semplificarti la vita. Serviti di condimento per dare il meglio di sé e questo piatto è delizioso in ogni momento."
Adam sta creando contenuti straordinari per aiutarti a comprendere queste nuove funzionalità, come la High Definition CSS Color Guide e gradient.style, oltre a parlare delle funzioni colore nel CSS Podcast.
È fantastico avere queste funzionalità disponibili in tutti i principali motori dei browser. Scopri di più in questi fantastici articoli.
Pronti all'interoperabilità 2024
Una volta che le funzionalità diventano interoperabili, diventano parte di Baseline, di recente disponibile. È fantastico vedere il numero di nuove funzionalità che sono state inserite in questo gruppo durante il 2023, in gran parte grazie al lavoro di tutte le persone coinvolte in Interop 2023. Presto sarà il momento di annunciare le aree di interesse selezionate per il 2024 e non vediamo l'ora di scoprire quanto la piattaforma web possa migliorare quest'anno.