CSS カスケード入門

カスケードは、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。これはカスケーディングスタイルシートという名前で強調されているように、 CSS の中心を占めるものです。この記事では、カスケードとは何か、 CSS 宣言をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。

どの CSS エンティティがカスケードに関係するか

CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含む @-規則、例えば記述子を含む @font-face などは、カスケードには加わりません。これらの場合、カスケードには全体としての @-規則のみがカスケードに加わります。ここで、 @font-face は font-family 記述子で識別されます。いくつかの @font-face 規則に同じ記述子が定義されていた場合は、全体から見て、最も適切な @font-face が考慮されます。

大部分の @-規則 — @media, @document, @supports の中など — に含まれる宣言はカスケードに加わりますが、 @keyframes に含まれる宣言は加わりません。 @font-face と同様に、 @-規則全体のみがカスケードアルゴリズムによって選択されます。

最後に、 @import および @charset は特定のアルゴリズムに従い、カスケードアルゴリズムには影響を与えないことに注意してください。

CSS 宣言のオリジン

The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the ユーザーエージェントのスタイルシート, the 作者のスタイルシート, and the ユーザーのスタイルシート.

Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.

ユーザーエージェントのスタイルシート

The browser has a basic style sheet that gives a default style to any document. These style sheets are named user-agent stylesheets. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.

Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.

作者のスタイルシート

Author stylesheets are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.

ユーザーのスタイルシート

The user (or reader) of the web site can choose to override styles in many browsers using a custom user stylesheet designed to tailor the experience to the user's wishes.

Override stylesheets

This feature was never implemented outside of Gecko, where it was only ever used for the non-standard XBL stylesheets.

カスケード順

The cascading algorithm determines how to find the value to apply for each property for each document element.

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 matches the given element and which are part of an appropriate media at-rule.
2. Then it sorts these rules according to their importance, that is, whether or not they are followed by !important, and by their origin. The cascade is in ascending order, which means that !important values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet:

   	Origin	Importance
   1	CSS Transitions	see below
   2	user agent	normal
   3	user	normal
   	override	normal
   4	author	normal
   5	CSS Animations	see below
   	override	!important
   6	author	!important
   7	user	!important
   8	user agent	!important

3. In case of equality, the specificity of a value is considered to choose one or the other.

スタイルのリセット

After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property all lets you quickly set (almost) everything in CSS back to a known state.

all lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.

CSS アニメーションとカスケード

CSS animations, using @keyframes at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single @keyframes, and never mixes multiple ones together.

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

Also note that values within @keyframes at-rules overwrite all normal values but are overwritten by !important values.

例

Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:

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, declarations inside li and .specific rules should apply. No declaration is marked as !important, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.

So three declarations are in competition:

margin-left: 0

margin-left: 3px

margin-left: 1px

The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, 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.

仕様書

関連情報

• A very simple introduction to the CSS cascade
• CSS の主要概念: CSS 構文、 詳細度、 継承、 ボックスモデル、 レイアウトモード、 視覚フォーマットモデル、 マージンの相殺、 値 (initial / computed / used / actual)、 値の定義構文、 ショートハンドプロパティ、 置換要素