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

136

厳密に言えば、styleタグheadはHTMLドキュメント内にある必要がありますか？4.01標準はそれを意味しますが、明確に述べられていません：

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

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

html  coding-style  html-head 
— イールソン
ソース
1
疑問がある場合は、W3Cマークアップバリデーターが常に役に立ちます:) http://validator.w3.org/
— Lazlo
'put <style> in <head>'ルールの1つの例外はhtml電子メールです。これは、多くのWebメールサービスがヘッド要素を単に削除するため、スタイルがなくなったことを意味します。
— user132837
1
スペックは必要とサポートにブラウザstyleでbody、そのためには関係なく、作者のガイドラインセクションによって暗示されているものの、私のために良い十分です。
— WraithKenny、2017年

回答:

104

stylehead文書のにのみ含まれることになっています。

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

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

— エステバンキューバー
ソース
6
これまでのところ、Firefoxのみがこのscoped属性をサポートしているようです。caniuse.com /# feat=style-scopedを参照してください。
— Jaime Hablutzel、2015年
2
リンク先の記事がリンク切れの霊気に消えたので、ここで利用可能な最新のアーカイブされたバージョンがあります：web.archive.org/web/20150525042412/http://bluerobot.com/web/css/...
— ザカリー・マレー
@ZacharyMurray頭を上げてくれてありがとう！本文のリンクをウェブアーカイブのものに更新しました。
— EstebanKüber2016年
1
仕様ではstyleタグをサポートするために適合ブラウザが必要なbodyので、仕様の作者の部分にもかかわらず、ボディスタイルは有効であると考えます。github.com/whatwg/html/issues/1605#issuecomment-235961103
— WraithKenny、
19

短い答え

  • 現在の仕様によると、はい、style要素は常に内になければなりませんhead。例外はありません（style要素内のtemplate要素を除きます）。

  • これは常に歴史的にそうであったわけではありません。仕様の詳細とその履歴に関心がある場合は、読み続けてください。

  • スペックが言うに関係なく、使用style中の要素はbody ありませんすべての主要なブラウザでは、多かれ少なかれ仕事を。ただし、仕様に違反しているため、レンダリングパフォーマンスの低下や「スタイルのないコンテンツのフラッシュ」などの望ましくない結果を引き起こす可能性があるため、これは悪い習慣と見なされています。

仕様履歴

style要素はHTML 2には存在しませんでした。それらはHTML 3.0で導入され、ヘッドエレメントに含めることができる要素のリストには含まれていましたが、ボディエレメントに含めることができる要素のリストには含まれていませんでした。したがって、要素が最初に指定された時点では、にのみ含めることができました。head

これは、（別の表現を使用して表現されていても）要素に（削除されたscopedため）属性を導入したHTML 5まで続きましたstyle。この属性は、存在する場合、style要素を本文の要素内に配置して、その要素の子孫のみをスタイル設定できるようにするためのものでした。ただし、この機能は実際のブラウザには到達せず（少なくとも開発者フラグを介して有効にする必要がない限り）、「実装者の関心がないため」 W3C仕様とWhatWG仕様の両方から削除されました。その後、style要素はメタデータコンテンツを許可するコンテキスト（ヘッドのみ）でのみ許可されました。したがって、HTML 5の前と同じルールに戻りました。

ただし、両方の仕様組織によるエラーのため、両方の仕様に付録として含まれている要素の非規範的なインデックスは、の削除を反映するように適切に更新されておらずscoped、規範的な仕様と矛盾しています。WhatWGとW3Cの両方にこれを指摘しましたすることで、2つの仕様の相違を引き起こしたモーションイベントに設定されました。

規範的な仕様と非規範的なインデックスの間の不整合に対するWhatWGの解決策は、私のパッチを受け入れることでした修正する。

