Dirigido solo a Firefox con CSS

616

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 porta mal. ¿Cuál sería la mejor manera de apuntar solo a Firefox con sus reglas CSS y no a otro navegador? Es decir, Internet Explorer no solo debe 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. Prefiero ver algo que depende de las capacidades del navegador, al igual que los comentarios condicionales son solo "especiales" para IE ...

css  firefox  css-hack 
— avdgaag
fuente
Es posible que desee ver algunas preguntas similares y sus respuestas relacionadas ... stackoverflow.com/questions/738831/…
— AnonJr
3
¿Hay alguna forma de apuntar a Firefox en una máquina Windows frente a una Mac?
— Kegan Quimby
44
<! - [if Gecko]> ... include ... <! [endif] ->
— define el

Respuestas:

1252

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;
  }
}
<h1>This should be red in FF</h1>
Expandir fragmento

Se basa en otra extensión CSS específica de Mozilla. Aquí hay una lista completa de estas extensiones CSS: Extensiones CSS de Mozilla .

— Ionuț G. Stan
fuente
17
¿Qué significa exactamente el prefijo url () después del "@ -moz-document"? Sólo curioso.
— Matt
17
@ Matt, esa es una manera de filtrar los sitios web en los que se aplica ese CSS. Otra opción es usar el domain()filtro. Por ejemplo @-moz-document domain(google.com) {...}, aplicará las reglas CSS adjuntas solo en el dominio google.com.
— Ionuț G. Stan
10
Me gusta cómo no tiene que crear un documento CSS completamente nuevo para esto como lo hace para IE.
— JD Isaacks
77
@JohnIsaacks No necesita una hoja de estilo separada para los comentarios condicionales de IE. Pueden estar en línea. Si quieres hacerlo de esa manera es otra pregunta.
— Dylan
44
Vale la pena señalar que esta solución alternativa ya no funciona a partir de Firefox 59, lanzado en marzo de 2018: bugzilla.mozilla.org/show_bug.cgi?id=1035091
— Jordan Gray
105

Actualizado (desde el comentario de @Antoine)

Puedes usar @supports

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

Más @supports aquí

— laaposto
fuente
11
Esta es una solución mucho mejor que el ejemplo @ -moz-document url-prefix (), también funciona bien con el analizador SCSS mientras que el otro no.
— Alastair Hodgson
1
Estoy usando Firefox y todavía es blanco, ¿es por la versión que estoy usando?
— Antoine
3
@Antoine ¡Tienes razón! No funcionó para las últimas versiones de FF. Actualicé mi respuesta. Debería funcionar ahora. Gracias por señalarlo!
— laaposto
83

Aquí se explica 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]-->
— Waqas Ali Khan Puar
fuente
66
Si entiendo esto correctamente, el superior no es Chrome, sino que solo especifica el comportamiento predeterminado que anula para Firefox e IE.
— Muhd
3
Muy útil. Como ex amante de Firefox, estoy destripado de que tengo que hacer hacks específicos de Firefox como este, pero mientras funcione puedo vivir con él.
— SpaceBeers
La sugerencia para la detección de IE no funciona si desea agregarla a un archivo .css. Sin embargo, puede incluir hojas de estilo de esa manera en HTML. Si desea tener IE CSS en un archivo CSS, le recomiendo mirar aquí: keithclark.co.uk/articles/…
— Biepbot Von Stirling
16

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

Usando hacks selectores.

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

JavaScript Hacks

var isFF = !!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF = !!navigator.userAgent.match(/firefox/i);

Hacks de consultas de medios

Esto funcionará en Firefox 3.6 y posterior

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

Si necesita más información, visite browserhacks

