Primeiro de tudo, um aviso. Eu realmente não defendo a solução que apresento abaixo. O único CSS específico do navegador que escrevo é para o IE (especialmente o IE6), embora eu desejasse que não fosse o caso.
Agora, a solução. Você pediu que fosse elegante, então eu não sei o quão elegante é, mas com certeza vai segmentar apenas as plataformas Gecko.
O truque só funciona quando o JavaScript está ativado e faz uso das ligações do Mozilla ( XBL ), que são muito usadas internamente no Firefox e em todos os outros produtos baseados no Gecko. Para uma comparação, isso é como a propriedade CSS de comportamento no IE, mas muito mais poderosa.
Três arquivos estão envolvidos na minha solução:
- ff.html: o arquivo para estilizar
- ff.xml: o arquivo que contém as ligações do Gecko
- ff.css: estilo específico do 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;
}
Atualização:
A solução acima não é tão boa. Seria melhor se, em vez de anexar um novo elemento LINK, ele adicionasse a classe "firefox" ao elemento BODY. E é possível, apenas substituindo o JS acima pelo seguinte:
this.className += " firefox";
A solução é inspirada nos comportamentos moz de Dean Edwards .