Publié le : 24 mars 2025
À partir de Chrome 135, les développeurs et les concepteurs Web peuvent enfin s'unir sur un élément <select> accessible, standardisé et stylable en CSS sur le Web. Ce projet a nécessité des années de travail, de nombreuses heures d'ingénierie et de spécifications collaboratives. Le résultat est un composant incroyablement riche et puissant qui ne se cassera pas dans les anciens navigateurs.
Voici une vidéo de sélections personnalisées utilisant ces nouvelles fonctionnalités :
Si vous avez suivi attentivement, vous remarquerez que certains noms de spécifications et fonctionnalités ont changé depuis la demande de commentaires de la communauté d'Una. Heureusement, si vous avez suivi ce post et que vous souhaitez en savoir plus sur les changements, Una est là pour vous aider.
Vous trouverez également une toute nouvelle documentation sur MDN pour les sélecteurs personnalisables, qui regorge d'informations.
Meet appearance: base-select
Une nouvelle propriété CSS appearance: base-select qui place l'élément <select> dans un nouvel état configurable et stylable, généralement appelé "styles de base" :
.custom-select {
&, &::picker(select) {
appearance: base-select;
}
}
L'utilisation de base-select débloque un certain nombre de nouvelles fonctionnalités et de nouveaux comportements :
- Modifie l'analyseur HTML du navigateur pour le contenu de
<select>. - Modifie les éléments internes affichés de
<select>. - Expose de nouveaux états et composants internes pour
<select>. - Un nouveau look minimaliste, optimisé pour la personnalisation.
- Les options affichées se trouvent au premier plan, comme un pop-over.
- Options affichées positionnées avec
anchor().
L'utilisation de base-select entraîne la perte de plusieurs fonctionnalités et comportements :
- Le
<select>ne s'affiche pas en dehors du volet du navigateur. - Il ne déclenche pas les composants intégrés du système d'exploitation mobile.
- Le
<select>cesse de prendre la largeur du<option>le plus long.
Un <select> peut désormais inclure du contenu HTML enrichi.
Avant, si vous placiez des éléments tels qu'une image ou un SVG dans l'élément <option>, le navigateur les ignorait.<select>
Prenons l'exemple du code HTML suivant. Le navigateur le lira tel que vous l'avez écrit :
<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>
Toutefois, le DOM utilisé n'inclurait pas <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>
Voici (de gauche à droite) Chrome, Safari et Firefox affichant le code HTML précédent. Si le navigateur est compatible avec appearance: base-select, le fichier SVG s'affiche dans l'option. Sinon, il ne s'affiche pas.
En raison des modifications apportées à l'analyseur, il existe un risque de casser les sites Web existants avec des sélecteurs personnalisables. Chrome dispose des fonctionnalités d'un test Finch en cas de besoin urgent de désactivation. Si tout se passe bien, le test se terminera et le code sera intégré de manière permanente à la source.
Entièrement personnalisable
Chaque partie d'un base-select peut être remplacée, personnalisée et animée. Voici une démo qui utilise chaque nouvelle fonctionnalité pour créer des expériences de sélection reconnaissables et significatives.
Vous trouverez de nombreux autres exemples dans la section "Ressources" à la fin de cet article.
Interfaces JavaScript inchangées
Il n'y a aucun risque pour vos interactions JavaScript existantes avec un élément <select>.
Toutefois, si vous commencez à ajouter du code HTML enrichi dans vos éléments <option>, vous devez tester les valeurs sélectionnées, car le navigateur analyse et ignore toujours les images et les SVG. Toutefois, la logique de détermination de la chaîne de contenu sélectionnée a changé. Selon les options que vous avez choisies, vous devrez peut-être effectuer des ajustements.
Si vous utilisez l'attribut value sur un <option>, vous n'avez rien à craindre.
Ressources
Chrome est le premier à implémenter base-select, mais tous les navigateurs ont participé aux spécifications, et d'autres éléments de base doivent encore être finalisés. Ce n'est qu'un début.
Nous continuerons d'ajouter des conseils, des exemples et des ressources sur la personnalisation de certains éléments. Restez à l'écoute ! En attendant, consultez les liens suivants pour en savoir plus.
- Normes Web
- Chrome
- Communauté
Un grand merci à tous ceux qui ont contribué à la réalisation de ce projet !