Edit

Page

Page title:

Page body:

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

= '''媒体'''と'''選択子''': 使用する[[媒体]]と適用する[[要素]]から、
候補となる[[宣言]]を選びます。
= '''重み'''。
== '''出自'''と'''重要度'''。 (優先度最大)
[[宣言]]が含まれる[[スタイル・シート]]の種類と、[[宣言]]の[[重要度]]の高さで選びます。
=== [[利用者スタイル・シート]]より、重要なもの (最優先)
=== [[上書きスタイル・シート]]より、重要なもの [SRC[[[DOM2]]]]
=== [[著者スタイル・シート]]より、重要なもの
=== [[上書きスタイル・シート]]より、通常のもの [SRC[[[DOM2]]]]
=== [[著者スタイル・シート]]より、通常のもの
=== [[表現的ヒント]]
---- [[詳細度]]が 0 の[[著者スタイル・シート]]相当 [SRC[>>8]]
=== [[利用者スタイル・シート]]より、通常のもの
=== [[利用者エージェント・スタイル・シート]]より、重要なもの
=== [[利用者エージェント・スタイル・シート]]より、通常のもの (優先度最低)
=== [[CSS 1]] では出自と重要度の判断が別で、
出自による順位よりも重要度による順位の重みが高くなっていました。
==- [[SMILアニメーション]]による[[アニメーション]]値は[[上書きスタイル・シート]]による指定とみなされます。 [SRC[@@ 要引用]]
==-
@@ [[WinIE]] [CODE(DOMa)@en[[[runtimeStyle]]]] は?
[[注入スタイルシート]]
== '''輸入優先度'''。
[[輸入]]された[[スタイル・シート]]内の[[宣言]]よりも参照元の[[スタイル・シート]]内の[[宣言]]が優先されます。
== '''非 CSS 情報''': [[CSS]] 以外の方法 (例えば [[HTML]] の表現系[[属性]])
による指定は、
=== [[CSS 1]] では[[著者スタイル・シート]]の先頭に[[詳細度]] 1
で記述されているものとみなします。
=== [[CSS 3]] 案では[[利用者エージェント・スタイル・シート]]と同じ重みとします。
=== [[CSS 2]] と [[CSS 2.1]] では[[著者スタイル・シート]]の先頭に[[詳細度]] 0
で記述されているものとみなします。
===- <IW:CSS2:"cascade.html#q12">
===- [[詳細度]]が 1 から 0 に変更されたのは、[[普遍選択子]]
([[詳細度]] 0) が追加されたためです。
===- [[SVG 1.1]] では [[CSS 2]] と同じです。
<http://www.w3.org/TR/SVG11/styling.html#StylingUsingPresentationAttributes>
===- [[SVG 1.1 2e]] では[[著者スタイル・シート]]で一番優先度が高いものとして扱われます。
<http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#UsingPresentationAttributes>
=== [[MathML]] の表現系[[属性]]による指定の重みについては [[MathML]]
の仕様で規定があります。
= '''詳細度'''。
[[宣言]]が含まれる[[規則集合]]に付された[[選択子]]の[[詳細度]]が最も高いものが勝ちます。
== [[擬似要素]]は [[CSS 1]] と [[CSS 2.1]] では[[要素]]と同じ[[詳細度]]を持ちますが、
[[選択子]][[勧告候補]]では無視することとされています。 [[CSS 2]]
では双方の矛盾する記述があります。新しい [[CSS 2.1]] の方法が正しいのでしょうか。
== [[HTML]] の [CODE(HTMLa)@en[[[style]]]] [[属性]]による指定は、
=== [[CSS 1]] と [[CSS 2]] では [[ID選択子]]と同じ[[詳細度]]とします。
=== [[CSS 2]] 正誤表と [[CSS 2.1]] では下から4桁目が 1 の[[詳細度]]とします。
=== なお、出現順は他の[[著者スタイル・シート]]の後になります。
=== [[選択子]][[勧告候補]]は [[CSS 3]] 段階付け及び継承モジュールを見よとしていますが、
そのモジュール案に規定はありません。出版の時期から考えて [[CSS 2.1]]
の方法が正しいのでしょう。
= '''出現順'''。最後の[[宣言]]が勝ちます。 (優先度最低)

* [2] 仕様書

