mozilla

Revision 312109 of Cascade

  • Revision slug: CSS/Cascade
  • Revision title: Cascade
  • Revision id: 312109
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment
Tags: 

Revision Content

{{ CSSRef() }}

The cascade is a fundamental feature of CSS. It is an algorithm defining how to combine properties values originating from different sources. It lays at the core of CSS as stressed by its name: Cascading Style Sheets.

What CSS entities participate in the cascade

Only CSS declarations, that is property/value pairs, participate in the cascade. That means that at-rules containining other entities than declaration, like  {{ cssxref("@font-face")}} containing descriptors doesn't participate in the cascade. In these case, only the at-rule as the whole participate in the cascade, here the @font-face identified by its font-family descriptor. If several @font-face with the same descriptor are defined, only the most adequate @font-face, as a whole, is considered. The

If the declarations contained in most at-rules participate in the cascade, like declarations contained in {{cssxref("@media")}}, {{cssxref("@documents")}}, or {{cssxref("@supports")}}, declarations contained in {{cssxref("@keyframes")}} doesn't. Like for {{cssxref("@font-face")}}, only the at-rule as a whole is selected via the cascade algorithm.

Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't concerned by the cascade algorithm.

Origin of CSS declaration

The CSS cascade algorithm wants to select CSS declarations to set the correct value to CSS properties. CSS declarations originate from different origins:

  • The browser have a basic style sheet giving default style to any document. These style sheets are named user-agent stylesheets. Some browsers uses actual style sheets to perform this, other simulate these in the code, but both case should be indetectable. Some browsers also allow users to modify the user-agent stylesheet. If some constraints on user-agent stylesheets is set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to the other. To ease their development and lower the basic ground on which to work, Web developers often use a CSS reset style sheet, forcing common properties values to a known state.
  • The author of the Web page is defining styles for the document. These are the most common style sheet. Most of the time several of them are defined and they make the look and feel of the Web site, its theme.
  • The reader, the user of the browser, may have a custom style sheet to taylor its experience.

Though from these different origins, they still overlap in scope: the cascade algorithm define how they interact.

Cascading order

The cascading algorithm allow to find the value to apply for each pair element/property.

  1. It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector match the given element and which are part of an appropriate media at-rule.
  2. Then it sorts these rules according their importance, that is are they followed by !important or not, and by their origin. The cascade is in ascending orders, that means that !important values coming of a user-defined style sheet have precedence over normal values originated from a user-agent style sheet:
      Origin Importance
    1 user agent normal
    2 user agent !important
    3 user normal
    4 author normal
    5 CSS Animations see below
    6 author !important
    7 user !important
  3. In case of equality, that's the specificity of a value which will be considered to chose one or the other.

CSS Animations and the cascade

CSS Animations, using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS will take values from one single {{ cssxref("@keyframes")}} and will never mixed several of them.

When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.

Example

User-agent CSS:

li { margin-left: 10px }

Author CSS 1:

li { margin-left: 0 } /* This is a reset */

Author CSS 2:

@media screen {
  li { margin-left: 3px }
}

@media print {
  li { margin-left: 1px }
}

User CSS:

.specific { margin-left: 1em }

HTML:

<ul>
  <li class="specific">1<sup>st</sup></li>
  <li>2<sup>nd</sup></li>
</ul>

In this case, declaration inside li and .specific rules should apply. No declaration is marked as !important so the precedence order is author style sheets > user style sheets, user-agent stylesheet.

So 3 declarations are in competition:

margin-left: 0
margin-left: 3px
margin-left: 1px

The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:

margin-left: 3px

Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.

See also

  • The very simple introduction of cascading in the CSS Tutorial.
  • {{CSS_Key_Concepts()}}

Revision Source

