CSSハックについて

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

このページの内容は2008年に書いたものなので、2019年現在となっては古いものとなります。
ですので、これらのCSSハックを使うことは現在はほぼないでしょう。

昔のブラウザは現在のブラウザのようにレンダリングが統一されていなかったので(特にIE)、ブラウザによる表示の差異が大きく、このような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ハックのまとめ

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

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

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