Tout d'abord, un avertissement. Je ne préconise pas vraiment la solution que je présente ci-dessous. Le seul CSS spécifique au navigateur que j'écris est pour IE (en particulier IE6), bien que je souhaite que ce ne soit pas le cas.
Maintenant, la solution. Vous lui avez demandé d'être élégant, donc je ne sais pas à quel point il est élégant, mais il ciblera certainement les plates-formes Gecko uniquement.
L'astuce ne fonctionne que lorsque JavaScript est activé et utilise des liaisons Mozilla ( XBL ), qui sont largement utilisées en interne dans Firefox et tous les autres produits basés sur Gecko. À titre de comparaison, cela ressemble à la propriété CSS de comportement dans IE, mais beaucoup plus puissant.
Trois fichiers sont impliqués dans ma solution:
- ff.html: le fichier à coiffer
- ff.xml: le fichier contenant les liaisons Gecko
- ff.css: style spécifique à Firefox
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;
}
Mise à jour:
la solution ci-dessus n'est pas si bonne. Il serait préférable qu'au lieu d'ajouter un nouvel élément LINK, il ajoute cette classe "firefox" à l'élément BODY. Et c'est possible, simplement en remplaçant le JS ci-dessus par ce qui suit:
this.className += " firefox";
La solution est inspirée des comportements moz de Dean Edwards .