ピクスログ

Webデザインをやっていく中で各種のブラウザの仕様やバグのために表示がずれたりすることがあります。

その差分を吸収するために、あれこれ悩んだり、逆に仕様やバグを利用することでデザインを調整する場合がありますが、そういった手法「CSSハック」を紹介しているサイトをまとめて見ました。

CSSハックは個人的にはあまり好きでないんですが、使わないと不便な場合も多いので・・・。

というわけで以下、CSSハックを紹介してくれているサイトの記事です。

IE7 を含むモダンブラウザ向けの CSS ハックまとめ

簡易なサンプルもあり判りやすくまとめてくれています。

コメント欄の下の方にもありますが、IE７のサンプルの「*+html body」で記載されている方法は、現在ではベターな方法で無いので注意してください。

小粋空間- IE7 の CSS ハック

IE7向けのCSSハックがメインに紹介されています。
・・・すでにたどり着いている人も多いでしょうけど(^^;

CSSハック – BLOG × WORLD ENDING

CSS Validatorに通るかどうかまで書いてくれるので、個人的には一番お勧めかも。

あんまり使用したくないアンダースコアハックの対応方法も紹介してあるので一読の価値はあります。

良いハック・悪いハック – Web標準Blog – ミツエーリンクス

CSSハックを使用するに当たって良いもの、悪いものが紹介されています。

IEBlog – Call to action- The demise of CSS hacks and broken pagesや、Good CSS Hack – css-discussで紹介されているものの和訳のようですが、Good CSS Hackに関して方法は、ともかくCSSの可読性を損ないそうなので出来れば使いたくないです。

/* Mac IE /*/
* html h1 {
    color:#000;
}
/* */
とかMac IE用ハックはMTでも使われている有名どころですが、一つ一つ見ていくと改めてその多さが・・・。

いろいろ差分を埋めるための方法はありますが、やはりバグや特定ブラウザの仕様によるものなので、出来る限り頼りたくは無いのですが・・・。

本当はこんなことを考えずにデザインを楽しめればいいんですが・・・。
とっとと各ブラウザの表示を揃えてくれ～