Maison > Article > interface Web > Utiliser CSS uniquement pour Firefox

Utiliser CSS uniquement pour Firefox

WBOYavant: 2023-09-20 19:53:021658parcourir

使用 CSS 仅针对 Firefox

Lors du développement d'une application Web, les développeurs doivent s'assurer qu'elle s'affiche correctement dans tous les navigateurs. Certaines propriétés CSS ne sont pas prises en charge dans les navigateurs comme Firefox mais le sont dans d'autres navigateurs comme Chrome, Opera, etc.

Dans ce cas, nous devons écrire du code CSS qui cible uniquement le navigateur Firefox. Dans ce didacticiel, nous allons apprendre deux manières différentes d'écrire du CSS, uniquement pour le navigateur Firefox.

Utilisez les extensions CSS spécifiques à Mozila

Dans notre liste, la première façon d'utiliser CSS pour le navigateur Firefox est d'utiliser l'extension spécifique CSS '@-moz-document url-prefix()'. Nous devons écrire le code CSS dans cette extension CSS afin qu'il ne soit appliqué à la page Web que lorsque le navigateur Firefox est ouvert.

Grammaire

Les utilisateurs peuvent utiliser l'extension spécifique CSS @-moz-document url-prefix() selon la syntaxe suivante pour utiliser CSS pour Firefox.

@-moz-document url-prefix() {
   /* Add CSS here */
}

Exemple 1

Dans l'exemple ci-dessous, nous avons créé un élément HTML div et y avons ajouté du contenu textuel. Après cela, nous avons utilisé @-moz-document url-prefix() en CSS pour appliquer des styles uniquement aux éléments div dans le navigateur Firefox.

Les utilisateurs peuvent ouvrir la page Web ci-dessous dans les navigateurs Chrome et Firefox et observer la différence dans les styles d'éléments div.

<html>
<head>
   <style>
      @-moz-document url-prefix() {
         .firefox {
            background: green;
            border: 1px solid red;
            padding: 20px;
            margin: 20px;
            font-size: 1.3rem;
            color: white;
            width: 500px;
         }
      }
   </style>
</head>
<body>
   <h3> Using the <i> @-moz-document url-prefix() CSS-specific extension </i> to target only Firefox browser </h3>
   <div class = "firefox">
      <p> Firefox is a free, open-source web browser from Mozilla. </p>
   </div>
</body>
</html>

Exemple 2

Dans l'exemple ci-dessous, nous avons créé un élément div parent et ajouté d'autres éléments div à l'intérieur. En CSS, nous utilisons l'extension spécifique CSS @-moz-document url-prefix() pour styliser l'élément div uniquement dans le navigateur Firefox.

Dans Chrome, les utilisateurs peuvent afficher une page Web vierge car aucune dimension n'est appliquée, tandis que dans Firefox, les utilisateurs peuvent afficher du contenu HTML stylisé.

<html>
<head>
   <style>
      @-moz-document url-prefix() {
         .parent {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            height: 200px;
            width: 500px;
            background-color: yellow;
         }
         .first,
         .second,
         .third { height: 100px; width: 100px; }
         .first { background-color: red;}
         .second {background-color: green;}
         .third {background-color: blue;}
      }
   </style>
</head>
<body>
   <h3> Using the <i> @-moz-document url-prefix() CSS-specific extension </i> to target only firefox browser </h3>
   <div class = "parent">
      <div class = "first"> </div>
      <div class = "second"> </div>
      <div class = "third"> </div>
   </div>
</body>
</html>

Utilisez les règles @supports

CSS contient diverses règles, chacune offrant des fonctionnalités différentes. La règle @supports prend une condition comme paramètre et si la condition devient vraie, le CSS est appliqué à la page Web dans le navigateur Firefox.

Dans notre exemple, nous utiliserons la condition CSS « -moz-apparence:none » pour vérifier si le navigateur actuel est Firefox. « -moz-apparence:none » supprime le style par défaut des éléments HTML tels que la case à cocher, mais ici, nous pouvons l'utiliser pour vérifier si le navigateur actuel est Firefox.

Grammaire

Les utilisateurs peuvent utiliser les règles CSS @supports selon la syntaxe suivante pour utiliser CSS pour le navigateur Firefox.

@supports(-moz-appearance:none) {
   /* CSS code */
}

Dans la syntaxe ci-dessus, nous devons ajouter du code CSS dans le bloc de déclaration de la règle @supports.

Exemple 3

Dans l'exemple ci-dessous, nous avons créé trois éléments "

" différents en HTML. Après cela, nous utilisons la règle @supports et la condition "-moz-apparence:none" pour définir l'élément "

" uniquement dans le navigateur Firefox

Dans le navigateur Firefox, les utilisateurs peuvent observer différentes couleurs de texte.

<html>
<head>
   <style>
      @supports(-moz-appearance:none) {
         p.one {color: red;}
         p.two {color: green;}
         p.three {color: blue;}
      }
   </style>
</head>
<body>
   <h3> Using the <i> @supports CSS rule </i> to target only the firefox browser </h3>
   <p class = "one"> TutorialsPoint </p>
   <p class = "two"> CSS </p>
   <p class = "three"> HTML </p>
</body>
</html>

Les utilisateurs ont appris à cibler le navigateur Firefox en utilisant uniquement CSS. Nous avons utilisé des extensions spécifiques CSS et des règles @supports. Les utilisateurs ne doivent utiliser CSS avec Firefox que lorsque le navigateur Firefox ne prend pas en charge certaines propriétés CSS pour appliquer des styles alternatifs.

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!

firefox css chrome html checkbox

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Définir si l'animation est lue vers l'avant ou utiliser CSSArticle suivant：Définir si l'animation est lue vers l'avant ou utiliser CSS

Articles Liés

Voir plus