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 à CSS et quand je regardais un code CSS l’autre jour, j’ai trouvé ces lignes. Dans les tutoriels que j’ai utilisés pour apprendre le CSS, je n’ai jamais rien vu de tel. Quelqu’un pourrait-il s’il vous plaît expliquer ces lignes à moi ou me donner une source où je pourrais apprendre à mettre en œuvre des lignes comme celles-ci?

Ce sont les propriétés préfixées par les fournisseurs offertes par les moteurs de rendu correspondants ( -webkit for 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, 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 que les incohérences entre les implémentations soient sockets en compte en toute sécurité. Les préfixes seront, au fil du temps, supprimés (du moins en théorie) à mesure que la version finale, non préfixée, de la propriété est implémentée dans ce navigateur.

À cette fin, il est généralement conseillé de spécifier la version préfixée par le fournisseur, puis la version non préfixée, afin que la propriété non préfixée remplace les parameters de propriété préfixés par le fournisseur une fois 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; } 

Plus précisément, pour traiter 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 de column-count column-gap , d’ column-gap column-fill et column-fill pour les navigateurs Webkit et Firefox.

Les références:

  • Module de mise en page multi-colonnes CSS .
  • “En défense des préfixes de fournisseurs” (Meyerweb.com) .
  • Liste de préfixes du fournisseur (Meyerweb.com) .

Que sont -moz- et -webkit-?

Les propriétés CSS commençant par -webkit- , -moz- , -ms- ou -o- s’appellent des préfixes de fournisseur.


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

Une bonne explication des préfixes de fournisseur vient de Peter-Paul Koch de QuirksMode :

À l’origine, le but des préfixes de fournisseurs était de permettre aux fabricants de navigateurs de prendre en charge les déclarations CSS expérimentales.

Disons qu’un groupe de travail du W3C discute d’une déclaration de grid (qui, incidemment, ne serait pas une si mauvaise idée). Disons en outre que certaines personnes créent un projet de spécification, mais d’autres ne sont pas d’accord avec certains détails. Comme nous le soaps, ce processus peut prendre des années.

Disons en outre que Microsoft en tant qu’expérience décide de mettre en œuvre la grid proposée. À ce stade, Microsoft ne peut pas être certain que la spécification ne changera pas. Par conséquent, au lieu d’append la grid à son fichier CSS, il ajoute -ms-grid .

Le type de préfixe de fournisseur dit “ceci est l’interprétation Microsoft d’une proposition en cours”. Ainsi, si la définition finale de la grid est différente, Microsoft peut append une nouvelle grid de propriétés CSS sans casser les pages qui dépendent de -ms-grid.


MISE À JOUR DE L’ANNÉE 2016

Comme ce post 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 dupliqué inutile et que la situation dans laquelle vous devez spécifier 3 règles CSS différentes pour obtenir un effet dans tous les navigateurs est un indésirable.

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

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

Par exemple, il y a quelques années, pour définir un coin arrondi sur une boîte, vous devez é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 prennent totalement en charge cette fonctionnalité, vous n’avez besoin que de la version standardisé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 vos CSS. Il simplifie l’utilisation des préprocesseurs et les combine avec les meilleurs postprocesseurs. Il aide à créer des feuilles de style propres, à prendre en charge les anciens navigateurs et à offrir une meilleure maintenance.

Consortingbution:

 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; }