こんにちは、さち です！
今回は最近私がお勉強した
ブラウザごとに異なるCSSを適用する方法（CSSハック）についてまとめようと思います。
CSSハックについては以前の記事の「CSSを使おう」でも紹介していますが
前回の方法では Opera だけ別のCSSを適用するということができませんでした。
今回はOperaを含めたCSSハックの方法について書いていこうと思います！
実際に IE, Firefox Opera, Safari のそれぞれのブラウザごとに違うCSSを適用するには
次のようにCSSを記述します。
/* 1. IE, Firefox, Opera, Safari に適用 */
.class {
width: 297px;
height: 100px;
background-image: url(//xxx.com/IE_logo.png);
background-repeat: no-repeat;
}
/* 2. Firefox, Opera, Safari に適用 */
html>/**/body .class {
background-image: url(//xxx.com/Firefox_logo.png);
}
/* 3. Opera, Safari に適用 */
body:first-of-type .class {
background-image: url(//xxx.com/Opera_logo.png);
}
/* 4. Safari に適用 */
html:not(:only-child:only-child) .class {
background-image: url(//xxx.com/Safari_logo.png);
}
実際に上のようなCSS（一部サイトに合わせて変更しています）を機能させると次のようになります。
（今閲覧に使用しているブラウザ名が枠内に表示されていると思います）
※ Firefox 3.5 になってから3のCSSハックを適用するようになってしまったようです。
やっていることは 「1.」 で指定したCSSを
「2.」「3.」「4.」 でどんどん上書きしていくという感じです。
「1.」 でまず全てのブラウザに有効なCSSを記述します。
「2.」 でCSSハックを使い IE以外 のブラウザに有効なCSSを記述するため
事実上 「1.」 が IE用 のCSSの記述となります。
同様に 「3.」 でCSSハックを使い Opera, Safari にのみ有効なCSSを記述するため
事実上 「2.」 が Firefox用 のCSSの記述となります。
さらに 「4.」 でCSSハックを使い Safari にのみ有効なCSSを記述するため
事実上 「3.」 が Opera用 のCSSの記述となり
同時に 「4.」 が Safari用 のCSSの記述となります。
簡単にまとめると
「1.」 … IE用 のCSS
「2.」 … Firefox用 のCSS
「3.」 … Opera用 のCSS
「4.」 … Safari用 のCSS
ということになります。
ちなみに指定した「プロパティ」と「値」のみが上書きされるので
「1.」 で指定した 「background-repeat」「width」「height」は
「2.」「3.」「4.」 の記述を行っても効果は消えることなく働き続けます。
つまり 「background-repeat」「width」「height」はすべてのブラウザで有効です。
今回の記事を作成するにあたり下記サイト様を参考にさせて頂きました。
本当にありがとうございました。
→ CSSハックまとめ［2008年7月版］ （HiGash.Net 様）
→ いまさら聞けないCSSハック （WEBHACKr 様）
コメント