L'histoire 31 octobre 2026
Le menu déroulant, dernière boîte sobre de la page, peut enfin être conçu
Depuis trente ans, le menu qui se déroule quand on choisit une taille, un pays ou une couleur avait l'apparence que lui donnait l'ordinateur du visiteur, quel que soit le reste de la page. Chrome a laissé les designers le restyler l'an dernier. Safari a suivi en septembre, et lundi, Safari 27.2 a ajouté une pièce de plus.
Tel que dessiné par l'ordinateur du visiteur : seulement des mots, dans la police du système
Restylé : la typographie propre à la page, une pastille de couleur pour chaque choix
Presque toute page qui vend quelque chose en a un : la boîte sur laquelle on clique pour choisir une taille, un pays, un jour de livraison, et la courte liste qui en sort. Dans le métier, on l'appelle un select, d'après l'élément HTML qui le produit. Jusqu'à récemment, un designer pouvait en changer bien peu, hormis la bordure et la couleur du texte. La liste qui s'ouvrait était dessinée par le système d'exploitation du visiteur, dans sa propre police et sa propre couleur de surbrillance, et ne pouvait contenir que des mots. Les sites qui voulaient un menu assorti au reste de la page en construisaient un faux à l'aide d'un script et de boîtes ordinaires, et ces faux menus échouent souvent pour les personnes qui utilisent un clavier ou un lecteur d'écran.
Cela a changé dans deux des trois grands navigateurs. Chrome a rendu le menu restylable dans la version 135, au printemps 2025. Safari 27.0 a fait de même le 17 septembre. Un designer l'active avec une ligne de CSS, le langage qui définit l'apparence d'une page : appearance: base-select. Après quoi chaque partie peut être stylée : la boîte, la liste, la petite flèche, la coche à côté de l'élément choisi. Chaque choix peut désormais contenir plus que des mots, si bien qu'un magasin de peinture peut afficher une pastille à côté de chaque couleur et un site de voyage un drapeau à côté de chaque pays. Comme il s'agit toujours du vrai menu, il continue de fonctionner avec le clavier, les lecteurs d'écran et les formulaires. L'équipe de Safari a formulé l'objectif sans détour : « un menu déroulant entièrement personnalisé, assorti au look de votre site ».
Lire l'article completFermer
L'apparence de départ compte aussi. Activez le nouveau menu sans rien ajouter, et Safari le dessine désormais avec une ombre portée douce, des coins arrondis de quatre pixels, des lignes assez hautes pour un doigt, une flèche pointant vers le bas et une coche, en versions claire et sombre. Safari a modifié ces réglages par défaut durant l'été et a porté le design devant le CSS Working Group, l'organisme qui écrit les règles suivies par les navigateurs, afin que tous puissent partager un même point de départ.
Safari 27.2, publié lundi, ajoute un petit point d'ancrage appelé ::field-content. Il permet à un designer de styler les mots de l'option choisie là où ils se trouvent dans la boîte fermée, sans reconstruire la boîte. La même version empêche aussi une longue liste de déborder du bord de l'écran.
Il y a une contrepartie. L'annonce de Chrome elle-même liste ce que le menu restylé abandonne : il n'ouvre plus le sélecteur intégré du téléphone, et il ne s'étire plus pour s'ajuster à son choix le plus long. Firefox ne propose le nouveau menu que derrière un réglage caché, si bien que ses visiteurs voient encore l'ancien. Rien ne casse pour eux : un navigateur qui ne connaît pas la nouvelle ligne l'ignore et dessine le menu ordinaire.
Pourquoi c'est importantLes formulaires sont l'endroit où une page soigneusement conçue redevient le plus souvent une page par défaut, au moment où l'on choisit ce qu'on va acheter. Le menu peut désormais reprendre la typographie, la couleur et les images de la page. Soignez d'abord la version simple, car les visiteurs de Firefox la verront, puis restylez la nouvelle, et testez-la sur un téléphone, où le menu restylé remplace le sélecteur natif.
Savoir-faire : couleur, structure et mouvement dans les sites primés →
Sources : WebKit : Fonctionnalités de Safari 27.2 (26 octobre 2026) · WebKit : Fonctionnalités de Safari 27.0 (17 septembre 2026) · Chrome for Developers : L'élément select peut désormais être personnalisé avec CSS (24 mars 2025) · MDN : Éléments select personnalisables · Données de compatibilité des navigateurs MDN : appearance