CSSハック

最近では必要なくなってきているので出番は少ない。
そのため古いサイトで残っていたりするとどんな意味があるのか思い出せない……。

現代的

:root擬似クラスハック

下記の場合、IE8以下では赤くなる。

p{color:red;}
:root p{color:blue;}

まだ稀に見かける記述

バックスラッシュ9ハック

IE8以下に効く。として紹介している事が多いが実際にはIE10以下に効く。
IE8以下だけに効かせたい場合は :root擬似クラスハック を使う。
Sass環境でも使える。

p{
margin:10px\9;
}

IE7 スターハック

IE7以下に効く。Sass環境でも使える。

p{
*zoom:1;
}

inline-blockをIE7でも使うための記述。

html p{
display:inline-block;*display:inline;*zoom:1;
}

もうあまり使わない記述

ハッシュハック

IE7以下に効く

p{
#margin:10px;
}

スラッシュハック

IE6,7に効く。Sass環境ではエラーになるのでIE7 スターハックで代用したほうがいい。

p{
/zoom:1;
}

IE6 スターハック

IE6以下に効く。Sass環境でも使える。

* html p{
margin:10px;
}

アンダースコアハック

IE6のみに効く。Sass環境でも使える。

p{
_margin:10px;
}

ボックスモデルハックもどき?

IE6(IE5.5?)以下以外に効く
古いサイトにまだ残っていたりする……
この記述を消すならf\ont-sizeの値をfont-sizeに移動する

p{
font-size:small;
f\ont-size:medium;
}

@importハック

Sass環境では使えない。

@import import.css; /* IE4を除外 */

コンディショナルコメント(も便利だよ)

ハックじゃないけどたまに使う。
たとえばFacebookのパーツはIE7以下に対応していないので下記のように囲む。

<!--[if (gte IE 8)|!(IE)]>
FacebookLikeボタン
<![endif]-->

「gte IE 8」=「IE8以上なら表示」

参考


最終更新: 2017-10-15 (日) 22:57:02