CSS Radar

コンディショナルコメント

すでに承知の通り、IE7ではそれまで利用できたIEのCSSの読み込み(パース)バグによるCSSハックを台無しにしてくれた。

例えば、アンダースコア(_)ハック、ハイフン(-)ハック、voice-familyハック、バックスラッシュ(/)ハック、スターHTMLハック(* html)など、様々なハックが利用できなくなった。

マイクロソフトはこれらハックの使用を抑制し、その代わりにコンディショナルコメントの使用を推奨している。
コンディショナルコメントはIEでのみパースされるコメントで、IE5以上であれば動作する。

コンディショナルコメントとは

<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

というようなコメントを指す。
上記のコードだと、もしIEであれば、iecss.cssをロードするという命令になる。

もちろんHTMLのコメントであるため、CSS文書内では利用できない。
つまり、IE7に対して何らかのCSSハックを行う場合は、別のCSSを用意しなければならない。

先ほどの例だとIEに対して全て、という命令になるがIE7だけに限定したい場合は、

<!--[if IE7 ]>
  <link href="iecss7.css" rel="stylesheet" type="text/css">
<![endif]-->

とすればいい。

IE5〜IE６まではiecss5-6.cssを、IE7はiecss6.cssを読み込みたいという場合は

<!--[if lte IE 6]>
  <link href="iecss5-6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if lte IE 7]>
  <link href="iecss7.css" rel="stylesheet" type="text/css">
<![endif]-->

とすればいい。
[if lte IE 6]は、IE6未満に対して〜という意味だ。lteはLess Than or Equalの略。

ちなみに

<!--[if (IE 5)|(IE 5.5)|(IE 6)]>
  <link href="iecss5-6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if lte IE 7]>
  <link href="iecss7.css" rel="stylesheet" type="text/css">
<![endif]-->

というようにしても同じ意味だ。若干面倒なので、普段はこんなことはする必要はないだろう。
｜はORという意味だ。

ほかにも、

• gte(greater-than or equalの略、以上か同じ場合という意)
• !(Notオペレーター、でない場合という意)

というオペレーターも存在する。

実はIE7だけをターゲットにするCSSハックも存在するが、どのハックもCSSバリデートしない。
例えば、

>body {}

はIE7のみをターゲットにできるし、

html* {}

ならIE7未満すべてをターゲットできる。

はたまた

*:first-child+html {}

というのもIE7のみで、

*:first-child+html {} * html {}

ならIE7未満すべて。

もちろん、IE8になったときにこれらハックが通用するかどうかは定かではない。
IE7のデビュー時にそれまで様々利用してきたハック達を修正するのに苦労した私はマイクロソフトの推奨に準拠して、コンディショナルコメントを利用することをオススメする。