4

<style>タグは通常<head></head>内に置くものといった説明がされていますが、<body>
内に置いたときの動作がどうなるかの説明はどこかにないでしょうか?
対象はメジャーな最新ブラウザのみでよいです。
試しに、Safari8.0.3で以下のhtmlを表示すると、<div>hoge</div>の内容が赤くスタイリングされました。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div>hoge</div>
  <style>
    div { border: 2px solid red; }
  </style>
</body>
</html>

画像の説明をここに入力
こちらのHTML5 <style scoped>の説明はscoped属性の説明なのでちょっと違う気がします。
http://hyper-text.org/archives/2013/02/style_scoped_attr.shtml

<head></head>内におけばいいんだよ。細けえことはいいんだよという意見もありますが、HTML5で許可されている?ような気もして、気になったので。

2

1 件の回答 1

7

検証してみました。検証につかったページはこちらです。

結論を先に述べると、モダンブラウザにおいて、<body> 内の <style> がなんらかの特別扱い(<head> にあるのとないのとの違い)を受けることはなく、順当に上から順に評価されていくようです。

scoped 属性を持ったものは Firefox 以外では考慮されず、平気で上書きされてしまいました(未対応なので当たり前ですね)。

以下、とりあえず手元ですぐ出来そうな検証だけ行ないました。環境は OS X Yosemite 10.10.2 上です。Internet Explorer だけ、OS X 上の Parallels で起動した Windows 8.1 の中で動いたものを利用しています。

各ブラウザのバージョンもぱっとわかる限り表記しておいたので、不足があれば検証ページをご自分でご覧になって確認してみてください。

Chrome

40.0.2214.115(64-bit)

Chrome

Safari

8.0.3 (10600.3.18)

Safari

Firefox

36.0

Firefox

Opera

27.0.1689.76

Opera

Internet Explorer

11.0.9600.17631

IE

iOS Safari

iOS 8.1

iOS

Android 5

Genymotion 上なので不正確な可能性があります。

Android

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。