style要素にはscoped属性をつけるといいかもしれません

/ Web / Comment[0]

W3C checkでこのブログをチェックしたらElement style is missing required attribute scoped.とかいわれました。

なんのことやら調べてみると、style属性でインラインスタイルを書く場合はこのように書けとのことです。

<style scoped>~</style>

scoped属性を加えるとその親の子孫要素のみに適用されるようになります。下の例ではdiv.contents以下に効かせることができます。こいつは便利だ。

<div class="section">
  <p>背景色:デフォルト</p>
  <div class="contents">
    <style scoped>
      div.section { background:red; }
    </style>
    <div class="section">
      <p>背景色:赤</p>
    </div>
  </div>
</div>

ホームページビルダーなどの自動ツールで作成された他人のソースコードを改変している際に、相手が編集できるようにあえてstyle属性でインラインスタイルを書く場合があります。
すると次々と関係ないものに絡んでしまったり、他人が自動ツールなどで弄ったときに絡んでしまったりして結構厄介なのです。
scoped属性をつけることでstyleを書いた親要素以下にしかスタイルが適用されなくなるため、上の要素に絡む心配がなくなるというわけです。

ところが
最新の(15/04/18) IE , Safari , Chromeには対応していません。無視されて親にも効いてしまいます。ズコー
現状、主要ブラウザの中で対応しているのはFirefoxだけです。過信できる属性ではありませんがW3Cが推奨してるためこれからスタンダードになるんでしょうかね。

HTML style scoped Attribute - http://www.w3schools.com/tags/att_style_scoped.asp
W3C Markup Validation Service - http://validator.w3.org/

関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可