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/
- 関連記事
-
-
FC2ブログテンプレートに表示される広告を非表示にする方法 2015/06/29
-
iframeをフレキシブルに 2015/05/31
-
style要素にはscoped属性をつけるといいかもしれません 2015/04/18
-
inline-blockで生じる隙間の原因と対処法 2015/04/17
-
GoogleMapを任意の倍率で埋め込む 2015/04/10
-