ブラウザ別にCSSを条件分岐させる方法

現在、サイトをXHTML+CSSで構成していくことが主流になりつつあります。

そんな中で、一番のネックになるのが、全てのブラウザは必ずしも正しいCSSを読み込んでくれないということ、つまりバグのないブラウザはないということです。

やっと統一されつつあるものの、ブラウザ独自のものもあって、WEBサイトを構築していく者は、ここに泣かされます。

本来なら、古いブラウザ環境なんか知った事ではない！と思いたいのですが、ユーザビリティーの視点からいくとやはりどのブラウザから見ても、きれいなサイトを表示しないと…と思うのです。

このサイトでも、IE7が出た時点で、IE6は捨てました。
しかし、アクセス解析を見ると、IE6を使っている人がまだ多いのです。

IE6
Firefox
IE7
safari
の順番です。
Macの環境は、家にはないので対応することができませんが…。

そして、それを基本として、IE6用とIE7用のブラウザ環境に合わせたスタイルシートを作成します。
基本のCSSファイルを⇒style.css
style.cssを複製してIE6用のCSSを⇒ie6.css
style.cssを複製してIE7用のCSSを⇒ie7.css
として作成し、ie6.cssはIE6のブラウザ環境でスタイルが崩れている箇所を修正する。
同じく、ie7.cssはIE7のブラウザ環境でスタイルが崩れている箇所を修正。

そして、METAタグに、基本となるCSSをリンクする。

次にIE7用とIE6用のスタイルシートをリンクする。

これで、ブラウザ別にスタイルシートが読み込まれるようになります。
ただし、スタイルが適用されるものの、IE6で見た場合、と画面上に出てしまいます。

私は、基本CSSとIE6用のCSSを入れています。
外のブラウザやバージョンに合わせたい方は、以下の通り。