IE6やIE7、IE8といった特定のブラウザに対しては別途CSSやJavaScriptを提供するというのは多くのWebデベロッパやWebデザイナが経験している作業だろう。通常はコンディッショナルコメントを使ってそれぞれのIEに対して調整されたCSSを提供している。

IE10からはこのコンディッショナルコメントが提供されていない。標準規約に準拠しており、ブラウザの切り分け対象となる必要がないためだ。ブラウザが提供しているスタイルの機能を特定して、それに対してスタイルを提供する「フィーチャーディテクション」の手法を使うことが推奨される。

しかし、IE10と明確に切り分けてスタイルシートを提供したいこともあるかもしれない。そういった場合に便利な方法がCSS Tricksに記事「IE 10 Specific Styles」として掲載されている。

紹介されている方法は次のとおり。まず、JavaScript経由でhtml要素にユーザエージェント文字列を属性値として設定する。

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

このコードが実行されると、html要素には次のような属性が付加される。

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

このため、次のように指定すればIE10にのみ適用されるようにスタイルを記述できることになる。

html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

「IE 10 Specific Styles」の記事にはこの切り分けが追加されており、IE10で閲覧した場合とほかのブラウザで閲覧した場合とで、テキストが青で表示されるか黒で表示されるかが変わるようになっている。

IE10で閲覧した場合

Safari 6で閲覧した場合