Que sont les préfixes de fournisseur ou de navigateur CSS ?

Préfixes de fournisseur CSS, également parfois appelés ou CSS les préfixes de navigateur, sont un moyen pour les fabricants de navigateurs d'ajouter la prise en charge de nouvelles fonctionnalités CSS avant que ces fonctionnalités ne soient entièrement prises en charge dans tous les navigateurs. Cela peut être fait pendant une sorte de période de test et d'expérimentation où 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 de CSS3 il y a quelques années.

Origines des préfixes de fournisseur

Lorsque CCS3 a été introduit pour la première fois, un certain nombre de propriétés passionnantes ont commencé à frapper différents navigateurs à des moments différents. Par exemple, les navigateurs Webkit (Safari et Chrome) ont été les premiers à introduire certaines des propriétés de style d'animation telles que la transformation et la transition. En utilisant le préfixe du fournisseur

Propriétés, les concepteurs de sites Web ont pu utiliser ces nouvelles fonctionnalités dans leur travail et les voir sur les navigateurs qui les a pris en charge tout de suite, au lieu d'avoir à attendre que tous les autres fabricants de navigateurs attrapent en haut!

Préfixes communs

Ainsi, du point de vue d'un développeur Web frontal, les préfixes de navigateur sont utilisés pour ajouter de nouvelles fonctionnalités CSS sur un site tout en sachant que les navigateurs prendront en charge ces styles. Cela peut être particulièrement utile lorsque différents fabricants de navigateurs implémentent des 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-

Ajout d'un préfixe

Dans la plupart des cas, pour utiliser une toute nouvelle propriété de style CSS, vous prenez la propriété CSS standard et ajoutez le préfixe pour chaque navigateur. Les versions préfixées viendraient toujours en premier (dans l'ordre que vous préférez) tandis que la propriété CSS normale viendrait en dernier. Par exemple, si vous souhaitez ajouter une transition CSS3 à votre document, vous utiliserez la propriété transition comme indiqué ci-dessous:

-webkit-transition: tous les 4s facilité ;
-moz-transition: tous les 4s facilitent ;
-ms-transition: tous les 4s facilitent ;
-o-transition: toutes les 4 facilités ;
transition: tous les 4 facilités; 

N'oubliez pas que certains navigateurs ont une syntaxe différente pour certaines propriétés que d'autres, donc ne supposez pas que la version d'une propriété préfixée par le navigateur est exactement la même que la propriété standard. Par exemple, pour créer un dégradé CSS, vous utilisez la propriété linear-gradient. 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.

De plus, Firefox utilise des valeurs différentes de celles standard.

La raison pour laquelle vous terminez toujours votre déclaration par la version normale et sans préfixe de la propriété CSS est que lorsqu'un navigateur prend en charge la règle, il l'utilisera. Rappelez-vous comment CSS est lu. Les dernières règles ont préséance sur les précédentes si la spécificité est la même, de sorte qu'un navigateur lira la version du fournisseur d'un règle et l'utiliser s'il ne prend pas en charge la normale, mais une fois qu'il le fait, il remplacera la version du fournisseur par le CSS réel régner.

Les préfixes de fournisseur ne sont pas un hack

Lorsque les préfixes de fournisseur ont été introduits pour la première fois, de nombreux professionnels du Web se sont demandé s'il s'agissait d'un hack ou d'un revenir aux jours sombres du forçage du code d'un site Web pour prendre en charge différents navigateurs (rappelez-vous que "Ce site est optimisé pour IE" un message). Cependant, les préfixes des fournisseurs CSS ne sont pas des hacks et vous ne devriez avoir aucune réserve quant à leur utilisation 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 fonctionner correctement une autre propriété. Par exemple, le piratage du modèle de boîte a exploité des failles dans l'analyse de la famille vocale 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 façon dont Internet Explorer 5.5 a géré le modèle de boîte et la façon dont Netscape l'ont interprété, et n'ont rien à voir avec le style familial vocal. Heureusement, ces deux navigateurs obsolètes sont ceux dont nous n'avons pas à nous soucier ces jours-ci.

Un préfixe de fournisseur n'est pas un hack car il permet à la spécification de définir des règles sur la façon dont une propriété peut être implémentée, tout en permettant aux fabricants de navigateurs d'implémenter une propriété d'une manière différente sans tout casser autre. De plus, ces préfixes fonctionnent avec des propriétés CSS qui fera éventuellement partie du cahier des charges. Nous ajoutons simplement un code afin d'avoir accès à la propriété plus tô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 la prise en charge complète du navigateur obtenue.

Les préfixes de fournisseur sont ennuyeux mais temporaires

Oui, cela peut sembler ennuyeux et répétitif d'avoir à écrire les propriétés 2 à 5 fois pour que cela fonctionne dans tous les navigateurs, mais c'est 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-bottom-right-radius: 10px ;
-webkit-border-bas-gauche-rayon: 5px ;
rayon de bordure: 10px 5px; 

Mais maintenant que les navigateurs prennent pleinement en charge cette fonctionnalité, vous n'avez vraiment besoin que de la version standardisée:

rayon de bordure: 10px 5px; 

Chrome prend en charge la propriété CSS3 depuis la version 5.0, Firefox l'a ajoutée en version 4.0, Safari l'a ajoutée en 5.0, Opera en 10.5, iOS en 4.0, et Android en 2.1. Même Internet Explorer 9 le prend en charge sans préfixe (et IE 8 et versions antérieures ne le prennent pas en charge avec ou sans préfixes).

N'oubliez pas que les navigateurs vont toujours changer et que des approches créatives pour prendre en charge les navigateurs plus anciens seront nécessaires, à moins que vous ne prévoyiez de construction de 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 trouver et d'exploiter des erreurs qui seront très probablement corrigées dans une future version, nécessitant que vous trouviez une autre erreur à exploiter, etc.