<p>{{ CSSRef() }}</p>
<p>The <em>cascade</em> is a fundamental feature of CSS. It is an algorithm defining how to combine properties values originating from different sources. It lays at the core of CSS as stressed by its name: <em>Cascading</em> Style Sheets.</p>
<h2 id="What_CSS_entities_participate_in_the_cascade">What CSS entities participate in the cascade</h2>
<p>Only CSS declarations, that is property/value pairs, participate in the cascade. That means that at-rules containining other entities than declaration, like&nbsp; {{ cssxref("@font-face")}} containing <em>descriptors</em> doesn't participate in the cascade. In these case, only the at-rule as the whole participate in the cascade, here the @font-face identified by its <code>font-family</code> descriptor. If several <code>@font-face</code> with the same descriptor are defined, only the most adequate <code>@font-face</code>, as a whole, is considered. The</p>
<p>If the declarations contained in most <a href="/en-US/docs/CSS/At-rule" title="/en-US/docs/CSS/At-rule">at-rules</a> participate in the cascade, like declarations contained in {{cssxref("@media")}}, {{cssxref("@documents")}}, or {{cssxref("@supports")}}, declarations contained in {{cssxref("@keyframes")}} doesn't. Like for {{cssxref("@font-face")}}, only the at-rule as a whole is selected via the cascade algorithm.</p>
<p>Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't concerned by the cascade algorithm.</p>
<h2 id="Origin_of_CSS_declaration">Origin of CSS declaration</h2>
<p>The CSS cascade algorithm wants to select CSS declarations to set the correct value to CSS properties. CSS declarations originate from different origins:</p>
<ul>
  <li>The browser have a basic style sheet giving default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers uses actual style sheets to perform this, other simulate these in the code, but both case should be indetectable. Some browsers also allow users to modify the user-agent stylesheet. If some constraints on user-agent stylesheets is set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to the other. To ease their development and lower the basic ground on which to work, Web developers often use a CSS reset style sheet, forcing common properties values to a known state.</li>
  <li>The author of the Web page is defining styles for the document. These are the most common style sheet. Most of the time several of them are defined and they make the look and feel of the Web site, its theme.</li>
  <li>The <em>reader</em>, the user of the browser, may have a custom style sheet to taylor its experience.</li>
</ul>
<p>Though from these different origins, they still overlap in scope: the cascade algorithm define how they interact.</p>
<h2 id="Cascading_order">Cascading order</h2>
<p>The cascading algorithm allow to find the value to apply for each pair element/property.</p>
<ol>
  <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector match the given element and which are part of an appropriate media at-rule.</li>
  <li>Then it sorts these rules according their importance, that is are they followed by <code>!important</code> or not, and by their origin. The cascade is in ascending orders, that means that <code>!important</code> values coming of a user-defined style sheet have precedence over normal values originated from a user-agent style sheet:<br />
    <table class="standard-table">
      <thead>
        <tr>
          <th scope="col">&nbsp;</th>
          <th scope="col">Origin</th>
          <th scope="col">Importance</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>user agent</td>
          <td>normal</td>
        </tr>
        <tr>
          <td>2</td>
          <td>user agent</td>
          <td><code>!important</code></td>
        </tr>
        <tr>
          <td>3</td>
          <td>user</td>
          <td>normal</td>
        </tr>
        <tr>
          <td>4</td>
          <td>author</td>
          <td>normal</td>
        </tr>
        <tr>
          <td>5</td>
          <td>CSS Animations</td>
          <td><em>see below</em></td>
        </tr>
        <tr>
          <td>6</td>
          <td>author</td>
          <td><code>!important</code></td>
        </tr>
        <tr>
          <td>7</td>
          <td>user</td>
          <td><code>!important</code></td>
        </tr>
      </tbody>
    </table>
  </li>
  <li>In case of equality, that's the <a href="/en-US/docs/CSS/Specificity" title="/en-US/docs/CSS/Specificity">specificity</a> of a value which will be considered to chose one or the other.</li>
</ol>
<h2 id="CSS_Animations_and_the_cascade">CSS Animations and the cascade</h2>
<p><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">CSS Animations</a>, using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS will take values from one single {{ cssxref("@keyframes")}} and will never mixed several of them.</p>
<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p>
<h2 id="Example">Example</h2>
<p><strong>User-agent CSS:</strong></p>
<pre class="brush:css;">
li { margin-left: 10px }</pre>
<p><strong class="brush:css;">Author CSS 1:</strong></p>
<pre class="brush:css;">
li { margin-left: 0 } /* This is a reset */</pre>
<p><strong class="brush:css;">Author CSS 2:</strong></p>
<pre class="brush:css;">
@media screen {
  li { margin-left: 3px }
}

@media print {
  li { margin-left: 1px }
}
</pre>
<p><strong class="brush:css;">User CSS:</strong></p>
<pre class="brush:css;">
.specific { margin-left: 1em }</pre>
<p><strong>HTML:</strong></p>
<pre class="brush:html;">
&lt;ul&gt;
  &lt;li class="specific"&gt;1&lt;sup&gt;st&lt;/sup&gt;&lt;/li&gt;
  &lt;li&gt;2&lt;sup&gt;nd&lt;/sup&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>In this case, declaration inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code> so the precedence order is author style sheets &gt; user style sheets, user-agent stylesheet.</p>
<p>So 3 declarations are in competition:</p>
<pre class="brush:css;">
margin-left: 0</pre>
<pre class="brush:css;">
margin-left: 3px</pre>
<pre class="brush:css;">
margin-left: 1px</pre>
<p>The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:</p>
<pre class="brush:css;">
margin-left: 3px</pre>
<p>Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>The very simple <a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/">introduction</a> of cascading in the CSS Tutorial.</li>
  <li>{{CSS_Key_Concepts()}}</li>
</ul>
Revert to this revision