Que sont les préfixes de fournisseur CSS comme -webkit- et -moz-, et comment dois-je les utiliser ?

Préfixes de fournisseur en CSS : un guide de -moz- et -webkit-

Dans le domaine du CSS, vous pourriez rencontrer des lignes de code comme celui-ci :

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

Celles-ci sont connues sous le nom de propriétés préfixées par le fournisseur, introduites par les fournisseurs de navigateurs pour tester les fonctionnalités CSS expérimentales ou propriétaires avant leur normalisation officielle.

Quel est le but des préfixes des fournisseurs ?

Les préfixes des fournisseurs servent principalement d'espaces réservés pour les fonctionnalités à venir. Ils permettent aux navigateurs de prendre en charge des idées innovantes et de les tester auprès d'utilisateurs du monde réel avant de les intégrer pleinement dans la spécification CSS.

Préfixes courants des fournisseurs :

• - webkit- (Chrome, Safari)
• -moz- (Firefox)
• -o- (Opera)
• -ms- (Internet Explorer)

Bonnes pratiques d'utilisation des préfixes de fournisseur :

Pour garantir une compatibilité maximale, il est il est généralement conseillé de commencer par définir la version préfixée par le fournisseur d'une propriété, suivie de la version standardisée, Par exemple :

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

Cette méthode permet aux navigateurs qui prennent en charge la version standard de la propriété (border-radius) de remplacer les versions préfixées par le fournisseur.

Exemple : Propriétés de colonne

Le code que vous avez mentionné définit les propriétés des colonnes (nombre de colonnes, espacement de colonnes, remplissage de colonnes) pour les deux Navigateurs Webkit (Chrome, Safari) et Firefox. Ces propriétés contrôlent l'apparence et la mise en page du texte multi-colonnes.

Références :

• Module de mise en page multi-colonnes CSS : https://www.w3 .org/TR/css3-multicol/
• 'Pour la défense des préfixes des fournisseurs' (Meyerweb.com) : https://meyerweb.com/eric/thoughts/2008/08/13/in-defense-of-vendor-prefixes/
• Listes de préfixes de fournisseurs (Meyerweb.com) : https://meyerweb.com /eric/pensées/2007/09/03/vendor-prefixes-2/

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!