La propriété CSS all

La propriété CSS all est un raccourci qui réinitialise toutes les propriétés d'un élément en une seule fois, à l'exception de unicode-bidi et direction, qui contrôlent le sens du texte et sont délibérément laissées intactes.

Elle n'accepte pas une liste de valeurs de propriétés. À la place, vous lui donnez un seul mot-clé CSS global (initial, inherit, unset, revert ou revert-layer) et il applique ce mot-clé à chaque propriété de l'élément. C'est donc un moyen rapide d'effacer les styles hérités ou déclarés précédemment en une seule ligne.

Cette page couvre la syntaxe, chaque valeur acceptée, des exemples exécutables et les cas où utiliser all est réellement pertinent.

Pourquoi et quand l'utiliser

La raison la plus courante d'utiliser all est de créer une base de style propre. Par exemple, lorsque vous intégrez un widget ou un composant tiers dans une page, les styles hérités (police, couleur, interligne) peuvent se propager. Définir all: initial ou all: revert sur l'élément conteneur supprime cet héritage afin que le composant parte d'un état prévisible.

Gardez ces points à l'esprit :

C'est lourd. all touche chaque propriété, donc utilisez-le sur de petits sous-arbres bien délimités plutôt que sur body ou de grands conteneurs.
Il ne réinitialise pas direction ni unicode-bidi. C'est intentionnel, de sorte que le sens du texte ne soit jamais accidentellement cassé.
Les enfants ne sont pas réinitialisés automatiquement. all réinitialise l'élément ciblé. Les propriétés héritées (comme color) descendent quand même vers les enfants, sauf si ceux-ci se réinitialisent également.

Cette propriété est considérée comme un raccourci de réinitialisation. Contrairement aux raccourcis à valeurs multiples tels que margin ou background, elle n'a pas de version longue ni de sous-propriétés.

Valeur initiale	normal
S'applique à	Tous les éléments.
Héritée	Non.
Animatable	Non.
Version	CSS3
Syntaxe DOM	object.style.all = "inherit";

Syntaxe

Syntaxe de la propriété CSS all

all: initial | inherit | unset | revert | revert-layer;

Exemple de la propriété all avec la valeur revert :

Exemple de la propriété CSS all avec la valeur revert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        color: #666;
        all: revert;
      }
    </style>
  </head>
  <body>
    <h2>All property example</h2>
    <p>Here the all: revert; is set.</p>
    <div class="example"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété all avec les valeurs inherit, initial et unset :

Exemple de la propriété CSS all avec les valeurs inherit, initial et unset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-size: 15px;
        color: #1c87c9;
      }
      .example1 {
        background-color: #8ebf42;
        color: #666;
      }
      .example2 {
        background-color: #8ebf42;
        color: #666;
        all: inherit;
      }
      .example3 {
        background-color: #8ebf42;
        color: #666;
        all: initial;
      }
      .example4 {
        background-color: #8ebf42;
        color: #666;
        all: unset;
      }
    </style>
  </head>
  <body>
    <h2>All property example</h2>
    <hr />
    <p>No all property:</p>
    <div class="example1"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr />
    <p>all: inherit:</p>
    <div class="example2"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr />
    <p>all: initial:</p>
    <div class="example3"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr />
    <p>all: unset:</p>
    <div class="example4"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr /> 
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description
initial	Définit chaque propriété à sa valeur initiale telle que définie dans la spécification, en ignorant l'héritage.
inherit	Fait que chaque propriété prend la valeur calculée de l'élément parent.
unset	Se comporte comme `inherit` pour les propriétés héritables (comme `color`) et comme `initial` pour les propriétés non héritables (comme `border`).
revert	Ramène chaque propriété à la valeur qu'elle aurait dans la feuille de style de l'agent utilisateur ou de l'utilisateur, en ignorant les styles d'auteur définis précédemment.
revert-layer	Rétablit chaque propriété à la valeur définie dans la couche en cascade précédente.

`unset` vs `revert`

Ces deux valeurs sont faciles à confondre :

unset supprime la valeur de l'auteur et revient à l'héritage ou à la valeur initiale de la spécification — elle ne tient pas compte de la feuille de style par défaut du navigateur.
revert revient activement au style par défaut du navigateur. Ainsi, all: revert sur un <h2> le conserve comme un titre gras normal, tandis que all: unset le réduit à un texte quasi-en-ligne sans mise en forme.

Compatibilité des navigateurs

all est pris en charge par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Le mot-clé revert est arrivé plus tard que initial/inherit/unset, et revert-layer nécessite la prise en charge des couches en cascade, alors vérifiez la couverture si vous devez prendre en charge des versions plus anciennes de navigateurs.

Pratique

Lesquelles de ces affirmations concernant la propriété CSS all sont vraies ?

all réinitialise toutes les propriétés d'un élément sauf direction et unicode-bidi.all accepte une liste de valeurs de propriétés séparées par des virgules.all: revert ramène les propriétés au style par défaut du navigateur.all possède des sous-propriétés longues comme margin.all: unset utilise inherit pour les propriétés héritables et initial pour les autres.