文法違反にならないCSSハックのまとめ
- Date:
- 2007.02.09 (Fri) 00:56
- Category:
- CSS
CSSハックといっても様々なものがあります。今回はCSSの文法に違反しないもの、かつ個人的によく使うものを集めてみました。要するに、備忘録ですね:-)
各種セレクタハック
IE 6以前が対応していないセレクタ(属性セレクタ、子供セレクタ、隣接セレクタ)を意図的に使う方法です。この方法をハックに分類するのもどうかと思うのですが、今回はハックに含めます。自分はMOSeを実現するためによく利用します。
html > body {
/* IE 6以前はこのスタイルを無視する */
}
!importantハック
!important宣言があるスタイルは、ほかのスタイルよりも優先されるのですが、IE 6以前は間違った解釈をします。これを逆手に取ったハックです。下のサンプルだと、IE 6以前はx-smallを適用し、正しい解釈をするブラウザはsmallを適用します。
body {
font-size: small !important; /* モダンブラウザ向け */
font-size: x-small; /* IE 6以下 */
}
コメントハック
空のコメントを挿入することで、特定のブラウザを除くハックです。コメントを書く場所で対象のブラウザが変わりますので注意してください。
1つ目は、Windows IE 4～5を除くハックです。セレクタの直後に空コメントを書くと、Windows IE 4～5はそのスタイルを無視します。
body/**/ {
/* Windows IE 4～5はこのスタイルを無視する */
}
2つ目は、すべてのWindows IE(IE 7も含む)を除くハックです。子供セレクタに対応していないIE 6以前はもちろんですが、「>(大なり)」記号のあとに空コメントを書くとIE 7も無視します。
html>/**/body {
/* Windows IEはこのスタイルを無視する */
}
バックスラッシュハック
最近はあまり使いませんが、Mac IE 5を除くハックです。コメントを閉じる直前に「\(バックスラッシュ)」を書くと、それ以後のスタイルを無視するようになります。ちなみに、日本語環境では半角の円マーク記号がバックスラッシュです(1バイトフォントで表示するとバックスラッシュになります)。
/*\*/
body {
/* Mac IE 5はこのスタイルを無視する */
}
/**/
まとめ
これらのハックは文法違反にはなりませんが、使わないに越したことはありません。なんでもハックで解決するのではなく、工夫する努力を忘れないようにしましょう。
関連エントリー
Tag
- Comment: 0
- Trackback: 0
Comment