Tout d'abord, un avertissement. Je ne suis pas vraiment partisan de la solution que je présente ci-dessous. Les seules CSS spécifiques aux navigateurs que j'écris sont pour IE (en particulier IE6), même si j'aimerais que ce ne soit pas le cas.
Maintenant, la solution. Vous avez demandé qu'elle soit élégante, alors je ne sais pas à quel point elle l'est, mais elle va certainement cibler les plateformes Gecko uniquement.
L'astuce ne fonctionne que lorsque JavaScript est activé et fait appel aux liaisons Mozilla ( XBL ), qui sont largement utilisés en interne dans Firefox et tous les autres produits basés sur Gecko. À titre de comparaison, c'est comme la propriété CSS behavior dans IE, mais beaucoup plus puissante.
Trois fichiers sont impliqués dans ma solution :
- ff.html : le fichier à styliser
- 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 très bonne. Il serait préférable qu'au lieu d'ajouter un nouvel élément LINK, on ajoute que "firefox" sur l'élément BODY. Et c'est possible, il suffit de remplacer le JS ci-dessus par le suivant :
this.className += " firefox";
La solution s'inspire de moz-behaviors de Dean Edwards .
