Utilizando comentários condicionais, é fácil direcionar o Internet Explorer com regras CSS específicas do navegador:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
Às vezes é o motor Gecko (Firefox) que se comporta mal. Qual seria a melhor maneira de atingir apenas o Firefox com suas regras CSS e não com um único outro navegador? Ou seja, não só o Internet Explorer deve ignorar as regras apenas do Firefox, mas também o WebKit e o Opera devem.
Note: I'm procurando por um 'clean' solução. Usando um sniffer de navegador JavaScript para adicionar um 'firefox' classe ao meu HTML não se qualifica como limpo na minha opinião. Eu prefiro ver algo que depende das capacidades do navegador, muito parecido com comentários condicionais são apenas 'special' para o IE...
Antes de mais, uma renúncia. Eu não'não defendo realmente 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 fosse't o caso.
Agora, a solução. Você pediu para ser elegante, então eu não'não sei quão elegante é, mas'com certeza vai ter como alvo apenas as plataformas Gecko.
O truque só funciona quando o JavaScript está habilitado e faz uso do Mozilla bindings (XBL), que são muito utilizados internamente no Firefox e em todos os outros produtos baseados em Gecko-. Para uma comparação, isto é como o comportamento da propriedade CSS no IE, mas muito mais poderoso.
Três arquivos estão envolvidos na minha solução:
**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;
}
Actualização: A solução acima não é assim tão boa. Seria melhor se ao invés de anexar um novo elemento LINK ele adicionasse that "firefox" classe no elemento BODY. E it's possível, apenas substituindo o JS acima com o seguinte:
this.className += " firefox";
A solução é inspirada por Dean Edwards' moz-behaviors.
Uma variação em sua idéia é ter um "detector de USUÁRIO-AGENTE do lado do servidor" que irá descobrir que folha de estilo anexar à página. Desta forma você pode ter um firefox.css, ou seja,.css, opera.css, etc
.
Você pode realizar uma coisa semelhante no próprio Javascript, embora você não o considere limpo.
Eu fiz uma coisa semelhante tendo um default.css
que inclui todos os estilos comuns e depois folhas de estilo específicas
são adicionadas para anular, ou melhorar os padrões.