Data di pubblicazione: 24 marzo 2025
A partire da Chrome 135, gli sviluppatori e i designer web possono finalmente utilizzare un elemento <select> accessibile, standardizzato e personalizzabile con CSS sul web. Questo progetto è in fase di realizzazione da molti anni, sono state necessarie molte ore di lavoro di progettazione e definizione delle specifiche in collaborazione e il risultato è un componente incredibilmente ricco e potente che non avrà problemi nei browser meno recenti.
Ecco un video di selezioni personalizzate che utilizzano queste nuove funzionalità:
Se hai seguito da vicino la questione, avrai notato che alcuni nomi e funzionalità delle specifiche sono cambiati dalla richiesta di feedback della community di Una. Fortunatamente, se hai utilizzato questo post e ti interessa sapere cosa è cambiato, Una è a tua disposizione.
Inoltre, è disponibile una nuova documentazione su MDN per la selezione personalizzabile, ricca di dettagli.
Incontra appearance: base-select
Una nuova proprietà CSS appearance: base-select che inserisce l'elemento <select> in un nuovo stato configurabile e personalizzabile, comunemente noto come stili "di base":
.custom-select {
&, &::picker(select) {
appearance: base-select;
}
}
L'utilizzo di base-select sblocca una serie di nuove funzionalità e comportamenti:
- Modifica il parser HTML dei browser per i contenuti all'interno di
<select>. - Modifica gli elementi interni visualizzati del
<select>. - Espone nuovi componenti e stati interni per
<select>. - Un nuovo look minimalista, ottimizzato per la personalizzazione.
- Le opzioni mostrate si trovano nel livello superiore, come un popup.
- Le opzioni mostrate sono posizionate con
anchor().
L'utilizzo di base-select comporta la perdita di una serie di funzionalità e comportamenti:
<select>non viene visualizzato al di fuori del riquadro del browser.- Non attiva i componenti del sistema operativo mobile integrati.
<select>smette di prendere la larghezza del<option>più lungo.
Ora un <select> può includere contenuti HTML avanzati
Prima di poter personalizzare un <select>, se inserivi elementi come un'immagine o un SVG nell'elemento <select>, il browser li ignorava.<option>
Prendi in considerazione il seguente codice HTML, che il browser leggerà come l'hai scritto:
<select class="custom-select">
<option>
<svg aria-hidden>…</svg>
<span>HTML</span>
</option>
<option>
<svg aria-hidden>…</svg>
<span>CSS</span>
</option>
<option>
<svg aria-hidden>…</svg>
<span>JavaScript</span>
</option>
<option>
<svg aria-hidden>…</svg>
<span>WASM</span>
</option>
</select>
Tuttavia, il DOM utilizzato non include <svg>:
<select class="custom-select">
<option>
<span>HTML</span>
</option>
<option>
<span>CSS</span>
</option>
<option>
<span>JavaScript</span>
</option>
<option>
<span>WASM</span>
</option>
</select>
Ecco (da sinistra a destra) Chrome, Safari e Firefox che eseguono il rendering del codice HTML precedente. Se il browser supporta appearance: base-select, l'SVG verrà visualizzato nell'opzione, altrimenti no.
A causa delle modifiche al parser, c'è il rischio di interrompere i siti web esistenti con selezione personalizzabile. Chrome dispone delle funzionalità alla base di un esperimento Finch nel caso in cui sia necessario disattivarlo in caso di emergenza. Se tutto va bene, l'esperimento terminerà e il codice verrà inviato definitivamente al codice sorgente.
Completamente personalizzabile
Ogni parte di un base-select può essere sostituita, personalizzata e animata. Ecco una demo che utilizza tutte le nuove funzionalità per creare esperienze selezionate riconoscibili e significative.
Puoi trovare molti altri esempi nella sezione Risorse alla fine di questo post.
Interfacce JavaScript invariate
Le interazioni JavaScript esistenti con un elemento <select> non presentano rischi.
Tuttavia, se inizi ad aggiungere HTML avanzato agli elementi <option>, devi testare i valori selezionati, poiché il browser analizza e ignora ancora le immagini e gli SVG. Tuttavia, la logica per determinare la stringa di contenuti selezionata è cambiata e, a seconda delle opzioni disponibili, potrebbe essere necessario apportare modifiche.
Se utilizzi l'attributo value in un <option>, non devi preoccuparti.
Risorse
Chrome è il primo a implementare base-select, ma tutti i browser hanno partecipato alla stesura delle specifiche e ci sono altri elementi "di base" da completare. Ed è solo l'inizio.
Continua a seguirci perché continueremo ad aggiungere indicazioni, esempi e risorse per la personalizzazione di elementi selezionati. Nel frattempo, consulta i seguenti link per saperne di più.
- Standard web
- Chrome
- Community
Un ringraziamento speciale a tutti coloro che hanno contribuito alla realizzazione di questo progetto.