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 ou héritées.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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'appliqueall(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'appliqueall(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
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
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
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
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
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 37 | ? | 27 | Non | 24 | Non |
revert | Non | ? | Non | Non | Non | 9.1 |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | Non | ? | ? | 27 | Non | Non | ? |
revert | Non | ? | ? | Non | Non | 9.3 | Non |
Voir aussi
Les mots-clés indiquant des valeurs globales pour CSS :