CSSハックについて

Web制作に役立つCSSハックの主要的なものを書き記しておきます。

Windows版 InternetExplorer5.0用ハック
スタイルシート内で、

@media tty {
  i{content:"\";/*" "*/}}; @import 'win-ie50.css'; {;}/*";}
}/* */
この場合、win-ie50.cssというファイルを別に用意し、そのファイルはInternetExplorer5.0だけが読み込むようになる。
つまり、InternetExplorer5.0で表示が崩れている部分は、このファイルにCSSを書き込んで修正すれば良い。
しかし、InternetExplorer5.0だけでなくInternetExplorer5.5も同じように表示がすれている場合は下記のハックでまとめて修正したほうが効率的である。
Windows版 InternetExplorer5.0、InternetExplorer5.5用ハック
スタイルシート内で、

@media tty {
 i{content:"\";/*" "*/}} @import 'win-ie5x.css'; /*";}
}/* */
この場合、win-ie5x.cssというファイルを別に用意し、そのファイルはInternetExplorer5.0とInternetExplorer5.5だけが読み込むようになる。
つまり、InternetExplorer5.0とInternetExplorer5.5で同じように表示が崩れている部分は、このファイルにCSSを書き込んでまとめて修正すればよい。
しかし、InternetExplorer5シリーズだけでなくInternetExplorer6も同じように表示がすれている場合は下記のハックでまとめて修正したほうが効率的である。
Windows版 InternetExplorer5.0 ~ InternetExplorer6用ハック
* html (例:p{ font-weight : bold; })
InternetExplorer5シリーズとInternetExplorer6で同じように表示が崩れている場合は、上の記述のように* htmlをCSSのセレクタの前に記述する。
これはスターハックと呼ばれる方法であるが、このように記述されたCSSはInternetExplorer5シリーズとInternetExplorer6だけで適用される。
Windows版 InternetExplorer7用ハック
*+html (例:p{ font-weight : bold; })
InternetExplorer7で表示が崩れている場合には、上の記述のように*+htmlをCSSのセレクタの前に記述する。
このように記述されたCSSはInternetExplorer7だけで適用される。
Mac版 InternetExplorer5用ハック
スタイルシート内で、

/*\*//*/
  @import "mac-ie5x.css";
/**/
この場合、mac-ie5x.cssというファイルを別に用意し、そのファイルはMac版 InternetExplorer5だけが読み込むようになる。
つまり、Mac版 InternetExplorer5で表示が崩れている部分は、このファイルにCSSを書き込んで修正すれば良い。

これら以外にも多くのハックが存在しますが、実務上はこれらのハックの使用だけで各ブラウザとも表示に問題ないと思います。

しかしハックを使う以前に大事なことは、元になるCSSが正しく的確に記述されていることが重要です。
Web標準に準拠しているブラウザで表示に崩れがないことをきちんと確認し、その後にハックを使うべきです。

その場合、Web標準に準拠している度合いの高いSafariOperaFirefoxChromeのようなブラウザで、表示に崩れがないようにページを制作することを最優先してください。
ハックを使うのはあくまでも最後の緊急手段ということです。

【2008年に執筆】

サポートBBS

サイト内を検索
サイト運用事例
ダウンロード

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+