@cc規則でIEとその他のユーザーエージェントのCSSを振り分ける

IEとその他のユーザーエージェントで異なるCSSの規則を適用させるためには、IEの独自仕様である条件付きコメントを利用する方法、CSSのバグや実装状況を逆手にとった方法、サーバサイドで処理する方法など多くの方法がありますが、記述がシンプルな@cc規則を利用する例について紹介します。

@cc規則はIEの独自仕様で、IEやその他のユーザーエージェント、IEのバージョンによって適用させたいCSSの規則集合を分岐させるために使います。@cc規則は次のように記述します。

@cc 条件
{
  規則集合
}

または、次のようにbeginとendを使用して記述します。

@cc 条件 begin;
規則集合
@cc end;

前者の記述方法は、IE以外のユーザーエージェントで不具合が起きる可能性もあるため、後者の記述方法が安全です。条件にはIEの条件付きコメントと同じものが利用できます。例えば、body要素の背景色をIE6以下では赤色、IE7以上では青色、IE以外では緑色にする場合、CSSは次のように記述します。

/* IE 6以下 */
@cc lte IE 6 begin;
body
{
  color: red;
}
@cc end;

/* IE 7以上 */
@cc gte IE 7 begin;
body
{
  color: blue;
}
@cc end;

/* IE以外 */
@cc !IE begin;
body
{
  color: green;
}
@cc end;

IE以外のユーザーエージェントでは@cc規則は無視されます。CSSの規則集合は、そのspecificityが同じ場合には原則として後から読み込まれたものが優先されるので、IE以外のユーザーエージェント用の規則集合は一番最後に記述するようにします。@import規則を併用して、読み込むCSSをIEとその他のユーザーエージェントで振り分けるようにするとよりシンプルになるでしょう。

これはAbout Conditional CommentsのCommunity Contentで提案されていた方法ですが、あくまでも提案ということなので実際には機能しません。IEを排除するには未対応のセレクタを使うのが一番スマートで安全です。