Supprimer le style natif des éléments avec CSS all: unset

Vous connaissez la situation : vous voulez un bouton au style personnalisé, alors vous commencez à écraser les valeurs par défaut du navigateur, une propriété à la fois. border: none. background: none. padding: 0. cursor: pointer. Ça fonctionne, mais ça semble bancal — comme si vous jouiez à la taupe avec la feuille de style du user agent.

Il existe une approche plus propre : la propriété CSS all. Plus précisément, all: unset. Cet article explique exactement ce qu’elle fait, quand l’utiliser et ce qu’elle casse silencieusement — y compris les styles de focus dont dépendent les utilisateurs du clavier.

Ce que all: unset fait réellement dans la cascade CSS

La propriété all est un raccourci qui définit toutes les propriétés CSS d’un coup, à l’exception de unicode-bidi, direction et des propriétés CSS personnalisées. Selon MDN, all: unset applique la règle suivante à chaque propriété :

• Si la propriété est héritée (comme color, font-size, line-height), elle hérite de son parent.
• Si la propriété n’est pas héritée (comme display, border, background, padding), elle revient à la valeur initiale définie par la spécification CSS.

C’est une distinction cruciale. all: unset ne restaure pas les valeurs par défaut du navigateur. Elle réinitialise les propriétés non héritées à leurs valeurs par défaut spécifiées — qui ne sont pas la même chose. Un <button> stylé avec all: unset ne ressemblera pas à un bouton de navigateur ordinaire. Il perdra entièrement son display, son appearance, sa bordure, son padding et son indicateur de focus.

Les quatre valeurs de la propriété all

Pour les composants d’interface personnalisés, all: unset est généralement ce dont vous avez besoin. Si vous devez annuler vos propres surcharges de feuille de style tout en conservant les valeurs par défaut du navigateur, all: revert est le meilleur choix.

Réinitialiser un bouton de la bonne manière

Voici un schéma de réinitialisation de bouton pratique qui supprime le style natif sans compromettre l’accessibilité :

.button-reset {
  all: unset;

  /* Restore safe defaults */
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;

  /* Your custom styles */
  padding: 0.5rem 1rem;
  background: #0070f3;
  color: white;
  border-radius: 4px;
}

/* Always restore focus visibility for keyboard users */
.button-reset:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 3px;
}

La règle :focus-visible n’est pas négociable. all: unset supprime l’indicateur de focus par défaut du navigateur, ce qui signifie que les utilisateurs du clavier perdent leur seul repère visuel pour savoir où se trouve le focus. Le restaurer avec :focus-visible suit les heuristiques du navigateur pour déterminer quand un indicateur de focus visible doit être affiché, généralement lors de la navigation au clavier, sans toujours afficher le contour lors des clics de souris.

all: unset vs appearance: none — Ce n’est pas la même chose

C’est une source de confusion courante. appearance: none supprime uniquement le rendu natif au niveau du système d’exploitation des contrôles de formulaire — le chrome spécifique à la plateforme qui fait qu’un <select> ressemble à une liste déroulante macOS ou à une combo box Windows. Cela ne touche ni la mise en page, ni l’espacement, ni la couleur, ni aucune autre propriété CSS.

all: unset est une réinitialisation globale de la cascade CSS. Elle affecte tout (avec les petites exceptions notées ci-dessus).

Pour les contrôles de formulaire natifs comme <select>, <input> et <textarea>, vous avez souvent besoin des deux :

select {
  all: unset;
  appearance: none; /* Removes OS-level control rendering */
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

select:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 2px;
}

Notez que certains navigateurs exigent également le préfixe -webkit-appearance: none pour une prise en charge complète multi-navigateurs sur les anciennes versions de Safari et iOS. La prise en charge par les navigateurs de all et de appearance est solide sur les navigateurs modernes.

Quand ne pas utiliser all: unset

Évitez all: unset sur les éléments où vous n’avez besoin de modifier que quelques propriétés. C’est un instrument grossier. Si vous voulez simplement supprimer l’arrière-plan et la bordure d’un bouton, ciblez ces propriétés directement — c’est moins susceptible de produire des effets secondaires inattendus.

Évitez également de l’utiliser sur les éléments conteneurs. Réinitialiser display sur un parent flex ou grid fera s’effondrer votre mise en page silencieusement.

Conclusion

all: unset est un raccourci puissant pour supprimer le style natif des éléments comme les boutons, les liens et les contrôles de formulaire — mais il réinitialise tout, y compris les propriétés que vous voulez probablement conserver. Restaurez toujours display, box-sizing, cursor et surtout :focus-visible après son utilisation. Associez-le à appearance: none lorsque vous travaillez avec des contrôles de formulaire natifs ayant un rendu au niveau du système d’exploitation. Utilisé avec précaution, c’est l’un des outils les plus propres du CSS moderne pour construire des composants d’interface personnalisés à partir de zéro.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..