初めて聞いたときはCSSの脆弱性かなんかを突いてウェブサイトを攻撃するセキュリティ関連の用語かと思っていました。
しかし実際は各ブラウザのバグを利用して、そのブラウザに対して表示の微調整を行うというものなのだという事がわかりました。
要はあれです。
IE6だと正常に表示されるのにIE7だと崩れてしまう。
等という現象に対してCSS HACKを利用し、各ブラウザでの表示の違いを吸収してしまおうというものです。
さてこのCSS HACKですが、実際にそこそこ複雑なレイアウトを施したHTMLだと、CSSファイル内に適用しなければならないHACKの数がかなり多くなってしまい、少し見づらくなってしまいます。
今回紹介する方法はIE内でしか解釈されないものだそうですが、IEが6なのか7なのか等で表示の違いをHACKしている記述がCSS内にたくさん出来てしまい、なんか見づらくなってしまった。
などといった状況になってしまった場合、いっそのことCSSファイルを分離させてしまい、読み込むCSSファイルを変えてしまおうというものです。
はじめに
通常はhtml内のhead部分に、
<link rel="stylesheet" href="style.css" type="text/css" />
このように書いてcssファイルを読み込みます。
これを、IEというブラウザを条件対象にして
・条件に合致した場合読み込む
や
・条件に合致しなかった場合読み込む
といったことが出来ます。
今回は、条件に合致した場合の例を以下に幾つか紹介します。
例１：ブラウザがIEの場合（バージョン関係無し）、style_ie.cssを適用する
<!--[if IE]>
<link rel="stylesheet" href="style_ie.css" type="text/css" />
<![endif]-->
IEが5だろうと6だろうと7だろうと関係なく、IEだった場合にstyle_ie.cssを適用します。
例２：ブラウザがIE6未満の場合、style_ie5.cssを適用する
<!--[if lt IE 6.0]>
<link rel="stylesheet" href="style_ie5.css" type="text/css" />
<![endif]-->
if lt IE 6.0
のltは「未満」を表すそうです。
この場合IE4、5、5.5に対してstyle_ie5.cssを適用します。
例３：ブラウザがIE6以下の場合、style_ie6.cssを適用する
<!--[if lte IE 6.0]>
<link rel="stylesheet" href="style_ie6.css" type="text/css" />
<![endif]-->
if lte IE 6.0
のlteは「以下」を表すそうです。
この場合IE4、5、5.5、6に対してstyle_ie6.cssを適用します。
例４：ブラウザがIE6以上の場合、style_ie.cssを適用する
<!--[if gte IE 6.0]>
<link rel="stylesheet" href="style_ie.css" type="text/css" />
<![endif]-->
if gte IE 6.0
のgteは「以上」を表すそうです。
この場合IE6、7に対してstyle_ie.cssを適用します。
例５：ブラウザがIE5.0より新しいバージョンの場合、style_ie.cssを適用する
<!--[if gt IE 5.0]>
<link rel="stylesheet" href="style_ie.css" type="text/css" />
<![endif]-->
if gt IE 5.0
のgtは「より新しい」を表すそうです。
この場合IE5.5、6、7に対してstyle_ie.cssを適用します。
最後に
このような振り分けはCSSの読み込みだけでなく、HTMLの表示タグなどにも利用できるようなので、今までPHPで条件分岐していた部分でIEのバージョンに関する分岐はこれでできそうです。
条件に合致しない場合の記述方法もありますので興味のある方は参考文献をどうぞ。
参考文献：
CSS Hacks- The good, the bad, and the ugly- Conditional comments
条件付コメント(Conditional Comments)実験ページ
何かしら参考になりましたらクリックをよろしくお願いします
そういうことだったんですね…
だからトモヒロ様のブログは目が離せません。
ブラウザによる表示はミミオのようにサイト作りの素人にはとっても厄介な問題です。
最近ではグーグルも参入するからもう大変！
でもうちの社長は専門の人雇ってくれないし…
これからもトモヒロ様よろしくご指南ください！
いつもながら、とてもわかりやすく、深い説明。さすがですねぇ。
CSS HACK 私も苦労しています。
参考にさせていただきます。
いつもありがとうございます。
Google Chromeはどうなんでしょうね。
FirefoxのようにW3C準拠であれば問題ないんでしょうけど。。
>> metaboyさん
いつもありがとうございます。
本当はCSS HACKの説明も加えたかったのですが記事が長くなりすぎてしまいそうだったので今回はやめました＾＾；
補足ですが、gtはより新しいではなくて
Greater than なのでより値が大きい。という意味です。
ちなみにgeは greater or equal、ltが less than と…、確かFortranと一緒だったかと思いまふ。
はじめまして＾＾
補足ありがとうございました m(_ _)m
ご注意を。