CSS Wrapped 2025: Il JavaScript inizia a tremare?

Se pensate ancora al CSS come a quel linguaggio frustrante dove centrare un div è un'impresa, siete rimasti al 2020. Il CSS Wrapped 2025 rilasciato dal team di Chrome è più di un changelog: è un manifesto.

Il messaggio è chiaro: stiamo entrando in un'era dove logica, stato e interazioni complesse (che prima richiedevano pesanti librerie JavaScript) diventano native. Ecco le 4 feature che ci faranno cancellare migliaia di righe di codice JS inutile.

1. Finalmente la <select> personalizzabile

È stato il dolore di ogni frontend dev per decenni. Il cliente voleva una dropdown bella, e tu dovevi importare 50kb di libreria JS o creare div accrocchiati inaccessibili. Il problema è risolto. Con appearance: base-select, possiamo stilizzare completamente il tag <select> nativo (inclusi i singoli option e il menu a tendina) usando CSS standard. Risultato? Accessibilità garantita e zero dipendenze.

2. La morte del Carosello JS

Clienti e Designer amano gli slider. Gli sviluppatori li odiano perché richiedono script pesanti per funzionare bene. Con i nuovi pseudo-elementi ::scroll-marker e ::scroll-button(), possiamo creare caroselli con puntini di navigazione e frecce senza scrivere una riga di JavaScript. I marker si collegano automaticamente allo scroll container. Performance pura.

3. "If this, then that"... in CSS

Sì, avete letto bene. Arrivano gli statement if() inline. Funzionano come operatori ternari direttamente nel foglio di stile, permettendo di applicare valori diversi in base a media query o support query senza dover riscrivere blocchi enormi di codice. Aggiungeteci funzioni come sibling-index() (per calcolare l'indice di un elemento) e potete creare animazioni scaglionate (staggered animations) calcolando il ritardo matematicamente nel CSS, senza sporcare l'HTML con variabili custom.

4. Scroll State Queries: Sai se sono "Sticky"?

Fino a ieri, per sapere se un elemento position: sticky si era effettivamente "incollato" al bordo, serviva l'IntersectionObserver in JS. Un hack. Ora, con container-type: scroll-state, possiamo interrogare lo stato dello scroll in modo dichiarativo. Volete un'ombra sull'header solo quando si appiccica in alto? Si fa in CSS.

L'Output di Graffico 🔴

Perché questo cambia il nostro lavoro di Partner Tech? Perché "meno JavaScript" significa "più stabilità". Spostare la logica dell'interfaccia sul motore nativo del browser (CSS) rende le applicazioni più leggere, più veloci e meno soggette a bug. Smettete di combattere contro il browser. Iniziate a usarlo.