Thématisation de l'UI générée par le navigateur

Fonctionnalités Web : ::selection user-select accent-color color-scheme scrollbar-color scrollbar-width :user-valid et :user-invalid :placeholder-shown ::placeholder field-sizing resize (propriété CSS) <select> personnalisable appearance :has() ::file-selector-button

La plupart des interfaces utilisateur générées par le navigateur peuvent être personnalisées dans une certaine mesure à l'aide de CSS. Même s'il nécessite des fonctionnalités modernes, il se dégrade de manière fluide dans les anciens navigateurs et ne nécessite donc souvent pas de polyfill ni de solution de remplacement.

Avant de recréer l'UI du navigateur (commandes de formulaire, barres de défilement, sélections, messages d'erreur, etc.), vérifiez d'abord les points suivants :

  1. L'UI du navigateur ne peut pas être suffisamment personnalisée pour répondre à vos besoins, même avec un CSS moderne.
  2. la personnalisation souhaitée est suffisamment importante pour justifier les compromis liés à la recréation de l'UI intégrée, notamment la perte de la sémantique accessible, de la gestion du clavier, de l'IME et de l'intégration des technologies d'assistance que l'UI native fournit sans frais.

Voici quelques exemples de personnalisations possibles :

  • Utilisez ::selection pour personnaliser les couleurs du texte mis en surbrillance.
  • À ÉVITER : Appliquer user-select: none au texte du contenu, car cela empêche le copier-coller, les outils de traduction et les gestes "lire à partir d'ici" des technologies d'assistance. Limitez-le à l'interface (poignées de déplacement, barres d'outils, libellés de boutons redondants).
  • Utilisez accent-color pour appliquer la couleur d'accentuation de la page à n'importe quelle UI générée par le navigateur.
  • Utilisez color-scheme pour que l'UI du navigateur s'adapte au mode clair/sombre.
  • Utilisez scrollbar-color pour personnaliser les couleurs de la barre de défilement et scrollbar-width pour contrôler l'épaisseur de la barre de défilement. Veillez à ce que le curseur soit visiblement distinct de la piste (≥3:1) et ne définissez pas scrollbar-width: none sur les régions à défilement (utilisez-le uniquement lorsque le défilement est entièrement remplacé par une autre affordance).
  • Utilisez :user-invalid/:user-valid pour le style de validité, et non :invalid/:valid. Ils ne correspondent qu'après l'interaction de l'utilisateur avec le champ, ce qui évite de signaler par défaut les champs obligatoires vides comme des erreurs lors du chargement de page. Excluez les curseurs de plage lorsque vous ciblez input de manière générale (par exemple, input:not(input[type="range"]):user-valid) afin que l'ajustement d'un curseur n'applique pas de bordures ni d'arrière-plans de validité de champ.
  • Les boutons et les champs de texte (y compris <textarea>) peuvent généralement être stylisés comme des éléments normaux.
  • Utilisez font-size pour mettre à l'échelle et d'autres propriétés textuelles pour contrôler la typographie

Appliquer un style aux champs textuels (<input> et <textarea>)

Pour la plupart des styles (couleurs, bordures, arrière-plans, typographie, etc.), traitez ces éléments comme des conteneurs de texte normaux.

  • Utilisez :placeholder-shown et ::placeholder pour styliser les espaces réservés de saisie.
  • Utilisez field-sizing: content pour adapter la taille des champs de texte au contenu.
  • Pour les éléments <textarea>, utilisez resize: vertical pour désactiver le redimensionnement horizontal ou resize: none pour désactiver tout redimensionnement.

Commandes à choix multiples (sélection, cases d'option, cases à cocher)

  • Pour sélectionner une option parmi plusieurs présentées dans un menu déroulant : utilisez <select> + appearance: base-select + ::picker(select). Pour en savoir plus, consultez Style de sélection de marque.
  • Sélection d'une ou de plusieurs options parmi plusieurs options présentées en ligne sur la page : utilisez un <input type=checkbox> ou un <input type=radio> dans un <label> pour chaque option. Style via label:has(:checked).
  • Stylisez les cases à cocher, les boutons radio et les boutons d'activation/désactivation via appearance: none + le contenu généré (::before/::after) ou les images de fond pour dessiner l'état coché.

<input>s non textuels (boutons, curseurs, entrées de fichiers, etc.)

  • Entrées de fichier : utilisez ::file-selector-button pour appliquer un style au bouton.
  • N'utilisez pas <input> avec un type de button, submit ou reset. Utilisez plutôt <button> et appliquez-lui un style comme à un élément standard.
  • Curseurs : utilisez appearance: none + les pseudo-éléments de curseur (::-webkit-slider-thumb, ::-moz-range-thumb, etc.) et les pseudo-éléments de piste (::-webkit-slider-runnable-track, ::-moz-range-track, etc.) pour un contrôle plus précis.