スタイリング

4.2.7 スタイリング

link 要素と style 要素は、ユーザーエージェントがドキュメントのレンダリング時に使うスタイリング情報を提供することができます。CSS 及び CSSOM 仕様では、ユーザーエージェントがどのスタイリング情報を使うべきなのかや、それをどうやって使うのかについて規定しています。 [CSS] [CSSOM]

style 要素と link 要素は、LinkStyle インタフェースを実装します。 [CSSOM]

style 要素では、もし、ユーザーエージェントが指定のスタイリング言語をサポートしていないなら、その要素の LinkStyle インタフェースの sheet 属性は null を返さなければいけません。同様に、スタイリング処理モデルに寄与する外部リソースリンクを表さず(つまり、rel 属性に stylesheet キーワードを持たない)、そのリンクが代替スタイルシートだけれども、title コンテント属性がない、または、そのリソースがCORS クロスオリジンとなるような link 要素は、その LinkStyle インタフェースの sheet 属性に null を返させないといけません。

そうでなければ、その LinkStyle インタフェースの sheet 属性は、対応する要素が Document の中になければ、null を返さなければいけません。そうでなければ、次のプロパティを持つ StyleSheet オブジェクトを返さなければいけません: [CSSOM]

スタイルシート・タイプ

スタイルシート・タイプは、スタイルに指定されているタイプと同じでなければいけません。style 要素では、これは、type コンテンツ属性の値と同じになります。もしこの属性が省略されたら text/css となります。link 要素では、これは、指定リソースの Content-Type メディアデータとなります。

スタイルシート・ロケーション

link 要素では、そのロケーションは、この要素の href コンテンツ属性で与えられた URL をこの要素に対して解決した結果でなければいけません。解決に失敗したら空文字列になります。style 要素には、ロケーションはありません。

スタイルシート・メディア

メディアは、その要素の media コンテンツ属性の値と同じでなければいけません。その属性が省略されたら場合は、空文字列となります。

スタイルシート・タイトル

タイトルは、その要素の title コンテント属性が存在し、値が空でなければ、その値と同じでなければいけません。この属性が存在しない、または、その値が空文字列なら、そのスタイルシートはタイトルを持ちません(そのタイトルは空文字列ということになります)。タイトルは、代替スタイルシート・セットを定義するために使われます。

スタイルシート代替フラグ

link 要素では、そのリンクが代替スタイルシートであれば、true となります。それ以外はすべて false となります。

毎回、同じオブジェクトが返されなければいけません。

linkstyle 要素の disabled IDL 属性は、LinkStyle インタフェースの sheet 属性が null なら、false を返さなければならず、セット時においては何もしてはいけません。そうでなければ、取得時においては、StyleSheet インタフェースの disabled 属性の値を返さなければならず、セット時においては、 その同じ属性に新しい値を転送しなければいけません。

代替スタイルシートの取り扱いの規則は、CSS オブジェクトモデル仕様で定義されています。 [CSSOM]


link 要素、style 要素、<?xml-stylesheet> PI、HTTP の Link: ヘッダー、その他のメカニズムのどれによって追加されたかに関わらず、スタイルシートは、style sheet ready フラグを持ちます。これは、最初はセットされません。

スタイルシートの適用の準備ができたとき、その style sheet ready フラグがセットされなければいけません。スタイルシートが他のリソースをひとつも参照していなかったら(例えば、style 要素によって与えられた内部的なスタイルシートで、@import ルールを持たない)、そのスタイルのルールは、スクリプトに対して同期して利用できるようにしなければいけません。そうでなければ、スタイルのルールは、イベントループが "レンダリングのアップデート" 手順に達した場合に限り、スクリプトに対して利用可能とならなければいけません。

ある条件において、HTML パーサーXML パーサーDocument のコンテキストにあるスタイルシートのことを、スクリプトをブロックするスタイルシートといいます。その条件とは、該当の要素がその Document のパーサーによって生成され、かつ、その要素が style 要素か link 要素のいずれかで、その要素がパーサーによって生成されたときにスタイリング処理モデルに寄与する外部リソース・リンク であり、かつ、その要素がパーサーによって生成されたときに、その要素のスタイルシートが有効であり、かつ、その要素に style sheet ready フラグがまだセットされておらず、かつ、イベントループが手順 1 に最後に達したとき、その要素が その Document の中にあり、かつ、ユーザーエージェントがまだその特定のスタイルシートを見捨てていなかった場合です。ユーザーエージェントはスタイルシートをいつでも見捨てることができます。

スタイルシートがロードされる前にそのスタイルシートを見捨てるというのは、そのスタイルシートが今なお最終的にロードすることになっているのなら、そのスクリプトは不正確な情報を使って動作することになってしまうことを意味します。たとえば、スタイルシートが要素の色を緑にセットし、そして最終的なスタイルを調査するスクリプトが、そのシートがロードされる前に実行されるとしましょう。すると、そのスクリプトは該当の要素が黒(またはデフォルトの色)だと判断するでしょう。ゆえに、良くない選択をしてしまうことになるのです(ページの他の場所の色に緑ではなく黒を使うと決めてしまうなど)。実装においては、スクリプトが不正確な情報を使ってしまう可能性と、遅いネットワークのために完了を待たされて何もできないというパフォーマンス上の影響とのバランスを考慮しなければいけません。

Document のコンテキストの中にスクリプトをブロックしているスタイルシートがある、または、 Document親のブラウジングコンテキストを持つtブラウジングコンテキストの中にあるならば、その Document は、スクリプトをブロックしているスタイルシートを持つといいます。その親のブラウジングコンテキストアクティブ・ドキュメントは、それ自身で、スクリプトをブロックしているスタイルシートを持ちます。

前段落で定義したスクリプトをブロックしているスタイルシートを持たないなら、その Document は、スクリプトをブロックしているスタイルシートを持たないといいます。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/document-metadata.html#styling