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
|
---
title: all
slug: Web/CSS/all
translation_of: Web/CSS/all
---
<div>{{CSSRef}}</div>
<p>The <code><strong>all</strong></code> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand property</a> sets all of an element's properties (other than {{cssxref("unicode-bidi")}} and {{cssxref("direction")}}) to their initial or inherited values, or to the values specified in another stylesheet origin..</p>
<pre class="brush:css no-line-numbers">/* Global values */
all: initial;
all: inherit;
all: unset;
/* CSS Cascading and Inheritance Level 4 */
all: revert;
</pre>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<p>The <code>all</code> property is specified as one of the CSS global keyword values. Note that none of these values affect the {{cssxref("unicode-bidi")}} and {{cssxref("direction")}} properties.</p>
<h3 id="Values">Values</h3>
<dl>
<dt>{{cssxref("initial")}}</dt>
<dd>Specifies that all the element's properties should be changed to their <a href="/en-US/docs/Web/CSS/initial_value">initial values</a>.</dd>
<dt>{{cssxref("inherit")}}</dt>
<dd>Specifies that all the element's properties should be changed to their <a href="/en-US/docs/Web/CSS/inheritance">inherited values</a>.</dd>
<dt>{{cssxref("unset")}}</dt>
<dd>Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not.</dd>
<dt>{{cssxref("revert")}}</dt>
<dd>Specifies behavior that depends on the stylesheet origin to which the declaration belongs:
<dl>
<dt><a href="/en-US/docs/Web/CSS/Cascade#User-agent_stylesheets">User-agent origin</a></dt>
<dd>Equivalent to <code>unset</code>.</dd>
<dt><a href="/en-US/docs/Web/CSS/Cascade#User_stylesheets">User origin</a></dt>
<dd>Rolls back the <a href="/en-US/docs/Web/CSS/Cascade">cascade</a> to the user-agent level, so that the <a href="/en-US/docs/Web/CSS/specified_value">specified values</a> are calculated as if no author-level or user-level rules were specified for the element.</dd>
<dt><a href="/en-US/docs/Web/CSS/Cascade#Author_stylesheets">Author origin</a></dt>
<dd>Rolls back the <a href="/en-US/docs/Web/CSS/Cascade">cascade</a> to the user level, so that the <a href="/en-US/docs/Web/CSS/specified_value">specified values</a> are calculated as if no author-level rules were specified for the element. For purposes of <code>revert</code>, the Author origin includes the Override and Animation origins.</dd>
</dl>
</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="Examples">Examples</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="Result">Result</h3>
<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;">
<h4 id="No_all_property">No <code>all</code> property</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>The {{HTMLElement("blockquote")}} uses the browser's default styling together with a specific background and text color. It also behaves as a <em>block</em> element: the text that follows it is beneath it.</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>The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is an <em>inline</em> element now (initial value), its {{cssxref("background-color")}} is <code>transparent</code> (initial value), but its {{cssxref("font-size")}} is still <code>small</code> (inherited value) and its {{cssxref("color")}} is <code>blue</code> (inherited value).</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>The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is an <em>inline</em> element now (initial value), its {{cssxref("background-color")}} is <code>transparent</code> (initial value), its {{cssxref("font-size")}} is <code>normal</code> (initial value) and its {{cssxref("color")}} is <code>black</code> (initial value).</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>The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is a <em>block</em> element now (inherited value from its containing {{HTMLElement("body")}} element), its {{cssxref("background-color")}} is <code>#F0F0F0</code> (inherited value), its {{cssxref("font-size")}} is <code>small</code> (inherited value) and its {{cssxref("color")}} is <code>blue</code> (inherited value).</p>
</div>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}</td>
<td>{{ Spec2('CSS4 Cascade') }}</td>
<td>Added the <code>revert</code> value.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}</td>
<td>{{ Spec2('CSS3 Cascade') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.all")}}</p>
<h2 id="See_also">See also</h2>
<p>CSS global keyword values: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}</p>
|
