条件付きコメントを使用すると、ブラウザ固有のCSSルールでInternet Explorerをターゲットにすることが簡単にできます。
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
時々、Geckoエンジン(Firefox)が誤動作することがあります。**つまり、Internet Explorer は Firefox 専用のルールを無視するだけでなく、WebKit や Opera も無視する必要があります。
Note: 私は'クリーンなソリューションを探しています。JavaScriptのブラウザスニファを使ってHTMLに 'firefox'クラスを追加するのは、私の意見ではクリーンとは言えません。むしろ、条件付きコメントがIEだけに 'special'なのと同じように、ブラウザの機能に依存するものが欲しいです。
まず最初に、免責事項です。私は、以下に紹介する解決策を本気で提唱しているわけではありません。私が書いているブラウザ固有のCSSはIE(特にIE6)用のものだけですが、そうでなければいいなと思っています。
さて、その解決策ですがエレガントであることを求められたので、どの程度エレガントなのかはわかりませんが、Geckoプラットフォームのみを対象とすることは確かです。
このトリックは、JavaScriptが有効な場合にのみ動作し、Firefoxやその他のGeckoベースの製品で内部的に多用されているMozilla bindings(XBL)を利用しています。比較のために、これは IE の behavior CSS プロパティのようなものですが、はるかに強力です。
私のソリューションには3つのファイルが関係しています。
ff.html (英語)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
-moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
ff.xml
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="load-mozilla-css">
<implementation>
<constructor>
<![CDATA[
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "ff.css");
document.getElementsByTagName("head")[0]
.appendChild(link);
]]>
</constructor>
</implementation>
</binding>
</bindings>
ff.css
h1 {
color: red;
}
Update: 上記の解決策はあまりよくありません。新しいLINK要素を追加する代わりに、BODY要素にその "firefox"クラスを追加することができれば、より良いでしょう。これは、上記のJSを以下のように置き換えるだけで可能です。
this.className += " firefox";
**この解決策は、Dean Edwards' moz-behaviorsにヒントを得ています。
あなたのアイデアのバリエーションとしては、「サーバー側のユーザーエージェント検出器」を用意して、どのスタイルシートをページに添付するかを判断するというものがあります。 この方法では、firefox.css, ie.css, opera.css, etc
を持つことができます。
**同じようなことをJavascript自体で実現することもできますが、クリーンとは言えないかもしれません。
私は同じようなことを、default.css
にすべての一般的なスタイルを含ませ、その上に特定のスタイルシート
を追加して、デフォルトを上書きしたり、強化したりすることで行っています。