Se dovessi dividere le evoluzioni dei CSS in categorie, saremmo andati ben oltre i giorni in cui chiedevamo semplicemente il raggio del confine per sentirci come se vivessimo nel futuro. Attualmente viviamo in un momento in cui la piattaforma ci offre strumenti che non si limitano a modificare il livello visivo, ma ridefiniscono radicalmente il modo in cui progettiamo le interfacce. Pensavo che il numero di funzionalità annunciate nel 2024 non potesse essere superato. Non sono mai stato così felicemente sbagliato.
Il “CSS Wrapped 2025” del team di Chrome non è solo un elenco di funzionalità; è un manifesto per un web dinamico e nativo. Avendo trascorso un paio d'anni a documentare queste evoluzioni, dalla definizione delle epoche dei "CSS5" alle complessità delle moderne utilità di layout, mi ritrovo a guardare la conclusione di quest'anno con un enorme senso di eccitazione. Stiamo assistendo a uno spostamento verso “l’ergonomia ottimizzata” e le “interazioni di nuova generazione” che ci consentono di smettere di combattere il codice e iniziare a scolpire le interfacce nel loro stato naturale.
In questo articolo puoi trovare uno sguardo completo alle funzionalità più importanti del rapporto di Chrome, viste attraverso la lente dei miei recenti esperimenti e delle speranze per il futuro della piattaforma.
La rivoluzione dei componenti: finalmente una selezione nativa e personalizzabile
Per anni ci siamo affidati a pesanti librerie JavaScript per definire lo stile dei menu a discesa, un "problema vecchio di decenni" che la piattaforma ha finalmente risolto. Come ho dettagliato nel mio approfondimento sulla storia della selezione personalizzabile (e articoli correlati), questa è stata una lunga strada che ha coinvolto l'interfaccia utente aperta, eliminando nomi come
La fantastica aggiunta di consentire contenuti ricchi all'interno di opzioni, come immagini o bandiere, è molto divertente. Al giorno d'oggi possiamo creare tutti i tipi di selezioni:
Demo: ho creato una demo di Poké-avventura che mostra come il nuovo elemento
Visualizza la penna Una selezione personalizzabile con immagini all'interno delle opzioni e il contenuto selezionato [biforcato] da utilitybend.
Demo: uno sguardo completo allo styling della selezione con solo pseudo-elementi.
Vedi la penna Una selezione personalizzabile con solo pseudo-elementi [biforcati] da utilitybend.
Demo: oppure puoi fare un salto di qualità con questa demo di selezione del menu utilizzando optgroups.
Guarda la penna Un vero e proprio menu di selezione con optgroup [biforcato] da utilitybend. Questa caratteristica da sola segnala un enorme cambiamento nel modo in cui costruiremo i moduli, riducendo le dipendenze e il debito tecnico. Indicatori di scorrimento e la morte del carosello JavaScript La creazione di caroselli è stata storicamente un punto di attrito tra sviluppatori e clienti. I clienti li adorano, gli sviluppatori temono il JavaScript richiesto per renderli accessibili e performanti. L'arrivo degli pseudo-elementi ::scroll-marker e ::scroll-button() cambia completamente questa dinamica. Queste funzionalità ci consentono di creare punti di navigazione e pulsanti di scorrimento esclusivamente con CSS, collegati nativamente allo scroll container. Come ho scritto sul mio blog, questo è stato Amore alla prima diapositiva. La possibilità di creare uno slider completamente funzionale e accessibile senza una sola riga di JavaScript non è solo conveniente; è un trionfo per le prestazioni. Ci sono alcuni problemi di accessibilità riguardo a questa funzionalità e, anche se sono validi, noi sviluppatori potremmo avere un modo per farla funzionare. La cosa buona è che tutte queste modifiche all'interfaccia utente stanno rendendo tutto molto più semplice rispetto alla manipolazione personalizzata del DOM e al trascinamento dei tag aria, ma sto divagando... Ora possiamo raggruppare automaticamente i marcatori utilizzando scroll-marker-group e modellare i pulsanti utilizzando il posizionamento dell'ancora per posizionarli esattamente dove vogliamo.
.carosello { overflow-x: automatico; gruppo-marker-di-scorrimento: dopo; /* Crea il contenitore per i punti */
/* Crea i pulsanti */ &::pulsante di scorrimento(fine inline),&::pulsante di scorrimento(avvio in linea) { contenuto: " "; posizione: assoluta; /* Usa il posizionamento dell'ancora per centrarli */ posizione di ancoraggio: --carosello; in alto: ancora(centro); }
/* Crea i marcatori sui bambini */ div { &::indicatore di scorrimento { contenuto: " "; larghezza: 24px; raggio del bordo: 50%; cursore: puntatore; } /* Evidenzia il marcatore attivo */ &::scroll-marker:target-current { sfondo: bianco; } } }
Demo: il mio esperimento creando un carosello esclusivamente da HTML e CSS, utilizzando il posizionamento dell'ancora per posizionare i pulsanti.
Vedi Pen Carousel Pure HTML e CSS [biforcuti] di utilitybend.
Demo: un rifacimento dello slider del Webshop che utilizza attr() per inserire dinamicamente le immagini di sfondo nei marcatori.
Guarda il rifacimento dello slider slick di Pen Webshop in CSS [biforcato] da utilitybend. Domande sullo stato: cosa appiccicosa bloccata? Una cosa scattante scattata? Per molto tempo non abbiamo avuto la possibilità di sapere se una "cosa appiccicosa è bloccata" o se un "oggetto scattante si è spezzato" senza fare affidamento sugli hack di IntersectionObserver. Chrome 133 ha introdotto le query sullo stato di scorrimento, consentendoci di interrogare questi stati in modo dichiarativo. Impostando container-type: scroll-state, ora possiamo definire gli elementi secondari in base al fatto che siano bloccati, bloccati o traboccanti. Questo è un enorme miglioramento della “qualità della vita” che aspettavo con impazienza dal CSS Day 2023. Si è persino evoluto molto dal momento che possiamo anche vedere la direzione dello scorrimento, adorabile! Per un semplice esempio: possiamo finalmente applicare un'ombra a un'intestazione solo quando è effettivamente attaccata alla parte superiore del viewport: .contenitore-intestazione { tipo-contenitore: stato di scorrimento; posizione: appiccicosa; superiore: 0;
intestazione { transizione: box-shadow 0.5s facilitato; /* La query controlla lo stato del contenitore */ @container scroll-state(bloccato: in alto) { box-ombra: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: un'intestazione fissa che applica un'ombra solo quando è effettivamente bloccata.
Vedi le intestazioni Pen Sticky con la query sullo stato di scorrimento, controllando se l'elemento sticky è bloccato [biforcato] da utilitybend.
Demo: un elenco a tema Pokémon che utilizza query sullo stato di scorrimento combinate con il posizionamento dell'ancora per spostare un fotogramma sul personaggio attualmente scattato.
Vedi la query sullo stato di scorrimento della penna per verificare quale elemento è stato bloccato con CSS, versione Pokemon [biforcuta] da utilitybend. Ergonomia ottimizzata: logica nei CSS La sezione "Ergonomia ottimizzata" di CSS Wrapped evidenzia le funzionalità che rendono i nostri flussi di lavoro più intuitivi. Tre caratteristiche si distinguono come trasformative per il modo in cui scriviamo la logica:
Istruzioni if() Finalmente stiamo ottenendo i condizionali nei CSS. La funzione if() agisce come un operatore ternario per i fogli di stile, permettendoci di applicare valori basati su media, supporto o query di stile in linea. Ciò riduce la necessità di blocchi @media dettagliati per le modifiche alle singole proprietà. @funzionifunzioniPossiamo finalmente spostare un po' di logica in un posto diverso, ottenendo file più puliti, una vera caratteristica della qualità della vita. sibling-index() e sibling-count() Queste funzioni di conteggio degli alberi risolvono il problema delle animazioni sconcertanti o degli elementi di stile in base alla dimensione dell'elenco. Come ho esplorato in Applicare stili ai fratelli con CSS non è mai stato così semplice, questo elimina la necessità di codificare le proprietà personalizzate (come --index: 1) nel nostro HTML.
Esempio: calcolo dei layout Ora possiamo scrivere formule matematiche concise. Ad esempio, scaglionare un'animazione per le carte che entrano nello schermo diventa banale: .contenitore-carta > * { animazione: rivela 0,6 secondi di allentamento in avanti; /* Niente più variabili --index manuali! */ ritardo animazione: calc(sibling-index() * 0.1s); }
Ho anche sperimentato l'utilizzo di queste funzioni insieme alla trigonometria per posizionare gli elementi in un cerchio perfetto senza JavaScript.
Demo: animazioni di carte sbalorditive in modo dinamico.
Vedi le carte Pen Stagger usando sibling-index() [forked] di utilitybend.
Demo: posizionamento degli elementi in un cerchio perfetto utilizzando l'indice dei fratelli, il conteggio dei fratelli e la nuova funzione CSS @.
Vedi la penna Il cerchio che utilizza l'indice dei fratelli, il conteggio dei fratelli e le funzioni [biforcate] da utilitybend. La mia lista di cose da fare CSS: funzionalità che non vedo l'ora di provare Mentre ero impegnato a scolpire selezioni e transizioni, il rapporto "CSS Wrapped 2025" è pieno di altre chicche che non ho ancora avuto la possibilità di attivare in CodePen. Questi sono in cima alla mia lista per i miei prossimi esperimenti: Query sui contenitori ancorati Ho utilizzato il posizionamento ancoraggio CSS per i pulsanti nella demo del carosello, ma "CSS Wrapped" evidenzia unevoluzione di questo: query sui contenitori ancorati. Questo risolve un problema che tutti abbiamo avuto con i tooltip: se il browser gira il tooltip dall'alto verso il basso a causa di vincoli di spazio, la "freccia" spesso rimane puntata nella direzione sbagliata. Con le query sul contenitore ancorato (@container ancorato(fallback: flip-block)), possiamo modellare l'elemento in base alla posizione di fallback effettivamente scelta dal browser. Gruppi di transizione vista nidificata Le transizioni di visualizzazione sono state una rivoluzione, ma hanno comportato un compromesso specifico: hanno appiattito l'albero degli elementi, che spesso interrompeva le trasformazioni 3D o l'overflow: clip. Ho sempre avuto la sensazione che mancasse qualcosa, e questa potrebbe essere proprio la risposta. Utilizzando view-transition-group: neighbor, possiamo finalmente nidificare i gruppi di transizione l'uno nell'altro. Ciò ci consente di mantenere gli effetti di ritaglio o le rotazioni 3D durante una transizione, cosa che prima era impossibile perché gli elementi venivano issati al livello più alto. .immagine carta { nome-transizione-vista: foto; gruppo-transizione-vista: più vicino; /* Mantienilo nidificato! */ }
Tipografia e forme Infine, l'ergonomo che è in me non vede l'ora di provare Text Box Trim, che promette di rimuovere quel fastidioso spazio bianco extra sopra e sotto il contenuto del testo (l'interlinea) per ottenere finalmente un perfetto allineamento verticale. E per il lato creativo, corner-shape e la funzione shape() stanno aprendo la strada a layout non rettangolari, consentendo “quadricoli” e percorsi complessi che rispondono alle variabili CSS. Detto questo, non vedo l’ora di avere un disegno pieno di scoiattoli! Un futuro pieno di speranza Stiamo assistendo a un mondo in cui i CSS stanno diventando capaci di gestire la logica, lo stato e le interazioni complesse che in precedenza appartenevano a JavaScript. Funzionalità come moveBefore (preservando lo stato DOM per iframe/video) e attr() (utilizzando tipi oltre le stringhe per colori e griglie) cementano ulteriormente questa realtà. Sebbene alcune di queste funzionalità siano attualmente sperimentali o specifiche per Chrome, lo slancio è innegabile. Dobbiamo sperare in un supporto continuo su tutti i browser attraverso iniziative come Interop per garantire che queste funzionalità diventino la base. Detto questo, avere motori browser è importante tanto quanto avere tutte queste fantastiche funzionalità in “Chrome first”. Queste nuove funzionalità devono essere discusse, modificate e testate prima di arrivare nei browser. È un momento fantastico per entrare nei CSS. Non siamo più solo documenti di styling; stiamo creando applicazioni dinamiche, ergonomiche e robuste con un toolkit nativo più potente che mai. Andiamo avanti con questa nuova era e spargiamo la voce. Questo è CSS Wrapped!
