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">
        Ce paragraphe a une taille de police de 1.5rem et une couleur or. Il a
        aussi une marge verticale de 1rem définie par l'agent utilisateur. Le
        parent du paragraphe est un &lt;div&gt; avec une bordure bleue en
        pointillés.
      </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;
}

Propriétés constitutives

Cette propriété est une propriété raccourcie pour toutes les propriétés CSS à l'exception de unicode-bidi, direction et des propriétés personnalisées.

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

Définit que toutes les propriétés qui sont définies pour l'élément auquel s'applique all devront prendre leurs valeurs initiales.

inherit

Définit 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

Définit 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

Définit 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

Définit 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  |
  revert-rule

Exemples

Dans cet exemple, le fichier CSS contient une mise en forme pour l'élément HTML <blockquote> ainsi que pour l'élément parent <body>. Les différents résultats dans la sous-section Résultat montrent comment la mise en forme de l'élément <blockquote> est affectée lorsque différentes valeurs sont appliquées à la propriété all 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 HTML <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 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 dans la règle blockquote, l'élément HTML <blockquote> n'utilise plus la mise en forme par défaut du navigateur : il s'agit maintenant d'un élément en ligne (valeur initiale), sa propriété background-color vaut transparent (valeur initiale), sa propriété font-size vaut medium, et sa propriété color vaut black (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 HTML <blockquote> n'utilise pas la mise en forme par défaut du navigateur. Il hérite à la place des valeurs de style de son parent <body> : il s'agit maintenant d'un élément bloc (valeur héritée), sa propriété background-color vaut #F0F0F0 (valeur héritée), sa propriété font-size vaut small (valeur héritée), et sa propriété color vaut blue (valeur 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 HTML <blockquote> n'utilise pas la mise en forme par défaut du navigateur. Comme la propriété background-color n'est pas héritée, tandis que font-size et color le sont, l'élément <blockquote> est maintenant un élément en ligne (valeur initiale), sa propriété background-color vaut transparent (valeur initiale), mais sa propriété font-size vaut toujours small (valeur héritée), et sa propriété color vaut blue (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 est définie à revert dans la règle blockquote, la règle blockquote est considérée comme inexistante et les valeurs des propriétés de mise en forme sont héritées de celles appliquées à l'élément parent <body>. Ainsi, l'élément <blockquote> est mis en forme comme un élément bloc, avec 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;
}

Il n'y a pas de couche de cascade définie dans le fichier CSS, donc l'élément <blockquote> hérite de la règle body correspondante pour sa mise en forme. L'élément <blockquote> est ici mis en forme comme un élément bloc, avec 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. Ce scénario illustre le cas où all défini à revert-layer se comporte comme si all était défini à revert.