web-dev-qa-db-fra.com

Ciblant 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. Quel serait le meilleur moyen de cibler uniquement Firefox avec vos règles CSS et pas un seul autre navigateur? Autrement dit, Internet Explorer doit non seulement ignorer les règles réservées à Firefox, mais également WebKit et Opera devrait.

Note: Je recherche une solution "propre". L'utilisation d'un renifleur de navigateur JavaScript pour ajouter une classe 'firefox' à mon code HTML ne constitue pas, à mon avis, propre. J'aimerais 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…

cssfirefoxcss-hack
571
avdgaag

OK, je l'ai trouvé. Il s’agit probablement de la solution la plus simple et la plus propre 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 de ces extensions CSS ici: Extensions Mozilla CSS .

1180
Ionuț G. Stan

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]-->
80
Waqas Ali Khan Puar

Mis à jour (à partir du commentaire de @Antoine)

Vous pouvez utiliser @supports

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

Plus sur @supportsici

68
laaposto

Voici quelques astuces de navigateur pour ne cibler que le navigateur Firefox,

Utilisation de hacks de sélecteur.

_:-moz-tree-row(hover), .selector {}

Hacks JavaScript

var isFF = !!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF = !!navigator.userAgent.match(/firefox/i);

Requêtes de médias

Cela va fonctionner sur Firefox 3.6 et versions ultérieures

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

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

13
Hbirjand

Tout d'abord, un déni de responsabilité. Je ne préconise pas vraiment la solution que je présente ci-dessous. Le seul code CSS spécifique à mon navigateur que je rédige est destiné à IE (en particulier 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 à quel point il est élégant, mais il ne fait que cibler uniquement les plateformes Gecko.

L'astuce ne fonctionne que lorsque JavaScript est activé et utilise les liaisons Mozilla ( XBL ), qui sont très utilisées en interne dans Firefox et tous les autres produits basés sur Gecko. A titre de comparaison, cela ressemble au comportement CSS de la propriété 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;
}

Mise à jour: La solution ci-dessus n'est pas très bonne. Il serait préférable qu'au lieu d'ajouter un nouvel élément LINK, il ajoute la classe "firefox" sur l'élément BODY. Et c'est possible, simplement en remplaçant le JS ci-dessus par le suivant:

this.className += " firefox";

La solution est inspirée par les comportements de Dean Edwards .

13
Ionuț G. Stan

L'utilisation de règles spécifiques à -engine 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]-->
11
Rayjax

Une variante de votre idée est d’avoir un server-side USER-AGENT detector qui déterminera la 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 en Javascript même, mais vous pouvez ne pas la considérer comme propre.

J'ai fait la même chose en ajoutant un default.css qui inclut all common styles and then specific style sheets pour remplacer ou améliorer les valeurs par défaut.

7
Kekoa

Maintenant que Firefox Quantum 57 apporte des améliorations importantes - et potentiellement révolutionnaires - à Gecko, collectivement appelé Stylo ou CSS quantique, vous pouvez vous retrouver dans une situation où vous devez faire la distinction entre les versions héritées de Firefox et Firefox Quantum.

De ma réponse ici :

Vous pouvez utiliser @supports avec une expression calc(0s) en conjonction avec @-moz-document pour tester Stylo - Gecko ne prend pas en charge les valeurs temporelles dans les expressions calc(), mais Stylo:

@-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 n'êtes intéressé que par les versions qui prennent en charge @supports, qui est une Fx de 22 ou 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 tiliser la cascade , comme démontré dans la preuve de concept ci-dessus.

4
BoltClock

La seule façon de faire cela consiste à utiliser différents hacks CSS, ce qui rendra votre page plus susceptible d'échouer lors des prochaines mises à jour du navigateur. Si quelque chose, ce sera MOINS sûr que d'utiliser un renifleur js-browser.

3
jvenema

Le code suivant a tendance à lancer des avertissements contre les peluches de style:

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

Au lieu d'utiliser

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

M'a aidé à sortir! Vous avez la solution pour avertir les peluches de style de ici

0
Kailas

support CSS est lié à javascript, en note complémentaire.

if (CSS.supports("( -moz-user-select:unset )")){
  console.log("FIREFOX!!!")
 }

https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

0
NVRM