web-dev-qa-db-ja.com

要素スタイルは、このコンテキストでは要素本体の子として許可されていません(<style scoped> not validation)

<!DOCTYPE html>
...
<style scoped>
/* css */
</style>

W3.orgバリデーターは私にこのエラーを与えています:

Line 883, Column 17: Element style not allowed as child of element body in this context.
(Suppressing further errors from this subtree.)
        <style scoped>...
Contexts in which element style may be used:
If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: where flow content is expected, but before any other flow     content other than inter-element whitespace and style elements, and not as the child of an element whose content model is transparent.
Content model for element body:
Flow content.

'scoped'プロパティを使用すると、スタイルタグをドキュメントの先頭の外側に配置しても問題ないことが理解できます。それで、なぜバリデーターはそれに不満を持っているのですか?

(私はWordpressを使用しており、このコードはプラグインによって生成されるため、単に頭に置くことはできません。)

編集:これは検証されません-

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<script type="text/javascript"></script>
<style scoped></style>
</body>
</html>

しかし、scriptタグがstyleタグの後にある場合はそうです。その理由は何ですか?

13
mikeybeck

W3Cマークアップ検証ツールは、HTML5チェッカーとして機能する場合、 HTML 5.1 Nightly などのさまざまなドラフトに従ってこの問題を処理します。現在、style要素は、 head要素。ただし、scoped属性が存在する場合を除きます。この場合、「フローコンテンツが期待される場所で、要素間の空白とスタイル要素以外の他のフローコンテンツの前に表示されます。コンテンツモデルが透明な要素の子としてではありません。」実際の例では、要素はscript要素(フローコンテンツとしてカウントされる)の後に表示されます。したがって、要素の順序を変更すると、指定された定義の下で構文が有効に変更されます。

または、style要素をdiv要素でラップすることもできます。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<script type="text/javascript"></script>
<div>
  <style scoped></style>
</div>
</body>
</html>

W3C勧告 HTML5 によると、scoped属性はまったく無効です。これはHTML5ドラフトに存在していましたが、実装の欠如のために勧告から削除されましたが、それでも「標準化の道」にあり、HTML 5.1に進む可能性があります。

既存のブラウザは一般にscoped属性を無視し、ほとんどすべての場所でstyle要素を許可し、そのコンテンツをHTMLドキュメント全体(style要素の前の部分も含む)に適用することに注意してください。

16