Nel primo articolo di CSS Nativo, abbiamo parlato di alcune novità come il CSS Nesting, @scope, @layer e altre cose. In questo secondo capitolo invece andremo a parlare di alcune novità rilasciate sempre nel 2024 e che molto probabilmente sentiremo molto parlare durante questo 2025.
Parleremo di:
– NEWS <select>
– zoom
– text-wrap
– content-visibility
Select
A partire da Chrome 135, avrete la possibilità di personalizzare l’elemento <select> utilizzando CSS nativo, quindi avendo un maggior controllo sull’aspetto e sul comportamento dei menu a discesa.
Questa funzionalità si attiva applicando la proprietà (al tag <select>):
appearance: base-select;Code language: HTTP (http)Con questa nuova impostazione, è possibile inserire contenuti HTML all’interno degli elementi <option>, come immagini o SVG, che in precedenza venivano ignorati dai browser.
Ad esempio, è ora possibile includere un’icona SVG accanto al testo di ogni opzione, migliorando l’esperienza utente.
Inoltre, ogni parte del <select> può essere completamente personalizzata e animata. È possibile modificare lo stile del pulsante che apre il menu a tendina, personalizzare l’elenco delle opzioni e aggiungere contenuti arbitrari all’interno delle opzioni stesse. Questa flessibilità consente di creare esperienze utente più coinvolgenti e su misura per le esigenze specifiche di un’applicazione web.
Zoom
La regola zoom in CSS è una proprietà non standard e specifica di alcuni browser (come Chrome e Edge) che consente di scalare il contenuto di un elemento, modificandone le dimensioni complessive (larghezza, altezza, margini, padding, ecc.) senza alterarne il layout.
Per utilizzare zoom, la sintassi è la seguente:
.zoom-normal {
zoom: 1;
}
.zoom-in {
zoom: 1.5;
}
.zoom-out {
zoom: 0.5;
}Code language: CSS (css)Il lato però negativo di zoom, è che non è una regola standard, per questo motivo al momento non ha piena compatibilità con i browser. Questo è molto importante e da tenere a mente quando lo si utilizza.
Al momento browser come firefox ad esempio ignorano totalmente la regola.
La mia prospettiva e che durante l’anno 2025, questa regola prenderà molto piede proprio perché è una regola molto interessante anche in ottica di accessibilità.
text-wrap: balance
Ti sarà capitato più volte durante lo sviluppo di dover adattare un testo allo spazio magari con un tag <br /> oppure modificando proprio il copy.
Una delle novità del 2024 di CSS è la nuova proprietà di “text-wrap” ovvero “balance”.
Essa bilancia il contenuto di ogni riga in un blocco di testo per distribuire uniformemente le parole, rendendo il testo visivamente più gradevole e leggibile, specialmente nei titoli o nelle intestazioni.
Questa regola ci permette di non dover più ricorrere all’utilizzo di tag come <br /> o di dover aggiustare noi il testo.
Un esempio pratico:
h1 {
width: 300px;
font-size: 2rem;
border: 1px solid #ccc;
text-wrap: balance;
}Code language: CSS (css)content-visibility
Quando un elemento ha content-visibility: auto;, il browser evita di calcolare lo stile di quel determinato elemento. Pensiamo ad esempio a una pagina lunghissima, non ci servirà ad esempio caricare il CSS nativo degli elementi fuori dalla viewport.
Valori disponibili
visible (default)
Il contenuto viene sempre renderizzato, come avviene normalmente.
hidden
Il contenuto non viene renderizzato, come se non esistesse nel DOM (ma rimane accessibile per script e screen reader).
auto
Il browser decide dinamicamente quando eseguire il rendering in base alla visibilità dell’elemento nel viewport.
Esempio di utilizzo:
.lazy-loaded {
content-visibility: auto;
contain-intrinsic-size: 1000px;
}Code language: CSS (css)Quindi content-visibility: auto; dice al browser di caricare il contenuto solo quando visibile.
Invece contain-intrinsic-size: 1000px; aiuta a prevenire il salto di layout assegnando una dimensione provvisoria prima del caricamento.
Vantaggi di content-visibility
– Migliora le performance: Riduce il carico sul rendering, utile per pagine con molti elementi.
– Ottimizza il caricamento: Perfetto per infinite scrolling e lazy loading.
– Migliora l’interazione: Il browser può rispondere più rapidamente alle azioni dell’utente.
Contro
– Non funziona bene per contenuti critici da mostrare subito all’utente
– Non deve essere usato su elementi con transizioni o animazioni
È una feature ideale per migliorare la performance delle pagine web senza dover ricorrere a JavaScript avanzato per gestire il lazy loading manualmente.
Conclusione
Queste nuove funzionalità di CSS rilasciate segnano un passo importante verso uno sviluppo web più efficiente, accessibile e flessibile. La personalizzazione del <select> offre nuove possibilità di design, mentre la proprietà zoom, sebbene non ancora standardizzata, potrebbe diventare una risorsa preziosa per migliorare l’accessibilità. La regola text-wrap: balance semplifica la gestione dei testi, rendendo il layout più armonioso senza necessità di interventi manuali. Infine, content-visibility è una potente ottimizzazione per il rendering delle pagine, riducendo il carico di lavoro del browser e migliorando le performance.
Queste innovazioni non solo semplificano la vita degli sviluppatori, ma migliorano anche l’esperienza utente. Il 2025 sarà sicuramente un anno in cui vedremo queste tecnologie diffondersi e diventare sempre più parte integrante del nostro workflow quotidiano.
Fammi sapere cosa ne pensi, alla prossima!
