XSLTを読み込ませることでブラウザを判別して、ブラウザごとにCSSを読み込ませる方法がBrowser Detection with XSLTにて公開されています。


xslt


まず、Browser Detection with XSLTにて公開されているc-cond-html.xslをダウンロードして、以下の記述を先頭に記載します。


<xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="cond-css.xsl" type="text/xsl"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
	[<!ATTLIST link dr:select CDATA #IMPLIED><!ATTLIST style dr:select CDATA #IMPLIED>]>


次に、HTMLには以下のようにdr:select=”判別ブラウザ”の指定すればブラウザを判別することが出来ます。

<style type="text/css" dr:select="IE 6">div {background-color: #6666CC}</style>



複数指定も可能です。

<style type="text/css" dr:select="IE 6, FF 1">div {background-color: #6666CC}</style>


判別ブラウザに使用されている文字列は以下の文字列が使用可能です。
  • IE 6, IE
  • IE 7, IE
  • IE 8, IE
  • Firefox 1 (1.0+), FF 1, Firefox, Gecko 1.7, Mozilla 1.7, Camino 0.8, Camino, Netscape (7, 8 )
  • Firefox 2 (1.5+, 2.0+), FF 2, Firefox, Gecko 1.8, SeaMonkey 1, SeaMonkey, Camino 1, Camino, Epiphany 2.14, Epiphany 2.20, Epiphany, Flock (1.0.9, 1.1.2), K-Meleon (1.1.4), Kazehakase (0.4.3, 0.5.2), Netscape (9)
  • Firefox 3, FF 3, Firefox, Gecko 1.9, SeaMonkey 2, SeaMonkey, Camino 2, Camino, Epiphany 2.22, Epiphany, Minefield (3.0) Safari 1 (1.3+), Safari 2 (2.0.2+), Safari
  • Safari 3, Safari
  • Opera 9, Opera
  • Opera 9.50, Opera
  • X-Smiles
  • Unknown browser
  • Error: no XSL-transformation!

以上で、ブラウザごとに読み込むCSSを変更することができます。


すばらしい！非常に簡単ですね。


ブラウザを判別して個別にCSSを読み込ませる - Browser Detection with XSLT