Segmentar solo Firefox con CSS

Usando comentarios condicionales es fácil apuntar a Internet Explorer con reglas CSS específicas del 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 solo a Firefox con sus reglas CSS y no a un solo otro navegador? Es decir, no solo Internet Explorer debe ignorar las reglas de solo Firefox, sino también WebKit y Opera deben.

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

Author: Shishir Morshed, 2009-06-05
Source

10 answers

OK, lo he encontrado. 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;
  }
}
<h1>This should be red in FF</h1>

Se basa en otra extensión CSS específica de Mozilla. Hay una lista completa para estas extensiones CSS aquí: Mozilla CSS Extensions.

 1083
Author: Ionuț G. Stan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-19 11:00:48

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

<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
    width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
    #categoryBackNextButtons{
        width:486px;
    }
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
    width:486px;
}
</style>
<![endif]-->
 77
Author: Waqas Ali Khan Puar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-16 08:33:14

Actualizado (de @Antoine comentario)

Puedes usar @supports 

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}
<h1>This should be red in FF</h1>

Más en @supports aquí

 38
Author: laaposto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-29 10:22:19

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

Ahora, la solución. Le pediste que fuera elegante, así que no se cuán elegante es, pero seguro que solo se dirigirá a las plataformas de Gecko.

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

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

  1. ff.html: el archivo al estilo
  2. ff.xml: el archivo que contiene los enlaces de Gecko
  3. ff.css: estilo específico de 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;
}

Actualización: La solución anterior es no tan bueno. Sería mejor si en lugar de añadir un nuevo elemento LINK añadiera esa clase "firefox" en el elemento BODY. Y es posible, simplemente reemplazando la JS anterior con lo siguiente: 

this.className += " firefox";

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

 12
Author: Ionuț G. Stan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-06-04 21:16:16

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

Usando hacks de selector.

_:-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);

Hacks de Consulta de Medios

Esto va a funcionar, Firefox 3.6 y posteriores

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

Si necesita más información,visite browserhacks

 12
Author: Hbirjand,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-26 10:34:35

Usar reglas específicas del motor garantiza una segmentación efectiva del navegador.

<style type="text/css">

    //Other browsers
    color : black;


    //Webkit (Chrome, Safari)
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        color:green;
    }

    //Firefox
    @media screen and (-moz-images-in-menus:0) {
        color:orange;
    }
</style>

//Internet Explorer
<!--[if IE]>
     <style type='text/css'>
        color:blue;
    </style>
<![endif]-->
 9
Author: Rayjax,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-13 16:57:57

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

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

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

 7
Author: Kekoa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-16 07:40:40

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

 3
Author: jvenema,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-06-04 20:22:19

Ahora que Firefox Quantum 57 está disponible con mejoras sustanciales - y potencialmente rompedoras - a 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 calc(0s) junto con @-moz-document para probar Stylo-Gecko no admite valores de tiempo en expresiones calc() pero Stylo does: 

@-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';
    }
  }
}

Apuntar a versiones heredadas de Firefox es un poco complicado : si solo estás interesado en versiones que soporten @supports, que es Fx 22 en adelante, @supports not (animation: calc(0s)) es todo lo que necesitas: 

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

... pero si necesita soportar incluso versiones anteriores, necesitará hacer uso de la cascada, como se demostró en la prueba de concepto anterior.

 2
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-14 04:31:38

El siguiente código tiende a lanzar advertencias de estilo: 

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

En lugar de usar 

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

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

 0
Author: Kailas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-29 09:46:43