1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
---
title: all
slug: Web/CSS/all
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/all
---
<div>{{CSSRef}}</div>
<p>La <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> <code><strong>all</strong></code> permet de réinitialiser toutes les propriétés, à l'exception de {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre feuille de style.</p>
<div>{{EmbedInteractiveExample("pages/css/all.html")}}</div>
<p class="hidden">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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* Valeurs globales */
all: initial;
all: inherit;
all: unset;
/* Héritage et cascade CSS : Niveau 4 */
all: revert;
</pre>
<p>La propriété <code>all</code> 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 {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}.</p>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>initial</code></dt>
<dd>Voir {{cssxref("initial")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique <code>all</code> (ou qu'il hérite de cette valeur via un élément parent) devront prendre leurs valeurs initiales.</dd>
<dt><code>inherit</code></dt>
<dd>Voir {{cssxref("inherit")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique <code>all</code> (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).</dd>
<dt><code>unset</code></dt>
<dd>Voir {{cssxref("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.</dd>
<dt><code>revert</code></dt>
<dd>Voir {{cssxref("revert")}}. Si la valeur obtenue dans la cascade est le mot-clé <code>revert</code>, le comportement obtenu sera différent selon l'origine de la déclaration :
<dl>
<dt>La déclaration provient de l'agent utilisateur :</dt>
<dd>Synonyme de <code>unset</code>.</dd>
<dt>La déclaration provient de l'utilisateur :</dt>
<dd>Le moteur remonte <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage">la cascade</a> 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.</dd>
<dt>La déclaration provient de l'auteur (du document)</dt>
<dd>Le moteur remonte <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage">la cascade</a> 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 <a href="https://www.w3.org/TR/css-cascade-4/#origin">les origines des surcharges DOM et des animations</a>.</dd>
</dl>
</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><blockquote id="quote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">body {
font-size: small;
background-color: #F0F0F0;
color: blue;
}
blockquote {
background-color: skyblue;
color: red;
}
</pre>
<h3 id="Résultat">Résultat</h3>
<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;">
<h4 id="Pas_de_propriété_all">Pas de propriété <code>all</code></h4>
<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre>
<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
blockquote { background-color: skyblue; color: red; }</pre>
{{EmbedLiveSample("ex0", "200", "125")}}
<p>L'élément {{HTMLElement("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.</p>
</div>
<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;">
<h4 id="allunset"><code>all:unset</code></h4>
<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre>
<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
blockquote { background-color: skyblue; color: red; }
blockquote { all: unset; }</pre>
{{EmbedLiveSample("ex1", "200", "125")}}
<p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du naivgateur, c'est un élément en ligne (<em>inline</em>) (sa valeur initiale), la valeur de {{cssxref("background-color")}} est <code>transparent</code> (la valeur initiale), mais {{cssxref("font-size")}} vaut toujours <code>small</code> (valeur héritée) et {{cssxref("color")}} vaut (valeur héritée).</p>
</div>
<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;">
<h4 id="allinitial"><code>all:initial</code></h4>
<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre>
<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
blockquote { background-color: skyblue; color: red; }
blockquote { all: initial; }</pre>
{{EmbedLiveSample("ex2", "200", "125")}}
<p>L'élément {{HTMLElement("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é {{cssxref("background-color")}} vaut <code>transparent</code> (sa valeur initiale), {{cssxref("font-size")}} vaut <code>normal</code> (valeur initiale) et {{cssxref("color")}} vaut <code>black</code> (sa valeur initiale).</p>
</div>
<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;">
<h4 id="allinherit"><code>all:inherit</code></h4>
<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre>
<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
blockquote { background-color: skyblue; color: red; }
blockquote { all: inherit; }</pre>
{{EmbedLiveSample("ex3", "200", "125")}}
<p>L'élément {{HTMLElement("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 {{HTMLElement("div")}}), {{cssxref("background-color")}} vaut <code>#F0F0F0</code> (valeur héritée), {{cssxref("font-size")}} vaut <code>small</code> (valeur héritée) et {{cssxref("color")}} vaut <code>blue</code> (valeur héritée).</p>
</div>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Cascade', '#all-shorthand', 'all')}}</td>
<td>{{Spec2('CSS4 Cascade')}}</td>
<td>Ajout de la valeur <code>revert</code>.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Cascade', '#all-shorthand', 'all')}}</td>
<td>{{Spec2('CSS3 Cascade')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.all")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<p>Les mots-clés indiquant des valeurs globales pour CSS :</p>
<ul>
<li>{{cssxref("initial")}},</li>
<li>{{cssxref("inherit")}},</li>
<li>{{cssxref("unset")}},</li>
<li>{{cssxref("revert")}}.</li>
</ul>
|
