initial

  • Revision slug: Web/CSS/initial
  • Revision title: initial
  • Revision id: 512889
  • Created:
  • Creator: teoli
  • Is current revision? Yes
  • Comment

Revision Content

{{CSSRef}}

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.

On inherited properties, the initial value may be surprising and you should consider using the {{cssxref("inherit")}} or {{cssxref("unset")}} keywords instead.

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
{{ SpecName('CSS3 Cascade', '#initial', 'initial') }} {{Spec2('CSS3 Cascade')}} Defines what an initial value is.
{{ SpecName('CSS3 Values', "#common-keywords", "initial") }} {{Spec2('CSS3 Values')}} Defines the keyword.

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}} 15.0 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). Support for the prefixed -moz-initial keyword has been removed from Firefox 24 in favor of the unprefixed initial keyword.

See also

Revision Source

<div>
 {{CSSRef}}</div>
<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/Web/CSS/initial_value">initial value</a> of the property.</p>
<div class="note">
 <p>On inherited properties, the initial value may be surprising and you should consider using the {{cssxref("inherit")}} or {{cssxref("unset")}} keywords instead.</p>
</div>
<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>{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}</td>
   <td>{{Spec2('CSS3 Cascade')}}</td>
   <td>Defines what an initial value is.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Values', "#common-keywords", "initial") }}</td>
   <td>{{Spec2('CSS3 Values')}}</td>
   <td>Defines the keyword.</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility"><nobr>Browser compatibility</nobr></h2>
<div>
 {{CompatibilityTable}}</div>
<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>15.0</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>[*] 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). Support for the prefixed <code>-moz-initial</code> keyword has been removed from <a href="/en-US/docs/Site_Compatibility_for_Firefox_24">Firefox 24</a> in favor of the unprefixed <code>initial</code> keyword.</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
 <li><a href="/en-US/docs/Web/CSS/initial_value">initial value</a>, {{cssxref("inherit")}}</li>
</ul>
Revert to this revision