意外と知らないCSSカスケード(3)!importantキーワード
- 2013-06-07
- スラスラわかるHTML&CSSのきほん
- css
前回、前々回に引き続き、カスケード順序を取り上げます。CSSには!important
キーワードというものがあり、値にこれがあるプロパティは優先して適用されます。
『スラスラわかるHTML&CSSのきほん』p.101〜106、p.183〜186
値に!important
が含まれるプロパティはそれが優先して適用されます。たとえば次のようなルールを記述すると、通常であれば3行目の宣言が適用されることになりますが、!important
が含まれている2行目の宣言が適用されます。
!important
キーワードはプロパティの値として記述します。どんなプロパティに対しても適用できます。
!important
は極めて効力が強く、カスケード順序で圧倒的に高い優先順位を持つタグのstyle属性で定義したプロパティでさえ上書きできます。違う見方をすれば、いったん!important
を使ってしまうと、そのプロパティの値を書き替えるのは非常に難しくなります。!important
の使用には注意が必要です。
古いブラウザ(おもにIE6、IE7)にだけ適用させたいスタイルがあるときに、そのブラウザのバグを利用して半分インチキ的にCSSを適用させることがあります。こうしたテクニックは「ハック」と呼ばれます。有名なハックが何種類かありますが、そのうちのひとつは!importantキーワードを使うものです(ハックについては@ITの記事を参照)。
過去にハックは多用されていましたが、「バグを利用する」という性格上、ブラウザベンダーがバグを直してしまえば通用しなくなります。当然ながらあまり安定したテクニックとはいえず、現在はあまり使われていません。参考までに、上記@ITの記事では比較的新しいブラウザに対応するためのハックの仕方も書いてありますが、現在ではまず使いませんし、私も薦めません。IE6、7など相当古いブラウザはまだともかく、新しいブラウザにハックを仕掛けなければならない事態に陥った場合、それはそもそも自分が書いたHTML/CSSのソースが良くないからだと考えましょう。まずハックすべき、バグフィックスすべきは自分です。