mozilla

Revision 658967 of all

  • Revision slug: Web/CSS/all
  • Revision title: all
  • Revision id: 658967
  • Created:
  • Creator: SanderSpies
  • Is current revision? No
  • Comment

Revision Content

{{CSSRef("CSS Box")}}

Summary

The CSS all shorthand property resets all properties, but {{cssxref("unicode-bidi")}} and {{cssxref("direction")}} to their initial or inherited value.

{{cssbox("all")}}

Syntax

Formal syntax: {{csssyntax("all")}}
all: initial
all: inherit
all: unset

Values

initial
This keyword indicates to change all the properties applying to the element or the element's parent to their initial value. {{cssxref("unicode-bidi")}} and {{cssxref("direction")}} values are not affected.
inherit
This keyword indicates to change all the properties applying to the element or the element's parent to their parent value. {{cssxref("unicode-bidi")}} and {{cssxref("direction")}} values are not affected.
unset
This keyword indicates to change all the properties applying to the element or the element's parent to their parent value if they are inheritable or to their initial value if not. {{cssxref("unicode-bidi")}} and {{cssxref("direction")}} values are not affected.

Examples

HTML

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

CSS

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

blockquote {
  background-color: skyblue;
  color: red;
}

Results in:

No all property

{{EmbedLiveSample("ex0", "200", "125")}}

The {{HTMLElement("blockquote")}} uses the browsers default styling together with a specific background and text color. It also behaves as a block element: the text that follows it is beneath it.

all:unset

{{EmbedLiveSample("ex1", "200", "125")}}

The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is an inline element now (initial value), its {{cssxref("background-color")}} is transparent (initial value), but its {{cssxref("font-size")}} is still small (inherited value) and its {{cssxref("color")}} is blue (inherited value).

all:initial

{{EmbedLiveSample("ex2", "200", "125")}}

The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is an inline element now (initial value), its {{cssxref("background-color")}} is transparent (initial value), its {{cssxref("font-size")}} is  normal (initial value) and its {{cssxref("color")}} is black (initial value).

all:inherit

{{EmbedLiveSample("ex3", "200", "125")}}

The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is a block element now (inherited value from its containing {{HTMLElement("div")}}), its {{cssxref("background-color")}} is transparent (inherited value), its {{cssxref("font-size")}} is small (inherited value) and its {{cssxref("color")}} is blue (inherited value).

Specifications

Specification Status Comment
{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }} {{ Spec2('CSS3 Cascade') }} Initial definition

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatChrome("37")}} (unset value is not supported) {{ CompatGeckoDesktop("27") }} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatNo}} {{CompatGeckoMobile("27")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

See also

The CSS-wide property values {{cssxref("initial")}}, {{cssxref("inherit")}} and {{cssxref("unset")}}.

Revision Source

<p>{{CSSRef("CSS Box")}}</p>
<h2 id="Summary">Summary</h2>
<p>The CSS <code>all</code> shorthand property resets all properties, but {{cssxref("unicode-bidi")}} and {{cssxref("direction")}} to their initial or inherited value.</p>
<p>{{cssbox("all")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("all")}}</pre>
<pre>
all: initial
all: inherit
all: unset
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
 <dt>
  <code>initial</code></dt>
 <dd>
  This keyword indicates to change all the properties applying to the element or the element's parent to their initial value. {{cssxref("unicode-bidi")}} and {{cssxref("direction")}} values are not affected.</dd>
 <dt>
  <code>inherit</code></dt>
 <dd>
  This keyword indicates to change all the properties applying to the element or the element's parent to their parent value. {{cssxref("unicode-bidi")}} and {{cssxref("direction")}} values are not affected.</dd>
 <dt>
  <code>unset</code></dt>
 <dd>
  This keyword indicates to change all the properties applying to the element or the element's parent to their parent value if they are inheritable or to their initial value if not. {{cssxref("unicode-bidi")}} and {{cssxref("direction")}} values are not affected.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p id="HTML"><strong>HTML</strong></p>
<pre class="brush: html">
&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
<p id="CSS"><strong>CSS</strong></p>
<pre class="brush: css">
html {
  font-size: small;
  background-color: #F0F0F0;
  color: blue;
}

blockquote {
  background-color: skyblue;
  color: red;
}
</pre>
<p id="Results">Results in:</p>
<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" style="display:none">
&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
 <pre class="brush: css" style="display:none">
html { font-size: small; background-color: <span class="st">#F0F0F0</span>; color:blue; }
blockquote { background-color: skyblue;  color: red; }</pre>
 {{EmbedLiveSample("ex0", "200", "125")}}
 <p>The {{HTMLElement("blockquote")}} uses the browsers 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="all.3Aunset"><code>all:unset</code></h4>
 <pre class="brush: html" style="display:none">
&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
 <pre class="brush: css" style="display:none">
html { font-size: small; background-color: <span class="st">#F0F0F0</span>; 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="all.3Ainitial"><code>all:initial</code></h4>
 <pre class="brush: html" style="display:none">
&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
 <pre class="brush: css" style="display:none">
html { font-size: small; background-color: <span class="st">#F0F0F0</span>; 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&nbsp; <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="all.3Ainherit"><code>all:inherit</code></h4>
 <pre class="brush: html" style="display:none">
&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
 <pre class="brush: css" style="display:none">
html { font-size: small; background-color: <span class="st">#F0F0F0</span>; 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("div")}}), its {{cssxref("background-color")}} is <code>transparent</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('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>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td style="vertical-align: top;">{{CompatChrome("37")}} (unset value is not supported)</td>
    <td>{{ CompatGeckoDesktop("27") }}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
  </tbody>
 </table>
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatGeckoMobile("27")}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also">See also</h2>
<p>The CSS-wide property values {{cssxref("initial")}}, {{cssxref("inherit")}} and {{cssxref("unset")}}.</p>
Revert to this revision