[REFS[
= [CITE@en[Cascading Style Sheets, level 1]]
<IW:CSS1:"cascading-order">
= [[CSS 2]] [CITE@en[Assigning property values, Cascading, and Inheritance]]
<IW:CSS2:"cascade.html">
= [[DOM水準2]] <IW:DOM2:"Style/css.html#CSS-DocumentCSS">
= [CITE@en[Selectors]] ([[W3C]] [[勧告候補]])
<http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#specificity>
= [CITE@en[CSS3 module: Cascading and inheritance]] (作業中)
<http://www.w3.org/TR/2002/WD-css3-cascade-20020219/>
= [CITE@en[Syntax of CSS rules in HTML's "style" attribute]] (作業中)
<http://www.w3.org/TR/2002/WD-css-style-attr-20020515#cascading>
- [3] [CITE@en[CSS3 module: Cascading and inheritance]] ([TIME[2009-01-20 03:45:04 +09:00]] 版) <http://dev.w3.org/cvsweb/~checkout~/csswg/css3-cascade/Overview.html?content-type=text/html;%20charset=utf-8>
- [8] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2012-06-15 22:31:32 +09:00]] 版) <http://www.whatwg.org/specs/web-apps/current-work/#presentational-hints>
]REFS]

* 表現的ヒント

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

* 関連

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

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

[6] [CITE[IRC logs: freenode / #whatwg / 20111030]]
( ([TIME[2011-11-02 08:29:53 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20111030#l-197>

[7] [CITE@en[CSS Cascading and Inheritance Level 3]]
( ([TIME[2012-04-14 09:38:45 +09:00]] 版))
<http://dev.w3.org/csswg/css3-cascade/>

[10] [CITE@en[CSS Cascading and Inheritance Level 3]]
( ([TIME[2013-01-04 03:24:00 +09:00]] 版))
<http://www.w3.org/TR/2013/WD-css3-cascade-20130103/>

[11] [CITE@en[CSS Cascading and Inheritance Level 3]]
( ([TIME[2013-06-17 13:55:07 +09:00]] 版))
<http://dev.w3.org/csswg/css-cascade/>

[12] [CITE@en[CSS Cascading and Inheritance Level 3]]
( ([TIME[2013-07-13 01:12:04 +09:00]] 版))
<http://dev.w3.org/csswg/css-cascade/>

[13] [CITE@en[CSS Cascading and Inheritance Level 3]]
( ([TIME[2013-07-26 01:21:54 +09:00]] 版))
<http://www.w3.org/TR/2013/WD-css-cascade-3-20130730/>

[14] [CITE@en-US[XML Binding Language (XBL) 2.0]]
( ([TIME[2007-03-16 22:20:16 +09:00]] 版))
<http://www.w3.org/TR/2007/CR-xbl-20070316/#binding3>

[FIG(quote)[
[FIGCAPTION[
[15] [CITE[Content Scripts - Google Chrome]]
([TIME[2015-07-14 00:01:24 +09:00]] 版)
<https://developer.chrome.com/extensions/content_scripts>
]FIGCAPTION]

> 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.

]FIG]

[16] [CITE@en[Remove <iframe seamless> · whatwg/html@1490eba]]
([TIME[2016-02-04 19:14:05 +09:00]] 版)
<https://github.com/whatwg/html/commit/1490eba4dba5ab476f0981443a86c01acae01311>

[FIG(quote)[
[FIGCAPTION[
[17] [CITE@en[RFC 7992 - HTML Format for RFCs]]
([TIME[2016-12-17 02:51:45 +09:00]])
<https://tools.ietf.org/html/rfc7992#section-6.3.6>
]FIGCAPTION]

>    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">

]FIG]

[FIG(quote)[
[FIGCAPTION[
[18] [CITE@en[update CSS text to also talk about presentational hints]]
([[jeisinger]]著, [TIME[2017-03-28 22:35:58 +09:00]])
<https://github.com/w3c/webappsec-referrer-policy/commit/618cdccbf455dae16dc5b5085db87711574e7843>
]FIGCAPTION]

> 
>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[19] [CITE@en[Creating Safari Content-Blocking Rules]]
([TIME[2017-06-06 17:07:14 +09:00]])
<https://developer.apple.com/library/content/documentation/Extensions/Conceptual/ContentBlockingRules/CreatingRules/CreatingRules.html#//apple_ref/doc/uid/TP40016265-CH2-SW1>
]FIGCAPTION]

> 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.

]FIG]

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)