Que sont les préfixes de fournisseur comme -webkit- et -moz- en CSS, et pourquoi sont-ils utilisés ?

Comprendre les préfixes des fournisseurs : -moz- et -webkit-

Lorsqu'ils rencontrent des lignes CSS inconnues telles que celles répertoriées ci-dessous, les débutants peuvent s'interroger sur leur signification.

-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;

Ces lignes représentent préfixé par le fournisseur propriétés, propres à des moteurs de rendu spécifiques. Les préfixes -webkit sont utilisés par Chrome et Safari, tandis que les préfixes -moz s'appliquent à Firefox.

Objectif des préfixes de fournisseur

Les préfixes de fournisseur permettent la mise en œuvre de CSS nouveaux ou propriétaires fonctionnalités avant leur standardisation officielle par le W3C. Cela permet une adoption précoce malgré les incohérences potentielles entre les implémentations des navigateurs.

Bonnes pratiques

Il est recommandé de spécifier d'abord les propriétés avec préfixe du fournisseur, suivies des versions sans préfixe. Cela garantit que la propriété sans préfixe remplace les paramètres préfixés par le fournisseur une fois entièrement pris en charge par le navigateur.

.elementClass {
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    -o-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
}

Exemple d'application

Dans l'exemple CSS fourni, les propriétés spécifiés sont liés à plusieurs colonnes layouts:

• -webkit-column-count: Spécifie le nombre de colonnes dans une mise en page multi-colonnes pour les navigateurs Webkit.
• -webkit -column-gap : Définit l'espacement entre les colonnes pour Webkit navigateurs.
• -webkit-column-fill : Contrôle la façon dont le contenu est distribué dans les colonnes pour les navigateurs Webkit.

Des propriétés similaires sont appliquées à Firefox à l'aide de -moz préfixes.

Supplémentaires Ressources

• [Module de mise en page multi-colonnes CSS](https://www.w3.org/TR/css3-multicol/)
• ['En défense de Préfixes du fournisseur' par Meyer](https://meyerweb.com/eric/thoughts/2008/05/13/defense-of-vendor-prefixes/)
• [Listes de préfixes de fournisseurs par Meyer](https://meyerweb. com/eric/thoughts/2008/05/13/defense-of-vendor-prefixes/)

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!