initial

  • Revision slug: CSS/initial
  • Revision title: initial
  • Revision id: 384459
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment anchor

Revision Content

{{CSSRef}}

Summary

The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property.

Examples

 /* give headers a green border */
 h2 { border: medium solid green }

 /* but make those in the sidebar use the value of the "color" property */
 #sidebar h2 {border-color: initial; }
 <p style="color:red"> 
    this text is red 
       <em style="color:initial"> 
          this text is in the initial color (e.g. black)
       </em>
    this is red again
 </p> 

Specifications

Specification Status Comment
CSS Values and Units Level 3 {{Spec2('CSS3 Values')}} Defines the keyword
CSS Cascade And Inheritance Level 3 {{Spec2('CSS3 Cascade')}} Defines what an initial value is

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{CompatGeckoDesktop("3.5")}}{{property_prefix("-moz")}}[*]
{{CompatGeckoDesktop("19.0")}}
{{CompatNo}} {{CompatNo}} 1.2(125)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{CompatGeckoMobile("3.0")}}{{property_prefix("-moz")}}[*]
{{CompatGeckoMobile("169.0")}}
{{CompatNo}} {{CompatNo}} {{CompatVersionUnknown}}

[*] From Firefox 1.0, increasing support for -moz-initial has been added in each version, culminating with its support for {{cssxref("quotes")}} since Firefox 3.5 (Gecko 1.9.1). The last bit was its support for the non-standard {{cssxref("-moz-border-top-colors","-moz-border-*-colors")}} in Firefox 3.6 (Gecko 1.9.2).

See also

Revision Source

<div>
  {{CSSRef}}</div>
<h2 id="Summary">Summary</h2>
<p>The <code>initial</code> CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the <a href="/en-US/docs/CSS/initial_value" title="CSS/initial_value">initial value</a> of the property.</p>
<h2 id="Examples">Examples</h2>
<pre class="brush: css">
 /* give headers a green border */
 h2 { border: medium solid green }

 /* but make those in the sidebar use the value of the "color" property */
 #sidebar h2 {border-color: initial; }
</pre>
<pre class="brush: css">
 &lt;p style="color:red"&gt; 
    this text is red 
       &lt;em style="color:initial"&gt; 
          this text is in the initial color (e.g. black)
       &lt;/em&gt;
    this is red again
 &lt;/p&gt;&nbsp;</pre>
<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><a class="external" href="http://www.w3.org/TR/css3-values/#keywords" title="http://www.w3.org/TR/css3-values/#keywords">CSS Values and Units Level 3</a></td>
      <td>{{Spec2('CSS3 Values')}}</td>
      <td>Defines the keyword</td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/css3-cascade/#initial0" title="http://www.w3.org/TR/css3-cascade/#initial0">CSS Cascade And Inheritance Level 3</a></td>
      <td>{{Spec2('CSS3 Cascade')}}</td>
      <td>Defines what an initial value is</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility"><nobr>Browser compatibility</nobr></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 (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop("3.5")}}{{property_prefix("-moz")}}[*]<br />
          {{CompatGeckoDesktop("19.0")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>1.2(125)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <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>1.0</td>
        <td>{{CompatGeckoMobile("3.0")}}{{property_prefix("-moz")}}[*]<br />
          {{CompatGeckoMobile("169.0")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<p><nobr></nobr>[*] From Firefox 1.0, increasing support for <code>-moz-initial</code> has been added in each version, culminating with its support for {{cssxref("quotes")}} since Firefox 3.5 (Gecko 1.9.1). The last bit was its support for the non-standard {{cssxref("-moz-border-top-colors","-moz-border-*-colors")}} in Firefox 3.6 (Gecko 1.9.2).</p>



<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/CSS/initial_value" title="CSS/initial value">Initial value</a>, {{cssxref("inherit")}}</li>
</ul>
Revert to this revision