web-dev-qa-db-ja.com

<STYLE>はHTMLドキュメントの<HEAD>にある必要がありますか?

厳密に言うと、styleタグはHTMLドキュメントのheadの中にある必要がありますか? 4.01標準はそれを暗示していますが、明示的には述べられていません。

STYLE要素を使用すると、作成者はスタイルシートの規則をドキュメントの先頭に配置できます。 HTMLは、ドキュメントのHEADセクションで任意の数のSTYLE要素を許可します。

「厳密に言えば」と言うのは、体の中にスタイル要素を配置するアプリがあり、テストしたすべてのブラウザーがスタイル要素を使用しているようだからです。それが実際に合法かどうか疑問に思っています。

125
eaolson

styleは、ドキュメントのheadにのみ含まれることになっています。

検証ポイントに加えて、stylebodyを使用するときに関心があるかもしれない1つの注意点は、 スタイルのないコンテンツのフラッシュ です。ブラウザーは、表示された後にスタイル設定された要素を取得し、サイズ/形状/フォントおよび/またはフリッカーをシフトします。それは一般的に悪い職人技のサインです。一般に、styleを好きな場所に置くことで逃げることができますが、可能な限り避けてください。

HTML 5では、scopedタグを本文のあらゆる場所に含めることができるstyle属性を導入しましたが、その後再び削除しました。

99
Esteban Küber

他の答えは正しいですが、誰も説明していないことに驚いていますwhere規格はhead以外のスタイルを許可していません。

実際には head要素のセクション (および [〜#〜] dtd [〜#〜] ):

<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->

はい、知っています。 DTDは読みにくいです。

これはSTYLE要素が発生する唯一の場所であるため、他の場所では暗黙的に無効です。

19

最新のWhatWGおよびW3C仕様によると、はい、style要素mustは常にheadに含まれている必要があります。しばらくの間、仕様にはscoped要素のstyle属性が含まれていたため、それらが存在する場合、その要素の子孫のみをスタイルするためにボディ内の要素内に配置することができました...少なくとも、開発者フラグを介して有効にする必要はありません)、両方の仕様から削除されました 「実装者の関心がないため」 。その結果、style要素は、メタデータコンテンツを許可するコンテキストでのみ許可されるようになりました。これはヘッドのみです。

(大丈夫、それはquitetrueではありません-style要素を含むメタデータコンテンツを、template内の body 要素内に合法的に置くことができますが、テンプレートをサポートするブラウザを使用している場合、実際には有効になりません。これは実際には単なる愚かな技術です。)

WhatWG spec には次のように書かれています:

4.2.6。 style 要素

カテゴリー

メタデータコンテンツ

この要素を使用できるコンテキスト

メタデータコンテンツ が必要です。
<noscript> 要素の子である <head> 要素。

single-page spec をCTRL-Fingすると、コンテンツモデルにメタデータコンテンツが含まれる唯一の要素がhead要素であることがわかります。

一方、 最新のW3Cドラフト仕様 には、 template 要素のコンテンツモデルのメタデータコンテンツもリストすることを除いて、まったく同じ表現が含まれています。 (WhatWGはtemplatesの概念を変え、そのコンテンツモデルをnothingとしてリストします。)

WhatWG仕様の非規範的 index of elements は、style要素の許容される親はheadまたはnoscript要素のみであることを確認しています。 (同じインデックスのW3バージョンでは、フローコンテンツに<style>要素を含めることができると誤って記載されていますが、これはscoped属性の削除時にW3Cによって導入されたエラーです。 プルリクエスト open修正します。)

18
Mark Amery

彼らは頭の外に出るべきではありませんが、とにかく動作します。素早くちらつくことに気付くかもしれませんが。サイトは、スタイルタグを頭の外で検証するべきではありませんが、それは本当に重要ですか?また、リンクタグは、想定されていなくても、頭の外でも機能します。

15
geowa4

他の回答が述べているように、実際にそこにいる必要はありません。ただし、検証は行われません。この場合、これは重要な場合も重要でない場合もありますが、htmlのレンダリングは完全にブラウザ次第であることに注意してください。私が知っていることから、今日使用されているすべてのブラウザは、それを頭の外に置くことをサポートしますが、将来のブラウザと将来のブラウザのリリースでそれを保証することはできません。

標準に固執すると、より安全です。非常に多くの議論がどれほど安全かを示しています。

4
Louis

HTML5.2 W3C勧告、2017年12月14日(上記の初期のドラフトではない)では、<style>

「フローコンテンツが予想される本文内」 (セクション4.2.6)

3
Anahata

<head>内以外のスタイルタグは、W3Cルールでは検証されません。

3
womp

このサイトによると、HTML5.1(ドラフト)およびWHATWGでは<style>タグを本文に入れる:

http://www.html.am/tags/html-style-tag.cfm

また、かなり以前からブラウザでサポートされていたようです。このStackOverflowの回答によると、Firefox 3 +、IE6 +、Safari 2+およびChrome 12+はそれをサポートしています。

https://stackoverflow.com/a/10989663/29779

2
konrad

HTML 5.2仕様(ドラフト)によると、スタイルタグはドキュメントの先頭でのみ許可されています。

HTML 5.2スタイルタグのドラフト(2016年8月18日)

スタイル要素は、ドキュメントの先頭に表示されるように制限されています。

1
Kerry Kobashi

スタイルタグは、headセクションまたはbodyセクションの内部、またはhtmlタグの外部でも使用できます(外部HTMLは推奨されません)。リアルタイムプロジェクトでは、htmlタグの外側でスタイルタグを使用していることがよくわかります。

0
Adarsh Joshi