Comment puis-je cibler Firefox exclusivement avec CSS ?

Cibler Firefox seul avec CSS

La capacité des commentaires conditionnels à cibler Internet Explorer avec des règles CSS spécifiques au navigateur est bien connue. Cependant, lorsque le problème vient du moteur Gecko utilisé par Firefox, une approche différente s'impose. Comment les règles CSS peuvent-elles être appliquées exclusivement à Firefox sans affecter les autres navigateurs ?

Une solution basée sur les capacités du navigateur

Un renifleur de navigateur JavaScript n'est pas considéré comme une solution propre pour ce but. Au lieu de cela, une méthode qui exploite les capacités du navigateur est préférable.

Utilisation de @-moz-document

La règle @-moz-document peut être utilisée pour cibler spécifiquement Firefox. Il fonctionne en appliquant des règles CSS aux documents qui ont la fonction 'url-prefix()' commençant par '-moz-'. Firefox est le seul navigateur qui prend actuellement en charge cette fonction.

Exemple d'utilisation

L'exemple suivant montre comment utiliser @-moz-document pour changer la couleur d'un h1. élément en rouge uniquement dans Firefox :

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

<h1>This should be red in FF</h1>

Dans les autres navigateurs, l'élément h1 restera inchangé, car ils ne reconnaissent pas l'élément h1. Règle @-moz-document.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!