2020年のブログ最終更新は12/23(水)の予定です

CSSハックを使おう

この記事は約2分で読めます。

以前 IE7のCSS対応,バグ,修正情報 を紹介しましたが
その際 IE は多くの擬似クラス(:forcus),擬似要素(:after,:before)に対応していないことをご紹介しました。

もちろんこれらの擬似クラス,擬似要素は
IE 以外の多くのブラウザ(Firefox,Opera,Safari等)が対応しているので
使わない手はありません。

しかし、擬似クラス,擬似要素で対応していないものは IE では無視されます。
この場合、IE だけ他のCSSを適用させたいと思う人が多いと思います。

これをするには次のような方法があります。

  1. 複数のCSSを用意しておき、ブラウザの毎に使うCSSを変える
  2. 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様)

私の備忘録ですが皆さんのお役に立てれば幸いです。

コメント

タイトルとURLをコピーしました