このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

“CSS Cascading and Inheritance”

記事Sep.2nd, 2021
CSS3でスタイルの継承と競合するスタイルから適用される値を決定するカスケードに関する仕様を定義した“CSS Cascading and Inheritance”について。

仕様書の概要

概要

CSS Cascading and Inheritance”はCSSにおいて要素に適用されるプロパティの値を決定するカスケードと継承についてを定義している仕様書です。

CSSのすべてのプロパティに使用することができる共通キーワードやすべてのプロパティを一括して初期化できるall”プロパティ、スタイルシートに別のスタイルシートを読み込む@import”ルールなどが定義されています。

仕様書

定義されている値
定義されている関数
定義されている@ルール

用語など

一括指定プロパティ

一部のプロパティは他のいくつかのプロパティの値をまとめて指定することができ、このようなプロパティを“一括指定プロパティ(Shorthand Properties)”と呼ばれます。一括指定プロパティによってまとめて指定することができるプロパティの一つ一つは“個別指定プロパティ(Longhand Sub-properties)”と呼ばれ、一括指定プロパティによる指定は同じ場所に対象とする個別指定プロパティを全て並べて指定した場合と同じように扱われます。

一括指定プロパティで指定可能な値が省略された場合は該当する個別指定プロパティの初期値を指定した場合と同じ意味になります。

多くの場合、一括指定プロパティは対象とする個別指定プロパティの値を並べて記述することで値が指定されますが、一括指定プロパティの固有の構文やキーワードが代わって個別指定プロパティの値を設定する場合もあります。

また、一括指定プロパティはすべての個別指定プロパティの値を設定できない場合もあります。その場合でも一括指定プロパティはその個別指定プロパティの値を初期値に設定します。

!importantを一括指定プロパティに付けた場合はすべての一括指定プロパティに!importantを一括指定プロパティに付けた場合と同じ意味を持ちます。

プロパティの別名

いくつかのプロパティはいくらか実装が進んだ後にプロパティ名が変更されています。新しい名前を使用することが推奨されますが、後方互換性のために元のプロパティ名も別名として定義されています。別名はスタイルシートのパース時に新しいプロパティ名に置き換えられますが、置き換えの方法によって2種類の別名に分類されます。

元のプロパティ名の構文が新しいプロパティ名の構文が同じ場合は“旧名称エイリアス(Legacy Name Aliases)”と呼ばれ、スタイルシートがパースされる時に単純に元のプロパティ名は新しいプロパティ名に置き換えられて処理されます。

元のプロパティ名の構文が新しいプロパティ名の構文とは異なる場合、“旧名称による個別指定(Legacy Shorthands)”と呼ばれ、スタイルシートがパースされる時には一括指定プロパティの仕組みを利用して処理されます。

値の処理

ユーザー・エージェントが文書をパースし終えた後、すべての要素のすべてのプロパティに対象メディアに適合する値を割り当てます。最終的な要素に適用されるプロパティの値はいくつかの段階を経て算出されます。

“宣言値(Declared Values)
要素を適用先としているすべての値です。一つの要素を適用先とする宣言値は複数あり得ます。
“カスケード値(Cascaded Values)
カスケードによって選ばれた値で、一つの要素を適用先とするカスケード値は1個だけ(もしくは0個)です。
“指定値(Specified Values)
指定値はカスケード値があればその値と同じで、カスケード値がなければ既定化によって継承値や初期値が指定値です。
“計算値(Computed Values)
指定値はそれぞれのプロパティの仕様で定義されている形になるように処理され、計算値になります。
“使用値(Used Values)
計算値は残る必要な処理を行って使用値になり、文書を整形するのに使用されます。
“実値(Actual Values)
使用値は必ずしもそのまま使用できるとは限らず、何らかの制約がある場合には調整され、実値になります。

カスケード

多くの場合、一つの要素を適用先とするそれぞれのプロパティには複数の宣言値が割り当てられますが、“カスケード(Cascading)”ではすべての宣言値をリストとして取り込み、いくつかの基準に基づいて並び替え、最も序列が高い値を一つのカスケード値として選びます。

“重要度(Importance)”と“カスケード・オリジン(Cascading Origins)
宣言の重要度(!important)と宣言が何に由来するのか
“コンテキスト(Context)
宣言がカプセル化コンテキストに由来するかどうか
“詳細度(Specificity)
宣言を含むスタイル・ルールに付けられたセレクタの種類とその数
“記述順序(Order of Appearance)
宣言がスタイルシートの中で記述された場所
“CSS Cascading and Inheritance Level 5”では…

“CSS Cascading and Inheritance Level 5”ではカスケード・レイヤーの概念が導入されたことにより、カスケードで宣言値を並べ替える方法が変更されています。

“重要度(Importance)”と“カスケード・オリジン(Cascading Origins)
宣言の重要度(!important)と宣言が何に由来するのか
“コンテキスト(Context)
宣言がカプセル化コンテキストに由来するかどうか
“スタイル属性(The Style Attribute)
要素に直接記述されている(HTMLのstyle”属性の値など)であるかどうか
“レイヤー(Layers)
宣言が含まれるカスケード・レイヤー
“詳細度(Specificity)
宣言を含むスタイル・ルールに付けられたセレクタの種類とその数
“記述順序(Order of Appearance)
宣言がスタイルシートの中で記述された場所

表現上のヒント

HTMLの“width”属性や“height”属性、meta”要素name="color-scheme"、過去に定義されていたスタイリングのための要素や属性(font”要素や“bgcolor”属性など)によって設定されるCSSによらない方法で指定された“非CSS”のスタイルは“表現上のヒント(Non-CSS Presentational Hints)”と呼ばれ、ユーザー・エージェントはそのスタイルを参考にするかどうかを選ぶことができます。

表現上のヒントを文書の描画に反映する場合、文書の記述言語によるスタイルの指定はすべて対応するCSSのルールに置き換えられ、ユーザー・エージェント由来のスタイルと制作者由来のスタイルのいずれかとして扱われますが、文書の記述言語は表現上のヒントをどちらとして扱うのかを選択することができます。

定義されているCSSルール

説明
initial 初期値を使用する
inherit 継承値を使用する
unset 既定で継承されるスタイルは継承値、継承されないスタイルは初期値を使用する
revert ユーザー・エージェント、もしくはユーザーの既定値を使用する
revert-layer

関数

関数 説明
supports() スタイルシートの読み込みを特定の機能に対応しているメディアやデバイスに限定する

@ルール

@ルール 説明
@import 他のスタイルシートを読み込む
@layer
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク