以前 IE7のCSS対応,バグ,修正情報 を紹介しましたが
その際 IE は多くの擬似クラス(:forcus),擬似要素(:after,:before)に対応していないことをご紹介しました。
もちろんこれらの擬似クラス,擬似要素は
IE 以外の多くのブラウザ(Firefox,Opera,Safari等)が対応しているので
使わない手はありません。
しかし、擬似クラス,擬似要素で対応していないものは IE では無視されます。
この場合、IE だけ他のCSSを適用させたいと思う人が多いと思います。
これをするには次のような方法があります。
- 複数のCSSを用意しておき、ブラウザの毎に使うCSSを変える
- CSSハックを使う
「1.」 はプログラムを使って自動的に使うCSSを振り分けることになるので
プログラムの知識がないとちょっと難しいです。
「2.」 はCSSに少し工夫を加えるだけなので比較的簡単にできます。
今回は、「2.」 を使ったCSSの振り分けの方法について書いていこうと思います。
(自分の備忘録ですが…orz)
次のような CSSハック がとても分かりやすく紹介されています。
- IE6以下のみ特定のCSSを適用
- IE6のみ特定のCSSを除外
- IE7のみ特定のCSSを適用
- IE7とモダンブラウザのみ特定のCSSを適用
- IE7を除くモダンブラウザに特定のCSSを適用
- safariのみ特定のCSSを適用
- XHTML側の指定
- clearfix(空divでのclear: bothの代用)
→ CSSハック一覧(HTML│CSSタグ辞書)
→ HTML│CSSタグ辞書 トップページ
私がよく使う CSSハック はこれです。
IE7 を 除くモダンブラウザ(Firefox, Safari, Opera等) に特定のCSSを適用(IE6にも適用されません)
セレクタの前に【html>/**/body 】をつけると、IE7を除いたモダンブラウザに適用される。
html>/**/body .class_name { color:#ff0000; }
こちらのページでもさまざまな CSSハック が紹介されています。
→ 正式版完全対応! Internet Explorer 7 CSS攻略法 - CSSハック一覧(マイコミジャーナル様)
こちらでも高度な CSSハック が紹介されています。
紹介ページは日本語ですが
実際のCSSの解説のページは英語ですので英語分かる方にどうぞ!(私は英語できないです…)
→よく使われているCSSハック12選(IDEA*IDEA様)
私の備忘録ですが皆さんのお役に立てれば幸いです。
コメント