一方、W3Cは同等のパッチを拒否し、代わりに規範的な仕様を更新styleして、body、問題を引き起こす可能性があり、「注意して」実行する必要があるという注記を付けました。この変更の背後にある理由は、仕様を実際のブラウザーの動作に合わせるためです。

したがって、2017年3月以降、この質問に対する公式の回答は、あなたがどの標準化機構に耳を傾けるかを選択することに依存するということになります。（一般的にはより尊重される）WhatWG仕様にリストされている場合、ではstyle要素は許可されていませんbody。W3C仕様にリストした場合、それは許可されましたが、推奨されませんでした。

このばかげた状況は、W3CとWhatWGの間の2019年4月の平和条約によって（おそらく他の多くのそのような矛盾と同様に）終了しました。競合する仕様を並行して開発する代わりに、HTML仕様。したがって、2017からW3Cフォークへの変更によりstyle、body現在の仕様の一部ではなくなりました。それは単に歴史の好奇心です。

したがって、今日、WhatWG仕様を調べて、公式に許可されているものを判別するだけで済みます。これは言うべきことを持っています：

4.2.6。style要素

カテゴリー：

メタデータコンテンツ。

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

メタデータコンテンツが期待される場所。
中<noscript>の子である要素<head>要素。

単一ページの仕様をCTRL-Fingすると、コンテンツモデルにメタデータコンテンツが含まれる要素は要素だけであることがわかりheadます。

前に修正した要素の非規範的インデックスは、要素に許可されている親styleがheador noscript要素のみであることも確認しています。

— マーク・アメリー
ソース
18

他の答えは正しいですが、標準以外のスタイルが許可されていない場所について誰も説明しなかったことに驚いていますhead。

実際には、The headElement（および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要素が発生する唯一の場所であるため、暗黙的に他の場所では無効です。

— ユーザー123444555621
ソース
6
私はとても混乱しています。
— dav_i 2013年
1
現在IIRCにDTDがないHTML5を使用する必要があります。HTML5仕様だけで言っているのは、そうでないものです。
— Jan Kyu Peblik
14

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

— geowa4
ソース
5
「うまくいく」と言うのは少し難しい。せいぜい、現在のほとんどのブラウザーは引き続きスタイルをレンダリングしますが、本質的に「機能する」だけのこのエラーについては何もありません。ブラウザの将来のバージョンでは機能せず、問題はありません。
— チャック、
6
imo、レンダリングされたスタイル=機能します。トリッキーなことは何もありません。最後の文は書き直す必要があります。意味がない。検証しないと言ったときに「正しくない」と述べたので、その文の意味を理解してはいけません。
— geowa4 2009
問題は、それらがあってもということですされているスタイルのものをするとき、あなたはコンテンツにいくつかのちらつきを持つことになりますstylesがでキック。
— エステバンKüber
2
スタイルタグは、ボディの最初でない限り
— geowa4
家でこれを試さないでください。
— TechNyquist 2017年
3

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

標準に固執すれば、より安全です。非常に多くの議論にどれだけ安全なのか。

— ルイス
ソース
3

2017年12月14日のHTML5.2 W3C勧告（上記で言及した以前のドラフトではない）に、を含めることができるとあり<style>ます

「流れの内容が期待されるボディで。」 （セクション4.2.6）

— 穴畑
ソース
現在でも、W3C はWhatWG仕様が以前のすべての仕様を廃止し、WhatWG仕様はで許可されていないことを公式に述べているため、これは明確に禁止されています。参照してください私の答えをあなたは私たちがここに来たことにより、曲がりくねったパスに興味があれば。stylebody
— Mark Amery
2

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

— Womp
ソース
-1

ヘッドセクションまたはボディセクションの内側、またはhtmlタグの外側でもスタイルタグを使用できます（外側のhtmlはお勧めしません）。リアルタイムプロジェクトでは、多くの場合、HTMLタグの外でスタイルタグを使用していることがわかります。

— アダーシュ・ジョシ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.