Zuallererst ein Haftungsausschluss. Ich befürworte die Lösung, die ich im Folgenden vorstelle, nicht wirklich. Die einzige Browser-spezifische CSS schreibe ich ist für IE (insbesondere IE6), obwohl ich wünschte, es wäre nicht der Fall.
Und nun die Lösung. Sie wollten, dass sie elegant ist, also weiß ich nicht, wie elegant sie ist, aber sie wird sicher nur auf Gecko-Plattformen abzielen.
Der Trick funktioniert nur, wenn JavaScript aktiviert ist und Mozilla-Bindungen verwendet werden ( XBL ), die intern in Firefox und allen anderen Gecko-basierten Produkten häufig verwendet werden. Zum Vergleich: Das ist wie die CSS-Eigenschaft behavior im IE, nur viel leistungsfähiger.
An meiner Lösung sind drei Dateien beteiligt:
- ff.html: die zu gestaltende Datei
- ff.xml: die Datei, die die Gecko-Bindungen enthält
- ff.css: Firefox-spezifisches Styling
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;
}
Aktualisierung: Die obige Lösung ist nicht so gut. Es wäre besser, wenn anstelle des Anhängens eines neuen LINK-Elements Folgendes hinzugefügt würde que "firefox" Klasse auf dem BODY-Element. Und es ist möglich, nur durch Ersetzen der oben JS mit dem folgenden:
this.className += " firefox";
Die Lösung ist inspiriert von Dean Edwards' moz-Verhaltensweisen .
