HTML5 Style Tag


HTMLで<style>タグって<head>の中にしか書いちゃだめってずっと思ってたんです。

それが、HTML5からフローコンテンツ(ほぼ全てのbody以下のタグ)の中に<style>タグを埋めれるようになっています。条件はフローコンテンツの直下先頭にあることとscoped属性を付加することです。

scoped属性を付けるとその子要素のみにスタイルがきくようになります。(必須)

<div>ここには空白以外入れちゃダメ
    <style scoped=”scoped”>CSS</style>
   ここの要素にスタイルが適用される
</div>

ただし、現状scoped属性に対応しているブラウザFirefoxのみです。(2014/1/8現在) 対応していないブラウザだと全体適用されてしまいます。

54b062057319ba922e3f97627ebc02f8

以上!すてねこでした!