Les préfixes de vendeurs CSS, également parfois appelés préfixes de navigateurs CSS, permettent aux concepteurs de navigateurs de prendre en charge de nouvelles fonctionnalités CSS avant que ces fonctionnalités ne soient entièrement prises en charge par tous les navigateurs. Cela peut être fait pendant une sorte de période de test et d’expérimentation pendant laquelle le fabricant du navigateur détermine exactement comment ces nouvelles fonctionnalités CSS seront implémentées. Ces préfixes sont devenus très populaires avec la montée en puissance de CSS3 il y a quelques années.
Lorsque CCS3 a été introduit pour la première fois, un certain nombre de propriétés excitées ont commencé à toucher différents navigateurs à différents moments. Par exemple, les navigateurs Webkit (Safari et Chrome) ont été les premiers à présenter certaines propriétés de style animation telles que la transformation et la transition. En utilisant des propriétés avec un préfixe de fournisseur, les concepteurs Web ont pu utiliser ces nouvelles fonctionnalités dans leur travail et les voir immédiatement sur les navigateurs qui les prenaient en charge, au lieu de devoir attendre que tous les autres fabricants de navigateurs se mettent à jour!
Ainsi, du point de vue des développeurs Web front-end, les préfixes de navigateur sont utilisés pour ajouter de nouvelles fonctionnalités CSS à un site, tout en étant rassurés de savoir que les navigateurs prendront en charge ces styles. Cela peut être particulièrement utile lorsque différents fabricants de navigateurs implémentent les propriétés de manière légèrement différente ou avec une syntaxe différente.
Les préfixes de navigateur CSS que vous pouvez utiliser (chacun étant spécifique à un navigateur différent) sont:
- Android:
-webkit-
- Chrome:
-webkit-
- Firefox:
-moz-
- Internet Explorer:
-Mme-
- iOS:
-webkit-
- Opéra:
-o-
- Safari:
-webkit-
Dans la plupart des cas, pour utiliser une nouvelle propriété de style CSS, vous devez utiliser la propriété CSS standard et ajouter le préfixe de chaque navigateur. Les versions préfixées viennent toujours en premier (dans l'ordre que vous préférez), tandis que la propriété CSS normale vient en dernier. Par exemple, si vous souhaitez ajouter une transition CSS3 à votre document, utilisez le
transition
propriété comme indiqué ci-dessous:
-webkit- transition: tous les 4 facile; -moz- transition: tous les 4 facile; -Mme- transition: tous les 4 facile; -o- transition: tous les 4 facile;transition: tous les 4 facile; Remarque: N'oubliez pas que certains navigateurs ont une syntaxe différente pour certaines propriétés, alors ne supposez pas que la version d'une propriété avec le préfixe de navigateur est exactement la même que la propriété standard. Par exemple, pour créer un dégradé CSS, vous utilisez la commande gradient linéaire propriété. Firefox, Opera et les versions modernes de Chrome et Safari utilisent cette propriété avec le préfixe approprié, tandis que les premières versions de Chrome et Safari utilisent la propriété préfixée. -webkit-gradient . En outre, Firefox utilise des valeurs différentes de celles standard. La raison pour laquelle vous finissez toujours votre déclaration avec la version normale, sans préfixe de la propriété CSS, est telle que lorsqu'un navigateur prend en charge la règle, il l'utilisera. Rappelez-vous comment CSS est lu. Les règles ultérieures ont priorité sur les règles précédentes si la spécificité est identique. Par conséquent, un navigateur lit la version du fournisseur d’une règle et l’utilise s’il ne prend pas en charge la règle normale, mais une fois qu’il le fait, il remplace la version du fournisseur par la règle CSS actuelle. Lorsque les préfixes de vendeurs ont été introduits pour la première fois, de nombreux professionnels du Web se sont demandé s'ils étaient un piratage ou un retour en arrière à la noirceur de forger le code d'un site Web pour prendre en charge différents navigateurs (rappelez-vous " Ce site est optimisé pour IE "messages). Cependant, les préfixes des vendeurs de CSS ne sont pas des hacks et vous ne devriez pas hésiter à les utiliser dans votre travail. Un hack CSS exploite les failles dans l'implémentation d'un autre élément ou d'une autre propriété afin de faire en sorte qu'une autre propriété fonctionne correctement. Par exemple, le modèle de boîte bidouille a exploité des failles dans l’analyse de la famille de voix ou dans la façon dont les navigateurs analysent les barres obliques inverses ( ). Mais ces hacks ont été utilisés pour résoudre le problème de la différence entre la manière dont Internet Explorer 5.5 gérait le modèle de boîte et comment Netscape l'interprétait, et n'ont rien à voir avec le style de famille de voix. Heureusement, ces deux navigateurs obsolètes ne nous intéressent pas de nos jours. Un préfixe de fournisseur n’est pas un hack, car il permet à la spécification de définir des règles sur la manière dont une propriété peut être implémentée, tout en permettant aux fabricants de navigateurs d’implémenter une propriété de manière différente, sans casser le reste. De plus, ces préfixes fonctionnent avec des propriétés CSS qui sera éventuellement une partie de la spécification . Nous ajoutons simplement du code afin d’accéder rapidement à la propriété. C'est une autre raison pour laquelle vous terminez la règle CSS avec la propriété normale sans préfixe. De cette façon, vous pouvez supprimer les versions préfixées une fois que tous les navigateurs sont pris en charge. Vous voulez savoir quel est le support du navigateur pour une certaine fonctionnalité? Le site Web CanIUse.com est une excellente ressource pour collecter ces informations et vous indiquer quels navigateurs et quelles versions de ces navigateurs prennent actuellement en charge une fonctionnalité. Oui, il peut sembler fastidieux et répétitif de devoir écrire les propriétés 2 à 5 fois pour que cela fonctionne dans tous les navigateurs, mais il s’agit d’une situation temporaire. 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-bas-rayon-droit: 10px;-webkit-border-bas-rayon-gauche: 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; Chrome prend en charge la propriété CSS3 depuis la version 5.0, Firefox l'a ajoutée à la version 4.0, Safari l'a ajoutée à la version 5.0, Opera à la version 10.5, iOS à la version 4.0 et Android à la version 2.1. Même Internet Explorer 9 le prend en charge sans préfixe (et IE 8 et les versions antérieures ne le supportaient pas avec ou sans préfixes). N'oubliez pas que les navigateurs vont toujours changer et que des approches créatives de prise en charge des navigateurs plus anciens seront nécessaires, sauf si vous envisagez de créer des pages Web qui ont des années de retard sur les méthodes les plus modernes. En fin de compte, écrire des préfixes de navigateur est beaucoup plus facile que de rechercher et d'exploiter des erreurs qui seront vraisemblablement corrigées dans une version ultérieure, ce qui nécessite de rechercher une autre erreur à exploiter, etc. Les préfixes de vendeurs ne sont pas un hack
Les préfixes fournisseurs sont ennuyeux mais temporaires
