BOOKS
by Sukeharu Kano / 狩野祐東 著書

意外と知らないCSSカスケード(3)!importantキーワード

2013-06-07

前回前々回に引き続き、カスケード順序を取り上げます。CSSには!importantキーワードというものがあり、値にこれがあるプロパティは優先して適用されます。

スラスラわかるHTML&CSSのきほん』p.101〜106、p.183〜186

!importantキーワード

 値に!importantが含まれるプロパティはそれが優先して適用されます。たとえば次のようなルールを記述すると、通常であれば3行目の宣言が適用されることになりますが、!importantが含まれている2行目の宣言が適用されます。

 !importantキーワードはプロパティの値として記述します。どんなプロパティに対しても適用できます。
 !importantは極めて効力が強く、カスケード順序で圧倒的に高い優先順位を持つタグのstyle属性で定義したプロパティでさえ上書きできます。違う見方をすれば、いったん!importantを使ってしまうと、そのプロパティの値を書き替えるのは非常に難しくなります。!importantの使用には注意が必要です。

ハックというテクニックがある

 古いブラウザ(おもにIE6、IE7)にだけ適用させたいスタイルがあるときに、そのブラウザのバグを利用して半分インチキ的にCSSを適用させることがあります。こうしたテクニックは「ハック」と呼ばれます。有名なハックが何種類かありますが、そのうちのひとつは!importantキーワードを使うものです(ハックについては@ITの記事を参照)。
 過去にハックは多用されていましたが、「バグを利用する」という性格上、ブラウザベンダーがバグを直してしまえば通用しなくなります。当然ながらあまり安定したテクニックとはいえず、現在はあまり使われていません。参考までに、上記@ITの記事では比較的新しいブラウザに対応するためのハックの仕方も書いてありますが、現在ではまず使いませんし、私も薦めません。IE6、7など相当古いブラウザはまだともかく、新しいブラウザにハックを仕掛けなければならない事態に陥った場合、それはそもそも自分が書いたHTML/CSSのソースが良くないからだと考えましょう。まずハックすべき、バグフィックスすべきは自分です。