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

Sponsored Link

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

Sponsored Link

そんな中で、一番のネックになるのが、全てのブラウザは必ずしも正しい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を入れています。
外のブラウザやバージョンに合わせたい方は、以下の通り。

⇒ネスケ4除外
———————————————————
import.cssの中身
@import “style.css”;⇒ネスケ4除外
———————————————————




ここで問題になるのが、IE7をインストールすると、IE6の環境が分からなくなるという事です。
しかし、IE6とIE7を共存させる方法があります。

IE6とIE7を共存させる方法は以下のサイトで説明されています。

a++ My RSS 管理人ブログ
小粋空間

Sponsored Link
Sponsored Link