Dirigido sólo a Firefox con CSS

Utilizando los comentarios condicionales es fácil orientar a Internet Explorer con reglas CSS específicas para el navegador:

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

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

Nota: Estoy buscando una solución 'limpia'. Usar un sniffer de navegador JavaScript para añadir una clase 'firefox' a mi HTML no se puede considerar limpio en mi opinión. Más bien me gustaría ver algo que depende de las capacidades del navegador, al igual que los comentarios condicionales son sólo 'especiales' para IE...

Shishir Morshed
Pregunta editada 25º diciembre 2015 в 8:13
Programación
firefox css css-hack
4º junio 2009 в 8:19
11 vistas

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

Ahora, la solución. Me pediste que fuera elegante, así que no sé hasta qué punto lo es, pero seguro que se dirige sólo a las plataformas Gecko.

El truco sólo funciona cuando JavaScript está habilitado y hace uso de los bindings de Mozilla (XBL), que son muy utilizados internamente en Firefox y todos los demás productos basados en Gecko. Para comparar, esto es como la propiedad CSS de comportamiento en IE, pero mucho más potente.

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

  1. ff.html: el archivo a estilizar
  2. ff.xml: el archivo que contiene los enlaces de Gecko
  3. ff.css: Estilos específicos de Firefox

ff.html






body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}




<h1>This should be red in FF</h1>

ff.xml

<?xml version="1.0"?>

ff.css

h1 {
 color: red;
}

Actualización: La solución anterior no es tan buena. Sería mejor si en vez de añadir un nuevo elemento LINK se añadiera esa clase "firefox" en el elemento BODY. Y es posible, simplemente sustituyendo el JS anterior por el siguiente:

this.className += " firefox";

La solución está inspirada en Dean Edwards' moz-behaviors.

Ionuț G. Stan
Respuesta editada 4º junio 2009 в 9:16
Comentarios (0)

Una variante de tu idea es tener un detector de usuarios del lado del servidor que averigüe qué hoja de estilo adjuntar a la página. De esta manera puedes tener un firefox.css, ie.css, opera.css, etc.

**Puedes lograr algo similar en el propio Javascript, aunque no lo consideres tan limpio.

Yo he hecho algo parecido teniendo un default.css que incluye todos los estilos comunes y luego se añaden hojas de estilo específicas para anular, o mejorar los predeterminados.

Anzil khaN
Respuesta editada 16º marzo 2018 в 7:40
Comentarios (2)

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

Comentarios (0)