mozilla

Revision 532011 of all

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

Revision Content

{{CSSRef("CSS Box")}}

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 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 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 to their parent value if they are inheritable or to their initail 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

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  and  its properties reinitialised to their initial values or their inherited one.

all:initial

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

all:inherit

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

 

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 {{CompatNo}} {{ 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>
<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 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 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 to their parent value if they are inheritable or to their initail value if not. {{cssxref("unicode-bidi")}} and {{cssxref("direction")}} values are not affected.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html">
&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">
html { font-size: small; background-color: #F0F0F0; color: blue; }
blockquote { background-color: skyblue; color: red;}
</pre>
<h3 id="Results">Results</h3>
<div id="ex0" style="display:inline-block">
 <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>
 <p>{{EmbedLiveSample("ex0", "200", "125")}}</p>
 <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">
 <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>
 <p>{{EmbedLiveSample("ex1", "200", "125")}}</p>
 <p>The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is an <em>inline</em> element now&nbsp; and&nbsp; its properties reinitialised to their initial values or their inherited one.</p>
</div>
<div id="ex2" style="display:inline-block">
 <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>
 <p>{{EmbedLiveSample("ex2", "200", "125")}}</p>
</div>
<div id="ex3" style="display:inline-block">
 <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>
 <p>{{EmbedLiveSample("ex3", "200", "125")}}</p>
</div>
<p>&nbsp;</p>
<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;">{{CompatNo}}</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