style 要素

4.2.6 style 要素

カテゴリー:
メタデータ・コンテント
この要素を使うことができるコンテキスト:
メタデータ・コンテントが期待される場所
head 要素の子となる noscript 要素の中
コンテントモデル:
type 属性の値に依存しますが、下記本文で説明された要件に一致しなければいけません。
コンテント属性:
グローバル属性
media — 適切なメディア
type — 組込リソースのタイプ
さらに、title 属性は、この要素では特別なセマンティクスを持ちます:代替スタイルシート名
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
なし
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
DOM インタフェース:
interface HTMLStyleElement : HTMLElement {
           attribute boolean disabled;
           attribute DOMString media;
           attribute DOMString type;
};
HTMLStyleElement implements LinkStyle;

style 要素は、ウェブ制作者がドキュメントにスタイル情報を組み込むことができるようにします。style 要素は、スタイリング処理モデルへの入力の一つとなります。この要素は、ユーザーに対してコンテンツを表しません。

type 属性はスタイリング言語を与えます。この属性が存在するなら、その値は、スタイリング言語を指す妥当な MIME タイプでなければいけません。charset パラメータを指定してはいけません。type 属性のデフォルト値は、この属性がない場合に使われるのですが、"text/css" です。 [RFC2318]

指定の言語をサポートしているかを決定するためにタイプを調べるとき、ユーザーエージェントは、未知の MIME パラメータを無視してはいけません。つまり、未知のパラメータを伴ったタイプは、未サポートであると見なさなければいけません。charset パラメータは、この MIME タイプを比較するという目的においては、未知のパラメータとして扱わなければいけません。

media 属性は、どのメディアにそのスタイルが適用されるのかを指定します。その値は、妥当なメディアクエリでなければいけません。ユーザーエージェントは、media 属性の値が該当の環境に一致し、そして、他の関連の条件を満たすときは、そのスタイルを適用しなければいけません。そうでなければ、適用してはいけません。

スタイルは、さらに範囲を限定されるかもしれません。たとえば、@media ブロックが使われている CSS です。この仕様は、そのような追加の制限や要件に優先にすることはありません。

media 属性が省略された場合のデフォルトは "all" です。これは、デフォルトで、すべてのメディア対して、そのスタイルを適用するという意味です。

style 要素の title 属性は、代替スタイルシートのセットを定義します。もし style 要素が title 属性を持たないなら、それはタイトルを持ちません。祖先の title 属性がこの style 要素に適用されることはありません。 [CSSOM]

style 要素の title 属性は、link 要素の title 属性のように、タイトルがない style ブロックは親要素のタイトルを継承しないという点で、グローバルの title 属性と違います。単にタイトルがない状態となります。

style 要素の textContent は、次の ABNF にある style プロダクションに一致しなければいけません。キャラクター・セットは Unicode です。 [ABNF]

style         = no-c-start *( c-start no-c-end c-end no-c-start )
no-c-start    = < any string that doesn't contain a substring that matches c-start >
c-start       = "<!--"
no-c-end      = < any string that doesn't contain a substring that matches c-end >
c-end         = "-->"

すべての子孫要素は、style 要素自身が評価される前に、そのセマンティクスに従って、処理されなければいけません。純粋なテキストからなるスタイリング言語(XML とは対照的ですが)に対して、ユーザーエージェントは、style 要素の子となるすべての Text ノード(コメントや要素のようなノードではありません)のコンテンツを連結したものを、ツリー順に、スタイルシステムに通すことによって、その style 要素を評価しなければいけません。。XML ベースのスタイリング言語に対しては、ユーザーエージェントは、その style 要素の子ノードすべてをスタイルシステムに通さなければいけません。

スタイリング言語のプロセッサーで見つかったすべての URL は、その要素に対して(または、スタイリング言語によって定義されるように)、プロセッサーが呼び出されたときに、解決されなければいけません。

スタイルシートにクリティカルなサブリソースがあり、その取得の試行が完了したら、または、そのスタイルシートにクリティカルなサブリソースがなく、そのスタイルシートがパースされ処理されたら、ユーザーエージェントは、そのロードが成功したら、または、ロードするものが何もなければ、その style 要素で load という名前のシンプルなイベントを発出するタスクをキューイングしなければいけません。もしくは、何かしらの理由でスタイルシートのクリティカルなサブリソースを完全にロードできなかったら(例:DNSエラー、HTTP 404 レスポンス、コネクションが途中で切断された、未対応の Content-Type)、その style 要素で error という名前のシンプルなイベントを発出するタスクをキューイングしなければいけません。スタイルシートやそのサブリソースの処理における非ネットワークエラー(例:CSS パース・エラー、PNG デコードエラー)は、この段落の目的において、失敗ではありません。

これらのタスクに対するタスクソースは、DOM操作タスクソースです。

この要素は、スタイルシートにクリティカルなサブリソースがあれば、それらすべての取得試行が完了するまで、その要素のドキュメントの load イベントを遅らせなければいけません。

この仕様は、スタイルシステムを指定しません。しかし、CSS がほとんどのウェブブラウザでサポートされていると期待しています。 [CSS]

mediatype IDL 属性は、それぞれ同じ名前のコンテント属性を反映しなければいけません。

disabled IDL 属性は、代替スタイルシート DOMに対して定義されているとおりに動作します。

LinkStyle インタフェースは、この要素でも実装されなければいけません。スタイリング処理モデルでその方法を定義しています。 [CSSOM]

次のドキュメントには、強調でスタイルされているところがありますが、イタリック体のテキストではなく、明るい赤色のテキストとしてスタイルされています。一方、作品名とラテン語の単語は、デフォルトのイタリック体のままになっています。これは、どうやって、適切な要素を使って、ドキュメントを簡単に再スタイルできるのかを示しています。

<!DOCTYPE html>
<html lang="en-US">
 <head>
  <title>My favorite book</title>
  <style>
   body { color: black; background: white; }
   em { font-style: normal; color: red; }
  </style>
 </head>
 <body>
  <p>My <em>favorite</em> book of all time has <em>got</em> to be
  <cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
  about the <i lang="la">Felis Catus</i> in modern human society.</p>
 </body>
</html>

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