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
Syntaxe
/* 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 spécifiées soient calculées comme si aucune règle du site n'avait été spécifiée pour l'élément. En ce qui concernerevert
, 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 spécifiées 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 commeunset
.
- Si la règle provient du site,
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
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
<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;
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
BCD tables only load in the browser
Voir aussi
Les mots-clés indiquant des valeurs globales pour CSS :