ブラウザ別CSSハック
使わないに越したことはないのですが、使おうとする度に調べることが多いのでブラウザ別のCSSハック(IE6、IE7、IE8用)を覚書。世の中のすべてのブラウザがHTML5&CSS3対応になればいいのにと夢のような事を。。。
FirefoxやSafari、Chromeはあまり必要性を感じないので、IE向けのハックで必要な物を簡潔に。たくさんありますけど、それぞれ個別に適用出来るハックが1つあればほぼ問題ないのでは?と思います。
すべてセレクタは#sample、プロパティはwidth:100%;としています。
【IE6以下に適用】
プロパティの前に”_”を付けるアンダースコアハック(invalid)
セレクタの前に”*html”を付けるスターハック(valid)
#sample{ _width:100%; }/*アンダースコアハック */ *html #sample{ width:100%; }/* スターハック */
【IE7のみ適用】
プロパティの前に”*:first-child+html”を付ける(valid)
プロパティの前に”*+html”を付ける(valid)
*:first-child+html #sample{ width:100%; } *+html #sample{ width:100%; }
【IE8のみ適用】
未検証。要確認。なんだかかなり気持ち悪い感じ(invalid)
html>/**/body #sample{ width /*\**/:100%\9; }
コンディショナルコメントで振り分ける
IEには条件分岐で特定のバージョンだけにスタイルシートを適用する方法があります。
あまり使ってないのですが、どこかで線引きをしてブラウザを切り捨てる事になった時に、こっちの方がさっぱりして気持ちいいかなと思います。head内で読み込みます(ファイル名とパスは適宜変更で)
【IEすべてに適用】
<!--[if IE]> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]-->
【IE以外に適用】
<!--[if !IE]> <link rel="stylesheet" href="others.css" type="text/css" /> <![endif]-->
【IE7のみ適用】
<!--[if IE 7 ]> <link rel="stylesheet" href="ie7.css" type="text/css" /> <![endif]-->
【IE6以下に適用】
<!--[if lte IE 6 ]> <link rel="stylesheet" href="ie6.css" type="text/css" /> <![endif]-->
”lte”の部分はcomparisonと言われる適用範囲を示す値で、lt、lte、gt、gteが指定できます。左から順に未満、以下、超、以上です。
指定した値を含まずそれ以上を表すのって「超」って言うんですね。1つ賢くなった。lteはless than equalらしいのですが、gは何の略だろうか?~より多いだとmore thanな気がするんだけど。。。ちなみにGoogle翻訳でless thanを通すと以下って出るけど、これ間違ってないか?
他にもIE7.js、IE8.js、IE9.jsを使うってのも1つの手ですね。
おまけでclearfix
floatした子要素を内包する親要素の背景が伸びない時は、overflow:hidden;ばかり使ってたのですが、印刷時に問題が出るようなので、印刷用のCSSでautoに戻すか、clearfixを使ったほうがいいかも。
clearfixの決定版を作るを参考に少し追加しました。ピリオドや空白よりいいかも。
.clearfix:after { content:url(pixel.gif); display:block; clear:both; height:0; } *html .clearfix{ zoom:1; } *:first-child+html .clearfix{ zoom:1; }
毎日コミュニケーションズ
売り上げランキング: 2487

XHTML+CSSのバイブル的存在。
理解しやすい!
広く深く まとまりの無い教科書
分かりやすくて実践的
リファレンスとしては使えません