web-dev-qa-db-fra.com

Que sont -moz- et -webkit-?

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

Je suis un débutant chez CSS et lorsque j'ai consulté du code CSS l’autre jour, j’ai trouvé ces lignes. Dans les tutoriels où j’apprenais le CSS, je n’ai jamais rien vu de tel. Quelqu'un pourrait-il m'expliquer ces lignes ou me donner une source où je pourrais apprendre à mettre en œuvre de telles lignes?

csswebkit
139
idude

Il s'agit des propriétés préfixées par le fournisseur proposées par les moteurs de rendu appropriés (-webkit pour Chrome, Safari; -moz pour Firefox, -o pour Opera, -ms pour Internet Explorer). Généralement, ils sont utilisés pour implémenter de nouvelles fonctionnalités CSS, ou des propriétés propriétaires, avant la clarification/définition finale par le W3.

Cela permet de définir des propriétés spécifiques à chaque navigateur/moteur de rendu afin de rendre compte en toute sécurité des incohérences entre les implémentations. Les préfixes seront, au fil du temps, supprimés (du moins en théorie) au fur et à mesure que la version finale, sans préfixe, de la propriété est implémentée dans ce navigateur.

À cette fin, il est généralement conseillé de spécifier d'abord la version avec préfixe du vendeur, puis la version sans préfixe, afin que la propriété sans préfixe écrase les paramètres de propriété avec préfixe du vendeur une fois qu'elle est implémentée. par exemple:

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

Spécifiquement, pour aborder le CSS dans votre question, les lignes que vous citez:

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

Spécifiez les propriétés column-count, column-gap et column-fill pour les navigateurs Webkit et Firefox.

Références:

153
David Thomas

Que sont -moz- et -webkit -?

Les propriétés CSS commençant par -webkit-, -moz-, -ms- ou -o- sont appelées préfixes de fournisseur.

Pourquoi différents navigateurs ajoutent-ils des préfixes différents pour le même effet?

Peter-Paul Koch de QuirksMode : une bonne explication des préfixes de vendeurs

À l’origine, l’intérêt des préfixes de vendeurs était de permettre aux fabricants de navigateurs de commencer à prendre en charge les déclarations CSS expérimentales.

Supposons qu'un groupe de travail du W3C discute d'une déclaration de grille (qui, d'ailleurs, ne serait pas une si mauvaise idée). Disons en outre que certaines personnes créent un projet de spécification, mais que d'autres ne sont pas d'accord avec certains détails. Comme nous le savons, ce processus peut prendre des siècles.

Supposons en outre que Microsoft, à titre expérimental, décide de mettre en oeuvre le réseau proposé. À ce stade, Microsoft ne peut pas être certain que la spécification ne changera pas. Par conséquent, au lieu d’ajouter la grille à son CSS, il ajoute -ms-grid.

Le préfixe du vendeur indique en quelque sorte "ceci est l'interprétation par Microsoft d'une proposition en cours". Ainsi, si la définition finale de la grille est différente, Microsoft peut ajouter une nouvelle grille de propriétés CSS sans casser les pages qui dépendent de -ms-grid.

MISE À JOUR DE L'ANNÉE 2016

Comme cet article a 3 ans, , il est important de mentionner que la plupart des fournisseurs comprennent maintenant que ces préfixes ne font que créer du code en double inutile et que la situation où vous devez spécifier 3 règles CSS différentes pour obtenir un effet qui fonctionne dans tous les navigateurs est un indésirable.

Comme mentionné dans le this glossaire sur la vue de Mozilla sur Vendor Prefix sur May 3, 2016,

Les fournisseurs de navigateurs essaient maintenant de se débarrasser du préfixe de fournisseur pour les fonctionnalités expérimentales. Ils ont remarqué que les développeurs Web les utilisaient sur des sites Web de production, polluant ainsi l’espace mondial et rendant plus difficile la tâche des outsiders.

Par exemple, il y a quelques années à peine, pour définir un coin arrondi sur une boîte, vous deviez écrire:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

Mais maintenant que les navigateurs supportent pleinement cette fonctionnalité, vous n’avez plus besoin que de la version normalisée:

border-radius: 10px 5px;

Trouver les bonnes règles pour tous les navigateurs

Comme il n’existe toujours pas de norme pour les règles CSS communes qui fonctionnent sur tous les navigateurs, vous pouvez utiliser des outils tels que caniuse.com pour vérifier la prise en charge d’une règle dans tous les principaux navigateurs.

Vous pouvez également utiliser pleeease.io/play . Pleeease est une application Node.js qui traite facilement votre CSS. Il simplifie l'utilisation des pré-processeurs et les combine avec les meilleurs post-processeurs. Il aide à créer des feuilles de style propres, prend en charge les navigateurs plus anciens et offre une meilleure facilité de maintenance.

Entrée: 

a {
  column-count: 3;
  column-gap: 10px;
  column-fill: auto;
}

Sortie: 

a {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -webkit-column-fill: auto;
     -moz-column-fill: auto;
          column-fill: auto;
}
49
Raman Sahasi