CSSハックについて

CSS on ,

たまに検証などで古いブラウザを使ったときに、
昔作ったサイトを見てみると、ちゃんと表示されていない事があります。
これはIE6などでよく見られブラウザのバグがほとんどの原因です。
いくつか例をあげますと、

・floatプロパティに指定した値と同じ方向にmarginプロパティの指定をするとmarginが2倍になってしまう。
・ボックスの幅や高さを算出するときにpaddingやborderのサイズを含めてしまう。
・左右borderとpaddingを設置した要素に後続する部分がずれる。
・ブロック要素にinline-blockが効かない。

などなど、本当にIE6はバグ多いです・・・

最近では作成の際に考慮して作るので、あまり使わなくなりましたが忘れないように。
この回避方法はCSSハックという手法で、特定のブラウザに対してだけCSSを適用させる時に使います。
実際、使用したケースではIEのverによってのバグ崩れが多かったので、
今回は数あるCSSハックの中から、主にIE用のハックを紹介します。

■IE7ハック
IE7のみにスタイルを適用するハック。
対応させたいセレクタの前に「*:first-child+html」を付ける。

例:
*:first-child+html p { color:#FF0000; }

■スターハック
IE4~6、MacIE4~5のみにスタイルを適用するハック。
対応させたいセレクタの前に「* html」を付ける。

例:
* html p { color:#FF0000; }

■スター7ハック
IE5.5~6、MacIE5のみにスタイルを適用するハック。
対応させたいセレクタの前に「html*」を付ける。

例:
html* p { color:#FF0000; }

■Hollyハック(バックスラッシュハック)
MacIE5のみにスタイルを適用するハック。
対応させたいスタイルを「/* ここからMacIE5のみ \*//*/ 」このコメント形式で囲む。
文字コードがShift JISの際にはバックスラッシュの代わりに「」を利用する。

例:
/* ここからMacIE5のみ \*//*/
p { color:#FF0000; }
/* MacIE5のみここまで */

■アンダースコアハック
IE4~6のみにスタイルを適用するハック。
対応させたいプロパティの前に「_」を付ける。

例:
p {_color:#FF0000; }

MacIEは需要が少ないので、IE6専用にアンダースコアハックをよく使っていました。
他にも「ハッシュハック」やNetscape用の「Caioハック」、Safari用の「Safariハック」など沢山あります。

CSSハックはバグによるレイアウト崩れを調整するのにも使いますが、
逆に「ブラウザによって表示方法や色を変えて見せたい!」なんて時にも利用できるので、
興味のある人は是非使ってみてください!ノシ

コメントを残す