Cascading and inheritance

Cascading and inheritance

[1] 段階付け (cascading) は、 ある要素特性に関する勝ち宣言 (winning declaration) を 1つ探す処理です。 CSS スタイル・シートに含まれるある宣言の集合から、 次のような優先度を考慮して勝ち宣言を決定します。

  1. 媒体選択子: 使用する媒体と適用する要素から、 候補となる宣言を選びます。
  2. 重み
    1. 出自重要度。 (優先度最大) 宣言が含まれるスタイル・シートの種類と、宣言重要度の高さで選びます。
      1. 利用者スタイル・シートより、重要なもの (最優先)
      2. 上書きスタイル・シートより、重要なもの DOM2
      3. 著者スタイル・シートより、重要なもの
      4. 上書きスタイル・シートより、通常のもの DOM2
      5. 著者スタイル・シートより、通常のもの
      6. 表現的ヒント
      7. 利用者スタイル・シートより、通常のもの
      8. 利用者エージェント・スタイル・シートより、重要なもの
      9. 利用者エージェント・スタイル・シートより、通常のもの (優先度最低)
      10. CSS 1 では出自と重要度の判断が別で、 出自による順位よりも重要度による順位の重みが高くなっていました。
    2. 輸入優先度輸入されたスタイル・シート内の宣言よりも参照元のスタイル・シート内の宣言が優先されます。
    3. 非 CSS 情報: CSS 以外の方法 (例えば HTML の表現系属性) による指定は、
      1. CSS 1 では著者スタイル・シートの先頭に詳細度 1 で記述されているものとみなします。
      2. CSS 3 案では利用者エージェント・スタイル・シートと同じ重みとします。
      3. CSS 2CSS 2.1 では著者スタイル・シートの先頭に詳細度 0 で記述されているものとみなします。
      4. MathML の表現系属性による指定の重みについては MathML の仕様で規定があります。
  3. 詳細度宣言が含まれる規則集合に付された選択子詳細度が最も高いものが勝ちます。
    1. 擬似要素CSS 1CSS 2.1 では要素と同じ詳細度を持ちますが、 選択子勧告候補では無視することとされています。 CSS 2 では双方の矛盾する記述があります。新しい CSS 2.1 の方法が正しいのでしょうか。
    2. HTMLstyle 属性による指定は、
      1. CSS 1CSS 2 では ID選択子と同じ詳細度とします。
      2. CSS 2 正誤表と CSS 2.1 では下から4桁目が 1 の詳細度とします。
      3. なお、出現順は他の著者スタイル・シートの後になります。
      4. 選択子勧告候補CSS 3 段階付け及び継承モジュールを見よとしていますが、 そのモジュール案に規定はありません。出版の時期から考えて CSS 2.1 の方法が正しいのでしょう。
  4. 出現順。最後の宣言が勝ちます。 (優先度最低)

[2] 仕様書

表現的ヒント

[9] CSS カスケードにおいて詳細度 0 の著者による表現的なヒント (presentational hint) として扱われることが想定される規則を表現的ヒント (presentational hint) といいます。 >>8

関連

[4] CSSアニメーションとの関係を書く

[5] Cascading によって得られた勝ち宣言は、指定値の決定に用いられます。

[6] IRC logs: freenode / #whatwg / 20111030 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20111030#l-197>

[7] CSS Cascading and Inheritance Level 3 ( ( 版)) <http://dev.w3.org/csswg/css3-cascade/>

[10] CSS Cascading and Inheritance Level 3 ( ( 版)) <http://www.w3.org/TR/2013/WD-css3-cascade-20130103/>

[11] CSS Cascading and Inheritance Level 3 ( ( 版)) <http://dev.w3.org/csswg/css-cascade/>

[12] CSS Cascading and Inheritance Level 3 ( ( 版)) <http://dev.w3.org/csswg/css-cascade/>

[13] CSS Cascading and Inheritance Level 3 ( ( 版)) <http://www.w3.org/TR/2013/WD-css-cascade-3-20130730/>

[14] XML Binding Language (XBL) 2.0 ( ( 版)) <http://www.w3.org/TR/2007/CR-xbl-20070316/#binding3>

[15] Content Scripts - Google Chrome ( 版) <https://developer.chrome.com/extensions/content_scripts>

The list of CSS files to be injected into matching pages. These are injected in the order they appear in this array, before any DOM is constructed or displayed for the page.

[16] Remove <iframe seamless> · whatwg/html@1490eba ( 版) <https://github.com/whatwg/html/commit/1490eba4dba5ab476f0981443a86c01acae01311>

[17] RFC 7992 - HTML Format for RFCs () <https://tools.ietf.org/html/rfc7992#section-6.3.6>

Different readers of a specification will desire different formatting

when reading the HTML versions of RFCs. To facilitate this, the

<head> element also includes a <link> to a style sheet in the same

directory as the HTML file, named "rfc-local.css". Any formatting in

the linked style sheet will override the formatting in the included

style sheet. For example:

<style>

body {}

...

</style>

<link rel="stylesheet" type="text/css" href="rfc-local.css">

[18] update CSS text to also talk about presentational hints (jeisinger著, ) <https://github.com/w3c/webappsec-referrer-policy/commit/618cdccbf455dae16dc5b5085db87711574e7843>
[19] Creating Safari Content-Blocking Rules () <https://developer.apple.com/library/content/documentation/Extensions/Conceptual/ContentBlockingRules/CreatingRules/CreatingRules.html#//apple_ref/doc/uid/TP40016265-CH2-SW1>

css-display-none

Hides elements of the page based on a CSS selector. A second action field, named selector, contains the selector list. Any element matching the selector list has its display property set to none, which hides it.