all

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

Syntaxe

/* Valeurs globales */
all: initial;
all: inherit;
all: unset;

/* Héritage et cascade CSS : Niveau 4 */
all: revert;

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 et direction.

Valeurs

initial

Voir initial. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique all (ou qu'il hérite de cette valeur via un élément parent) devront prendre leurs valeurs initiales.

inherit

Voir inherit. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique all (ou qu'il hérite de cette valeur via un élément parent) devront prendre les valeurs héritées (c'est-à-dire celles définies pour le parent de l'élément).

unset

Voir unset. Ce mot-clé indique que toutes les propriétés qui s'appliquent à l'élément ou à son parent prendront la valeur déclarée pour le parent si elles peuvent être héritées ou la valeur initiale sinon.

revert

Voir revert. Si la valeur obtenue dans la cascade est le mot-clé revert, le comportement obtenu sera différent selon l'origine de la déclaration :

La déclaration provient de l'agent utilisateur :: Synonyme de unset.
La déclaration provient de l'utilisateur :: Le moteur remonte la cascade au niveau de l'agent utilisateur afin de calculer la valeur comme si aucune règle n'était appliquée par le document ou par l'utilisateur.
La déclaration provient de l'auteur (du document): Le moteur remonte la cascade au niveau de l'utilisateur afin de calculer la valeur comme si aucune règle ne provenait du document pour cette propriété.Cette origine inclue les origines des surcharges DOM et des animations.

Syntaxe formelle

initial | inherit | unset | revert

Exemples

HTML

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

CSS

body {
  font-size: small;
  background-color: #F0F0F0;
  color: blue;
}

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; }

L'élément <blockquote> utilise la mise en forme par défaut du navigateur avec un arrière-plan spécifique et une couleur pour le texte. L'élément se comporte comme un élément de bloc : le texte qui suit est placé en dessous.

`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; }
blockquote { all: unset; }

L'élément <blockquote> n'utilise pas la mise en forme par défaut du naivgateur, c'est un élément en ligne (inline) (sa valeur initiale), la valeur de background-color est transparent (la valeur initiale), mais font-size vaut toujours small (valeur héritée) et color vaut (valeur héritée).

`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; }
blockquote { all: initial; }

L'élément <blockquote> n'utilise pas la mise en forme par défaut du navigateur, c'est un élément en ligne (sa valeur initiale). La propriété background-color vaut transparent (sa valeur initiale), font-size vaut normal (valeur initiale) et color vaut black (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; }
blockquote { all: inherit; }

L'élément <blockquote> n'utilise pas la mise en forme par défaut du navigateur, c'est un élément de bloc (valeur héritée depuis l'élément englobant <div>), background-color vaut #F0F0F0 (valeur héritée), font-size vaut small (valeur héritée) et color vaut blue (valeur héritée).

Spécifications

Spécification	État	Commentaires
CSS Cascading and Inheritance Level 4 La définition de 'all' dans cette spécification.	Candidat au statut de recommandation	Ajout de la valeur `revert`.
CSS Cascading and Inheritance Level 3 La définition de 'all' dans cette spécification.	Candidat au statut de recommandation	Définition initiale.

Valeur initiale	Il n'y a pas de valeur initiale pour cela.
Applicabilité	tous les éléments
Héritée	non
Média	Il n'y a pas de média pour cela.
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`)
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`all`	Chrome Support complet 37	Edge Aucun support Non	Firefox Support complet 27	IE Aucun support Non	Opera Support complet 24	Safari Support complet 9.1	WebView Android Support complet 37	Chrome Android Support complet 37	Firefox Android Support complet 27	Opera Android Support complet 24	Safari iOS Support complet 9.3	Samsung Internet Android Support complet 3.0
`revert`	Chrome Aucun support Non	Edge Aucun support Non	Firefox Aucun support Non	IE Aucun support Non	Opera Aucun support Non	Safari Support complet 9.1	WebView Android Aucun support Non	Chrome Android Aucun support Non	Firefox Android Aucun support Non	Opera Android Aucun support Non	Safari iOS Support complet 9.3	Samsung Internet Android Aucun support Non

Légende

Support complet: Support complet
Aucun support: Aucun support

Voir aussi

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