para - Apuntando solo a Firefox con CSS

safari css

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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

Utilizando hacks selectores.

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

Answer 4

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

Answer 5

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

Answer 6

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. Usted pidió que fuera elegante, así que no sé qué tan elegante es, pero es seguro que solo se enfocará en las plataformas Gecko.

El truco solo funciona cuando JavaScript está habilitado y utiliza los 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 el comportamiento de la propiedad CSS en IE, pero mucho más poderoso.

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

1. ff.html: el archivo a 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 no es tan buena. Sería mejor si, en lugar de agregar un nuevo elemento LINK, agregue esa clase de "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 de moz de Dean Edwards .

Answer 7

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.

Answer 8

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 .

Answer 9

Una variación de su idea es tener un server-side USER-AGENT detector que determine 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 Javascript, aunque no lo consideres limpio.

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

Answer 10

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