Que sont -moz- et -webkit- ?
Les propriétés CSS commençant par -webkit- , -moz- , -ms- o -o- sont appelés préfixes des fournisseurs.
Pourquoi les différents navigateurs ajoutent-ils des préfixes différents pour le même effet ?
Une bonne explication des préfixes des fournisseurs nous vient de Peter-Paul Koch de QuirksMode :
A l'origine, l'intérêt des préfixes fournisseurs était de permettre aux fabricants de navigateurs de commencer à supporter les déclarations CSS expérimentales.
Disons 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 d'autres ne sont pas d'accord avec certains détails. Comme nous le savons, ce processus peut prendre des années.
Disons en outre que Microsoft décide, à titre expérimental, de de mettre en œuvre la grille proposée. À 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, elle ajoute -ms-grid .
Le préfixe fournisseur dit en quelque sorte "c'est l'interprétation 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 briser les pages qui dépendent de -ms-grid.
MISE À JOUR À PARTIR DE L'ANNÉE 2016
Comme ce post a 3 ans, il est important de mentionner que la plupart des fournisseurs comprennent désormais que ces préfixes ne font que créer un code inutile en double et que la situation dans laquelle vous devez spécifier trois règles CSS différentes pour qu'un effet fonctionne dans tous les navigateurs est indésirable.
Comme mentionné dans este glossaire sur le point de vue de Mozilla sur Vendor Prefix sur May 3, 2016 ,
Les fournisseurs de navigateurs essaient maintenant de se débarrasser du préfixe "fournisseur" pour les expérimentations. expérimentales. Ils ont remarqué que les développeurs Web les utilisaient sur sites Web de production, polluant ainsi l'espace global et rendant plus difficile plus difficile pour les outsiders d'être performants.
Par exemple, il y a quelques années encore, pour placer un coin arrondi sur une boîte, il fallait é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 pleinement en charge cette fonctionnalité, vous n'avez vraiment besoin que de la version normalisée :
border-radius: 10px 5px;
Trouver les bonnes règles pour tous les navigateurs
Comme il n'existe pas encore 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 par tous les principaux navigateurs.
Vous pouvez également utiliser pleeease.iamvdo.me/play/ . S'il vous plaît est une application Node.js qui traite facilement vos CSS. Elle simplifie l'utilisation des préprocesseurs et les combine avec les meilleurs postprocesseurs. Elle permet de créer des feuilles de style propres, de prendre en charge les navigateurs plus anciens et d'offrir une meilleure maintenabilité.
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;
}
