all

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨janvier 2020⁩.

La propriété raccourcie CSS all permet de réinitialiser toutes les propriétés d'un élément, à l'exception de unicode-bidi, direction, et des propriétés personnalisées, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre couche de la cascade voire d'une autre feuille de style.

Exemple interactif

/*no all property*/

all: initial;

all: inherit;

all: unset;

all: revert;

<section id="default-example">
  <div class="example-container-bg">
    <div class="example-container">
      <p id="example-element">
        This paragraph has a font size of 1.5rem and a color of gold. It also
        has 1rem of vertical margin set by the user-agent. The parent of the
        paragraph is a &lt;div&gt; with a dashed blue border.
      </p>
    </div>
  </div>
</section>

#example-element {
  color: gold;
  padding: 10px;
  font-size: 1.5rem;
  text-align: left;
  width: 100%;
}

.example-container {
  border: 2px dashed #2d5ae1;
}

.example-container-bg {
  background-color: #77767b;
  padding: 20px;
}

Syntaxe

css

/* Valeurs globales */
all: initial;
all: inherit;
all: unset;
all: revert;
all: revert-layer;

La propriété all est définie avec un des mots-clés globaux de CSS. On notera que la valeur de cette propriété n'a pas d'impact sur les propriétés unicode-bidi, direction, et les propriétés personnalisées.

Valeurs

initial

Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique all devront prendre leurs valeurs initiales.

inherit

Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique all devront prendre les valeurs héritées.

unset

Ce mot-clé indique que toutes les propriétés qui s'appliquent à l'élément prendront leur valeur héritée si elles héritent par défaut, ou leur valeur initiale sinon.

revert

Le comportement obtenu sera différent selon l'origine de la règle :

Si la règle provient du site, revert remonte la cascade au niveau de la feuille de style de l'utilisatrice ou de l'utilisateur afin que les valeurs définies soient calculées comme si aucune règle du site n'avait été définie pour l'élément. En ce qui concerne revert, cette origine (le site) inclut également les origines de surcharge (override) et d'animation.
Si la règle provient d'une feuille de style de l'utilisatrice ou de l'utilisateur, revert remonte la cascade au niveau de l'agent utilisateur afin que les valeurs définies soient calculées comme si aucune règle utilisateur ou du site n'avait été spécifiée pour l'élément.
Si la règle provient de l'agent utilisateur, revert agira comme unset.

revert-layer

Indique que toutes les propriétés de l'élément devraient revenir à une couche de cascade précédente existante. S'il n'existe pas de telle couche, les propriétés de l'élément reviendront à la règle correspondante existante de la couche courante ou d'une origine précédente.

Définition formelle

Valeur initiale	Il n'y a pas de valeur initiale pour cela.
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	comme la valeur spécifiée s'applique sur chaque propriété englobée par le raccourci
Type d'animation	comme pour chaque propriété de la propriété raccourcie (toutes les propriétés sauf `unicode-bidi` et `direction`)

Syntaxe formelle

all = 
  initial       |
  inherit       |
  unset         |
  revert        |
  revert-layer

Exemples

Dans cet exemple, le fichier CSS contient une mise en forme pour l'élément <blockquote> et pour l'élément parent <body>. Les différents résultats présentés dans la section éponyme illustrent les effets des différentes valeurs de la propriété all lorsqu'elle est appliquée dans la règle blockquote.

HTML

html

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

CSS

css

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
  margin: 0;
  padding: 0;
}

blockquote {
  background-color: skyblue;
  color: red;
}

Résultat

Pas de propriété `all`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}

Dans ce scénario, aucune propriété all n'est appliquée dans la règle blockquote. L'élément <blockquote> utilise la mise en forme par défaut du navigateur, qui lui fournit une marge, ainsi que des couleurs d'arrière-plan et de texte indiquées par la feuille de style. Il se comporte comme un élément de bloc : le texte qui suit l'élément est placé en dessous.

`all: initial`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: initial;
}

Lorsque la propriété all vaut initial au sein de la règle blockquote, l'élément <blockquote> n'utilise plus la mise en forme par défaut du navigateur : il s'agit maintenant d'un élément en ligne (la valeur initiale de display), background-color vaut transparent (sa valeur initiale), font-size vaut medium, et color vaut black (là encore, sa valeur initiale).

`all: inherit`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: inherit;
}

Dans ce cas, l'élément <blockquote> n'utilise pas la mise en forme par défaut du navigateur mais hérite des valeurs de l'élément parent, <body>. L'élément <blockquote> est désormais un élément de bloc (il hérite de cette caractéristique via la valeur de display pour <body>), background-color vaut #F0F0F0 (héritée), font-size vaut small (héritée), et color vaut blue (héritée).

`all: unset`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: unset;
}

Lorsque la valeur unset est appliquée à la propriété all dans la règle blockquote, l'élément <blockquote> n'utilise pas la mise en forme par défaut du navigateur. Comme background-color n'est pas une propriété héritée, contrairement à font-size et color qui sont héritées, l'élément <blockquote> est un élément en ligne (la valeur initiale de display), background-color vaut transparent (sa valeur initiale), mais font-size vaut toujours small (sa valeur héritée), et color vaut blue (sa valeur héritée).

`all: revert`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert;
}

Lorsque la propriété all utilise la valeur revert dans la règle blockquote, cette règle est considérée comme absente et les valeurs pour la mise en forme sont héritées de celles appliquées à l'élément parent, <body>. Aussi, <blockquote> devient un élément de bloc, background-color vaut #F0F0F0, font-size vaut small, et color vaut blue : toutes ces valeurs sont héritées de la règle pour body.

`all: revert-layer`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert-layer;
}

Ici, on n'a pas de couche de cascade définie dans le fichier CSS et l'élément <blockquote> hérite donc de la mise en forme de la règle body qui s'applique à l'élément parent. <blockquote> est donc un élément de bloc, background-color vaut #F0F0F0, font-size vaut small, et color vaut blue. Dans ce scénario, on est dans le cas où all: revert-layer mène au même comportement que all: revert.