para - Apuntando solo a Firefox con CSS




scrollbar css firefox (7)

Al usar 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 otro navegador? Es decir, no solo Internet Explorer debe ignorar las reglas solo para Firefox, sino también WebKit y Opera.

Nota: Estoy buscando una solución 'limpia'. El uso de un buscador de 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 ...

https://code.i-harness.com


Ahora que Firefox Quantum 57 está disponible con mejoras sustanciales, y potencialmente innovadoras, 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 versiones heredadas de Firefox y Firefox Quantum.

De mi respuesta here :

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

Apuntar a las versiones heredadas de Firefox es un poco complicado: si solo te interesan las versiones compatibles con @supports , que son 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 admitir versiones aún más antiguas, deberá utilizar la cascada , como se demuestra en la prueba de concepto anterior.


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]-->

El siguiente código tiende a lanzar advertencias de pelusas 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 pelusas de estilo desde here


El uso de reglas específicas del motor asegura una efectiva segmentación 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]-->

La única forma de hacerlo 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 rastreador de js-browser.


OK, lo he encontrado. Esta es probablemente la solución más limpia y fácil que existe y no se basa en la activación de JavaScript.

@-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 de estas extensiones CSS aquí: Extensiones CSS de Mozilla .


Actualizado (del comentario @Antoine)

Puedes usar @supports

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

Más sobre @supports here





css-hack