CSS ハック

Ineternet Explorer や Google Chrome などのブラウザごとに異なる CSS の実装やバグなどに対応するためのテクニックを紹介します。

アンダースコアーハック

Internet Explorer にはプロパティの前にアンダースコア (_) を入れても、指定した値が適用されるバグがあります。そこで、IE のみに適用する値をアンダースコアを前に入れたプロパティで指定することで IE のバグを回避することができます。次のコードでは、IE 以外のブラウザでは color: #FFFFFF が、IE6 では color: #000000 が適用されます。

.ExampleClass {
    color: #FFFFFF;
    _color: #000000;
}

!important ハック

スタイルはタグやクラス、ID などを識別して適用されます。スタイルを重複して指定すると、タグよりもクラス、クラスよりも ID が優先されます。また、CSS ブロックや外部 CSS ファイルを使用した場合は、より下に記述したスタイルが優先されます。次のコードの場合、より下に記述した color: #000000 が適用されます。

.ExampleClass {
    color: #FFFFFF;
    color: #000000;
}

しかし、!important をスタイルの値の後ろに記述することで、その値を最優先して適用することができます。次のコードの場合、color: #000000 は打ち消されて color: #FFFFFF が適用されます。

.ExampleClass {
    color: #FFFFFF !important;
    color: #000000;
}

!important ハックとは

!important によって最優先させる値をコントロールできますが、Internet Explorer 6.0 以下は正しく処理しません。そこで、IE6以外に適用する値に !important を追記し、IE6のみに適用する値を下に記述することで IE6 のバグを回避することができます。次のコードでは、IE6 以外のブラウザでは color: #FFFFFF が、IE6 では color: #000000 が適用されます。

.ExampleClass {
    color: #FFFFFF !important;
    color: #000000;
}