CSSの使い分け その2

ブラウザやそのバージョンごとにCSSを使い分ける方法は?

Javascriptを使う以外に、CSSの記述でも使い分けができます。

十分にCSSに対応していないブラウザには、あえてCSSを適用しないという選択肢もあります。

CSSは、Webページの外観を指定しますが、ブラウザの種類やバージョンによっては、規格通り表示されないことが多々あります。特にInternet Explorerのバージョン5以前の古いブラウザでは、CSSの一部しか対応していなかったり、対応していても規格通りの表示にはならない場合があります。

Javascriptを利用して、ブラウザの種類やバージョンごとに読み込ませるCSSファイルを変えることもできますが、CSSを利用して特定のブラウザやそのバージョンごとに特定の指定だけを読み込ませたり、逆に読み込ませないようにしたりできます。この、CSSを利用してブラウザごとに対応させることをCSSハックと言います。

CSSハックは、ブラウザの進化に合わせて様々なものが開発されてきました。便利なものではありますが、多用すると本来のデザインの指定がわかりづらくなってしまいますし、メンテナンスも大変です。

CSSハックは裏技?

CSSハックの多くは、ブラウザのCSSに対する不具合を逆利用しています。

たとえば、Internet Explorerの後方互換モードではwidthの内側にpaddingの値を指定してしまいます。
しかし、Internet Explorerは_widthとプロパティの前に_(アンダースコア)を付けてもプロパティとして解釈するので、他のブラウザと同じ幅で表示させるために、始めにwidthプロパティで正しい値を指定して、続けて_widthでInternet Explorerの後方互換モード用の値を指定するといったCSSハックもあります。

カテゴリー: CSS, HTMLの基礎知識, ナレッジノート   パーマリンク