Orientación solo a Firefox con CSS

Con los comentarios condicionales, es fácil orientar Internet Explorer con reglas CSS específicas del navegador:

 

A veces es el motor Gecko (Firefox) el que se comporta mal. ¿Cuál sería la mejor manera de orientar solo Firefox con sus reglas CSS y no con un solo otro navegador? Es decir, no solo Internet Explorer debería ignorar las reglas exclusivas de Firefox, sino también WebKit y Opera.

Nota: Estoy buscando una solución ‘limpia’. Usar un sniffer de navegador JavaScript para agregar una clase ‘firefox‘ a mi HTML no califica como limpio en mi opinión. Me gustaría ver algo que dependa de las capacidades del navegador, al igual que los comentarios condicionales son solo ‘especiales’ para IE …

OK, lo encontré. Esta es probablemente la solución más limpia y fácil que existe y no depende de que JavaScript esté activado.

 @-moz-document url-prefix() { h1 { color: red; } } 
 

This should be red in FF

Aquí es cómo abordar tres navegadores diferentes: IE, FF y Chrome

   

Actualizado (del comentario @Antoine)

Puedes usar @supports

 @supports (-moz-appearance:none) { h1 { color:red; } } 
 

This should be red in FF

En primer lugar, un descargo de responsabilidad. Realmente no defiendo la solución que presento a continuación. El único CSS específico del navegador que escribo es para IE (especialmente IE6), aunque desearía que no fuera el caso.

Ahora, la solución. Pediste que fuera elegante, así que no sé qué tan elegante es, pero seguro que solo se aplicará a plataformas Gecko.

El truco solo funciona cuando JavaScript está habilitado y hace uso de enlaces de Mozilla ( XBL ), que se usan mucho internamente en Firefox y en todos los demás productos basados ​​en Gecko. Para una comparación, esto es como la propiedad CSS de comportamiento en IE, pero mucho más poderosa.

Tres archivos están involucrados en mi solución:

  1. ff.html: el archivo para estilizar
  2. ff.xml: el archivo que contiene las vinculaciones de Gecko
  3. ff.css: estilo específico de Firefox

ff.html

       

This should be red in FF

ff.xml

           

ff.css

 h1 { color: red; } 

Actualización: la solución anterior no es tan buena. Sería mejor si en lugar de agregar un nuevo elemento LINK agregará esa clase “firefox” en el elemento BODY. Y es posible, simplemente reemplazando el JS anterior con lo siguiente:

 this.className += " firefox"; 

La solución está inspirada en los comportamientos moz de Dean Edwards .

Aquí hay algunos hacks de navegador para apuntar solo al navegador Firefox,

Usando selector de hacks.

 _:-moz-tree-row(hover), .selector {} 

Hacks de JavaScript

 var isFF = !!window.sidebar; var isFF = 'MozAppearance' in document.documentElement.style; var isFF = !!navigator.userAgent.match(/firefox/i); 

Media Query Hacks

Esto funcionará, Firefox 3.6 y posterior

 @media screen and (-moz-images-in-menus:0) {} 

Si necesita más información, visite browserhacks

El uso de reglas específicas de la máquina garantiza una orientación efectiva del navegador.

  //Internet Explorer  

Una variación en su idea es tener un server-side USER-AGENT detector que descubrirá qué hoja de estilo debe adjuntar a la página. De esta forma puede tener un firefox.css, ie.css, opera.css, etc

Puede lograr algo similar en Javascript, aunque no lo considere limpio.

He hecho algo similar al tener un default.css que incluye all common styles and then specific style sheets se agregan all common styles and then specific style sheets para anular o mejorar los valores predeterminados.

La única forma de hacerlo es a través de varios hacks CSS, lo que hará que su página tenga más probabilidades de fallar en las próximas actualizaciones del navegador. En todo caso, será MENOS seguro que usar un sniffer js-browser.

Ahora que Firefox Quantum 57 ha salido con mejoras considerables (y potencialmente destructivas) para Gecko conocidas colectivamente como Stylo o Quantum CSS, es posible que se encuentre en una situación en la que tenga que distinguir entre las versiones heredadas de Firefox y Firefox Quantum.

De mi respuesta aquí :

Puede usar @supports con una expresión de calc(0s) junto con @-moz-document para probar Stylo – Gecko no admite valores de tiempo en expresiones de calc() pero Stylo sí lo hace:

 @-moz-document url-prefix() { @supports (animation: calc(0s)) { /* Stylo */ } } 

Aquí hay una prueba de concepto:

 body::before { content: 'Not Fx'; } @-moz-document url-prefix() { body::before { content: 'Fx legacy'; } @supports (animation: calc(0s)) { body::before { content: 'Fx Quantum'; } } } 

El siguiente código tiende a arrojar advertencias de pelusa de estilo:

 @-moz-document url-prefix() { h1 { color: red; } } 

En lugar de usar

 @-moz-document url-prefix('') { h1 { color: red; } } 

Me ayudó! Obtuve la solución para la advertencia de pelusa de estilo desde aquí