2008年10月07日

IEでのブラウザ判定機能 - HTMLでIF文が使える?

いつの間にかCSS HACK(ハック)という言葉をよく聞くようになっていました。
初めて聞いたときは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というブラウザを条件対象にして

条件に合致した場合読み込む

条件に合致しなかった場合読み込む

といったことが出来ます。

今回は、条件に合致した場合の例を以下に幾つか紹介します。


例1:ブラウザが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を適用します。


例2:ブラウザが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を適用します。


例3:ブラウザが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を適用します。


例4:ブラウザが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を適用します。


例5:ブラウザが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)実験ページ

何かしら参考になりましたらクリックをよろしくお願いします
にほんブログ村 IT技術ブログへ   人気ブログランキング    
タグ:CSS IE ブラウザ
この記事へのコメント
こんばんは!ミミオでございます。

そういうことだったんですね…
だからトモヒロ様のブログは目が離せません。

ブラウザによる表示はミミオのようにサイト作りの素人にはとっても厄介な問題です。

最近ではグーグルも参入するからもう大変!
でもうちの社長は専門の人雇ってくれないし…

これからもトモヒロ様よろしくご指南ください!
Posted by ミミオ at 2008年10月07日
さきほどは来ていただき、コメントありがとうございました。
いつもながら、とてもわかりやすく、深い説明。さすがですねぇ。
CSS HACK 私も苦労しています。
参考にさせていただきます。
Posted by metaboy at 2008年10月07日
>> ミミオさん
いつもありがとうございます。
Google Chromeはどうなんでしょうね。
FirefoxのようにW3C準拠であれば問題ないんでしょうけど。。

>> metaboyさん
いつもありがとうございます。
本当はCSS HACKの説明も加えたかったのですが記事が長くなりすぎてしまいそうだったので今回はやめました^^;
Posted by トモヒロ at 2008年10月08日
こにちは。
補足ですが、gtはより新しいではなくて
Greater than なのでより値が大きい。という意味です。
ちなみにgeは greater or equal、ltが less than と…、確かFortranと一緒だったかと思いまふ。
Posted by 黒翼猫 at 2008年12月21日
>> 黒翼猫さん
はじめまして^^
補足ありがとうございました m(_ _)m
Posted by トモヒロ at 2008年12月22日
IE10では廃止されております。
ご注意を。
Posted by 通りすがり at 2013年03月04日
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/107726070

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。