スターハックはもう古い？
xmlns属性を使う
CSS ハックとは、各ウェブ・ブラウザの仕様の相違やバグを利用して、ブラウザごとに適用するスタイルを振り分けるテクニックのこと。できれば使いたくないテクニックですが、ブラウザごとに CSS の挙動が違うため使わざるを得ないケースがほとんどです。
IE6 には、XML 宣言を記述すると後方互換モードになってしまうとんでもないバグがあります。そのバグから生じるボックスサイズの差異を修正するために、当サイトでも CSS ハックを利用しています。
/* その他のブラウザ */ .example { property: value; } /* IE6以下に適用 */ * html body .example { property: value; }
今までは上記のような所謂スターハックを使っていたのですが、これはバグを使った CSS ハックで、あまり好ましくない手法らしいことを知って、CSS ハックを調べ直しました。一番参考になったのが css-hacks です。
css-hacks は、taichi kaminogoya さんが公開している CSS ハックの資料で、各種 CSS ハックのブラウザごとの対応表と、そのハックが利用しているのはバグなのか非対応セレクタなのかを簡潔にまとめています。この表と CSSハック | BLOG × WORLD ENDING を参考にして下記のように CSS を書き直しました。
/* IE6以下に適用 */ .example { property: value; } /* その他のブラウザ */ html[xmlns] .example { property: value; }
使用したのは属性セレクタです。属性セレクタを CSS ハックとして利用する際は、XHTML の XML 名前空間を宣言する為に html 要素に記載する xmlns 属性を主に指定します。
対応ブラウザがスターハックと真逆なので、記載する順番も逆になります。結果は一緒なのですが CSS の書式上の問題がない分 xmlns 属性ハックの方が気分的に良いです。紹介しているサイトがスターハックに比べて圧倒的に少ない xmlns 属性ハックですが、今後はこちらが定番になるような気がします。
属性セレクタは、html 要素と xmlns 属性以外にも当然使えるので、なにかと応用が利きそうなセレクタですね。セレクタに関する情報は、CSS セレクタに関するおさらい | WWW WATCH が詳しいですよ。
- 前の記事:
- スタイルシートのコンポーネント化
- 次の記事:
- 美人画の巨匠