Question Cibler uniquement Firefox avec CSS


À l'aide 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? En d'autres termes, Internet Explorer doit non seulement ignorer les règles de Firefox uniquement, mais aussi WebKit et Opera.

Remarque: Je suis à la recherche d'une solution "propre". Utiliser un renifleur de navigateur JavaScript pour ajouter une classe 'firefox' à mon code HTML n'est pas considéré comme propre à mon avis. Je préférerais voir quelque chose qui dépend des capacités du navigateur, un peu comme les commentaires conditionnels ne sont que «spéciaux» pour IE ...


517
2018-06-04 20:19


origine


Réponses:


OK, je l'ai trouvé. C'est probablement la solution la plus propre et la plus simple qui soit et ne repose pas sur l'activation de JavaScript.

@-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 toute une liste pour ces extensions CSS ici: Extensions CSS Mozilla.


1057
2018-06-04 22:43



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



Actualisé(à partir du commentaire @Antoine)

Vous pouvez utiliser @supports

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

Plus sur @supports  ici


29
2017-09-08 10:10



Tout d'abord, un avertissement. Je ne préconise pas vraiment la solution que je présente ci-dessous. Le seul CSS spécifique au navigateur que j'écris est pour IE (en particulier IE6), même si 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 à quel point c'est élégant, mais c'est sûr que ça va cibler les plateformes Gecko seulement.

L'astuce ne fonctionne que lorsque JavaScript est activé et utilise les liaisons de Mozilla (XBL), qui sont fortement utilisés en interne dans Firefox et tous les autres produits basés sur 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 à styler
  2. ff.xml: le fichier contenant les liaisons Gecko
  3. ff.css: style spécifique à 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;
}

Mettre à jour: La solution ci-dessus n'est pas très bonne. Il vaudrait mieux ajouter au lieu d'ajouter un nouvel élément LINK cette "firefox" class sur l'élément BODY. Et c'est possible, juste en remplaçant le JS ci-dessus par ce qui suit:

this.className += " firefox";

La solution est inspirée par Comportements de Dean Edwards.


12
2018-06-04 21:02



Voici quelques hacks de navigateur pour cibler uniquement le navigateur Firefox,

Utilisation de hacks 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);

Hacks de requête de médias

Cela va marcher sur Firefox 3.6 et plus tard

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

Si vous avez besoin de plus d'informations, s'il vous plaît visitez browserhacks


12
2017-08-20 05:45



L'utilisation de règles spécifiques au moteur garantit 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
2018-01-13 16:57



Une variante de votre idée est d'avoir un server-side USER-AGENT detector cela déterminera 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 tâche similaire dans Javascript même si vous ne le considérez pas comme propre.

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


7
2018-06-04 20:26