Pregunta Orientación solo a Firefox con CSS


Con los comentarios condicionales, es fácil orientar 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 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 ...


517
2018-06-04 20:19


origen


Respuestas:


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>

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


1057
2018-06-04 22:43



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
2018-01-21 09:33



Actualizado(del comentario de @Antoine)

Puedes usar @supports

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

Más en @supports  aquí


29
2017-09-08 10:10



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 son muy utilizados 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

<!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;
}

Actualizar: La solución anterior no es tan buena. Sería mejor si en lugar de agregar un nuevo elemento LINK agregará ese 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 Moz-comportamientos de Dean Edwards.


12
2018-06-04 21:02



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


12
2017-08-20 05:45



El uso de reglas específicas de la máquina 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]-->

9
2018-01-13 16:57



Una variación de tu idea es tener un server-side USER-AGENT detector eso averiguará qué hoja de estilo adjuntar a la página. De esta forma puedes 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 para anular o mejorar los valores predeterminados.


7
2018-06-04 20:26



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.


3
2018-06-04 20:22