Ne cibler que Firefox avec CSS

utilisation de commentaires conditionnels il est facile de cibler Internet Explorer avec des règles CSS spécifiques au navigateur: 

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

parfois, C'est le moteur Gecko (Firefox) qui se comporte mal. quelle serait la meilleure façon de cibler uniquement Firefox avec vos règles CSS et pas un seul autre navigateur? C'est-à-dire, non seulement Internet Explorer devrait ignorer les règles de Firefox seulement, mais aussi WebKit et Opera devrait.

Note: je cherche une solution "propre". Utiliser un navigateur JavaScript sniffer pour ajouter une classe' firefox ' à mon HTML ne se qualifie pas comme propre à mon avis. Je voudrais plutôt voir quelque chose qui dépend des capacités du navigateur, un peu comme les commentaires conditionnels ne sont que "spéciaux" pour IE...

529
demandé sur Shishir Morshed 2009-06-05 00:19:09

10 réponses

OK, je l'ai trouvé. Il s'agit probablement de la solution la plus propre et la plus facile là-bas et ne repose pas sur JavaScript étant activé. 

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>

il est basé sur une autre extension CSS spécifique à Mozilla. Il y a une liste complète de ces extensions CSS ici: Mozilla CSS Extensions .

1083
répondu Ionuț G. Stan 2018-04-19 11:00:48

Voici comment s'attaquer à trois navigateurs différents: IE, FF et 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
répondu Waqas Ali Khan Puar 2015-06-16 08:33:14

mise à Jour (à partir de @Antoine commentaire)

vous pouvez utiliser @supports 

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

plus sur @supports ici

38
répondu laaposto 2017-11-29 10:22:19

tout d'Abord, un avertissement. Je ne défends pas vraiment la solution que je présente ci-dessous. Le seul CSS spécifique au navigateur que j'écris est pour IE (surtout IE6), bien que je souhaite que ce ne soit pas le cas.

maintenant, la solution. Vous lui avez demandé d'être élégant donc je ne sais pas comment il est élégant, mais il va certainement cibler les plates-formes Gecko seulement.

le truc ne fonctionne que lorsque JavaScript est activé et utilise des fixations Mozilla ( XBL ), qui sont largement utilisés en interne dans Firefox et tous les autres produits à base de Gecko. Pour une comparaison, c'est comme la propriété CSS de comportement dans IE, mais beaucoup plus puissant.

trois fichiers sont impliqués dans ma solution:

  1. ff.html: le fichier de style
  2. ff.xml: le fichier contenant les liaisons gecko
  3. ff.css: Firefox spécifique style

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

mise à Jour: La solution ci-dessus n'est pas bon. Il serait préférable qu'au lieu d'ajouter un nouvel élément de lien, il ajoute que classe "firefox" sur l'élément de corps. Et c'est possible, juste en remplaçant les js ci-dessus avec le texte suivant: 

this.className += " firefox";

La solution est inspiré par de Dean Edwards' moz-comportements .

12
répondu Ionuț G. Stan 2009-06-04 21:16:16

voici quelques hacks de navigateur pour cibler seulement le navigateur Firefox,

utilisant des vérins de sélection. 

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

Media Query Hacks

ça va marcher, Firefox 3.6 et plus tard 

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

si vous avez besoin de plus d'information,s'il vous plaît visitez browserhacks

12
répondu Hbirjand 2014-08-26 10:34:35

L'utilisation de règles spécifiques au moteur assure un ciblage efficace du navigateur. 

<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
répondu Rayjax 2015-01-13 16:57:57

une variante de votre idée est d'avoir un server-side USER-AGENT detector qui permettra de déterminer quelle feuille de style à attacher à la page. De cette façon, vous pouvez avoir un firefox.css, ie.css, opera.css, etc .

vous pouvez accomplir une chose similaire dans Javascript lui-même, bien que vous ne pouvez pas le considérer comme propre.

j'ai fait une chose similaire en ayant un default.css qui inclut all common styles and then specific style sheets sont ajoutés pour outrepasser, ou améliorer les valeurs par défaut.

7
répondu Kekoa 2018-03-16 07:40:40

la seule façon de le faire est par divers hacks CSS, ce qui rendra votre page beaucoup plus susceptible d'échouer sur les prochaines mises à jour de navigateur. S'il y a quoi que ce soit, il sera moins sûr que d'utiliser un sniffer js-browser.

3
répondu jvenema 2009-06-04 20:22:19

maintenant que Firefox Quantum 57 est sorti avec des améliorations substantielles - et potentiellement cassantes-à Gecko collectivement connu sous le nom de Stylo ou Quantum CSS, vous pouvez vous trouver dans une situation où vous devez distinguer entre les versions anciennes de Firefox et Firefox Quantum.

de ma réponse ici :

vous pouvez utiliser @supports avec une expression calc(0s) en conjonction avec @-moz-document tester pour Stylo-Gecko ne supporte pas les valeurs de temps dans les expressions calc() mais Stylo fait: 

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

voici une preuve de concept: 

body::before {
  content: 'Not Fx';
}

@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}

cibler les anciennes versions de Firefox est un peu délicat - si vous êtes seulement intéressé par les versions qui prennent en charge @supports , qui est Fx 22 et plus, @supports not (animation: calc(0s)) est tout ce dont vous avez besoin: 

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

... mais si vous avez besoin de supporter des versions encore plus anciennes, vous aurez besoin de faire usage de la cascade , comme démontré dans la validation de principe ci-dessus.

2
répondu BoltClock 2017-12-14 04:31:38

le code suivant tend à lancer des avertissements de style: 

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

au lieu d'utiliser 

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

M'a aidé! J'ai trouvé la solution pour l'avertissement de style lint de ici

0
répondu Kailas 2017-11-29 09:46:43