— Hbirjand
fuente
1
¿Podría elaborar un poco más sobre "el uso de hacks de selector" y sobre cómo funciona específicamente el ejemplo que proporcionó? Gracias.
— jj_
1
Bien, lo tengo yo mismo: básicamente lo que hace es ocultar el segundo selector a otros navegadores que no entienden el primero. En este caso, solo Mozilla lo comprende, _:moz-tree-row(hover)por lo que será el único capaz de procesar el .selector{}siguiente. Estos hacks específicos actualmente funcionan en todas las versiones de Firefox, consulte browserhacks.com para obtener más información al respecto.
— jj_
1
Utilicé el Media Query Hack: \ @media screen y (-moz-images-in-menus: 0) {} Esto va muy bien con la pantalla \ @media y (-webkit-min-device-pixel-ratio: 0) y Visual Studio no lanza una advertencia al usarlo.
— Dan Randolph
1
Tenga en cuenta que -moz-images-in-menus: 0 se ha eliminado en Firefox 52 - bugzilla.mozilla.org/show_bug.cgi?id=1302157
— jonathanKingston
13

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 desearía que no fuera el caso.

Ahora, la solución. Le pediste que fuera elegante, así que no sé qué tan elegante es, pero seguramente solo se dirigirá a las plataformas 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. A modo de comparación, esto es como el comportamiento de la propiedad CSS en IE, pero mucho más potente.

Hay tres archivos involucrados en mi solución:

  1. ff.html: el archivo al estilo
  2. ff.xml: el archivo que contiene los enlaces 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 no es tan buena. Sería mejor si en lugar de agregar un nuevo elemento LINK agregara 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 .

— Ionuț G. Stan
fuente
11

El uso de reglas específicas del motor garantiza una orientació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]-->
— Rayjax
fuente
7

Una variación de su idea es tener una server-side USER-AGENT detectorque descubra qué hoja de estilo adjuntar a la página. De esta manera puedes tener unfirefox.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.cssque incluye all common styles and then specific style sheetsse agrega para anular o mejorar los valores predeterminados.

— Kekoa
fuente
A algunos les gusta un enfoque agradable y estable & mdash; gracias y mdash; aunque todavía depende del rastreo del navegador. Prefiero usar algo que depende de la capacidad, como una regla CSS de Gecko-only o algo así. Yo uso el mismo enfoque básico: estilos predeterminados y complementos específicos del navegador.
— avdgaag
1
@avdaag: la detección de capacidades es preferible en la mayoría de los casos, pero cuando intentas inyectar un truco para "corregir" un error específico del motor de renderizado, apuntar al agente de usuario es, en teoría, la solución óptima. No estás discriminando contra navegadores desconocidos; y se supone que el campo de agente de usuario le dirá qué motor de representación está usando el navegador, por lo que incluso si aparece un navegador Gecko raro, aún se le dará la solución. Dicho esto, muchos navegadores ahora falsifican sus cadenas de agente de usuario debido al uso inapropiado de la detección del navegador. Entonces, en la práctica, podría no funcionar tan bien.
— Lèse majesté
6

Ahora que Firefox Quantum 57 está disponible con mejoras sustanciales, y potencialmente innovadoras, para Gecko, conocidas colectivamente como Stylo o Quantum CSS, puede encontrarse en una situación en la que debe distinguir entre las versiones heredadas de Firefox y Firefox Quantum.

De mi respuesta aquí :

Se puede usar @supportscon una calc(0s)expresión junto con @-moz-documentpara probar Stylo: Gecko no admite valores de tiempo en calc()expresiones, pero Stylo sí:

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

Dirigirse a versiones heredadas de Firefox es un poco complicado: si solo está interesado en versiones compatibles @supports, que son Fx 22 y posteriores, @supports not (animation: calc(0s))es todo lo que necesita:

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

... pero si necesita admitir versiones incluso anteriores, deberá hacer uso de la cascada , como se demuestra en la prueba de concepto anterior.

— BoltClock
fuente
3

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

— jvenema
fuente
0

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

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

En lugar de usar 

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

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

— Kailas
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.