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

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

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

@cc 条件
{
  規則集合
}

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

@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で提案されていた方法ですが、あくまでも提案ということなので実際には機能しません。面白い提案だとは思いますが、これが実装されたらと思うと気持ち悪いですね。Proposal of CSS CCとあるのに気づかず、試してくやしい思いをしたのでおすそわけします。

今のところ、IEを排除するには未対応のセレクタを使うのが一番スマートで安全かなと思ってます。

コメント (2)

  • kino
  • 2008-01-20 15:59

木下です。

動的処理の出来ないサイトの場合は別として動的にアクセスのあったブラウザを判断することができるCMSの場合、ブラウザ毎にCSSファイルを別けてブラウザ依存のCSSを最後に読み込むようにするのではいけないのでしょうか?

ブラウザ(IE)によってCSSを振り分ける場合の確実性は、

静的(条件付きコメント>CSS)>動的(サーバサイド>クライアントサイド)

と思いますが、条件付きコメントは(X)HTMLを汚すのがいやなのでCSSを使った方法をよく使ってます。

バグ対策目的での動的な出力は、ユーザ環境に依存したり、間接的なアクセス(プロキシとかクローラとか)やオフラインでの閲覧などで問題がでる可能性が思い浮かぶので、自分は必要なとき以外は避けてたりします(^^;

装飾やアクセシビリティの強化、多言語対応などの目的では、CMSなどによる動的な振り分けが活躍しそうですよね :D

コメントフォーム

トラックバック (0)

この記事へのトラックバックはまだありません。

この記事のトラックバックURI
http://dxd8.com/archives/33/trackback/
この記事のURI
http://dxd8.com/archives/33/