all

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 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 :

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 initialeIl n'y a pas de valeur initiale pour cela.
Applicabilitétous les éléments
Héritéenon
Valeur calculéecomme la valeur spécifiée s'applique sur chaque propriété englobée par le raccourci
Type d'animationcomme 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

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

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

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

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

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

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.

Spécifications

Specification
CSS Cascading and Inheritance Level 4
# all-shorthand

Compatibilité des navigateurs

Voir aussi

Les mots-clés indiquant des valeurs globales pour CSS :