Quelle est la raison de mettre des préfixes dans les nouvelles fonctionnalités CSS?

Y a-t-il une raison valable pour que les navigateurs préfixent les nouvelles fonctionnalités CSS, au lieu de laisser les webmasters utiliser la version non préfixée?

Par exemple, un exemple de code pour le dégradé d'arrière-plan ressemble à:

#arbitrary-stops {
  /* fallback DIY*/

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* IE 10 */
  background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

Quel est l'intérêt de forcer les webmasters à copier-coller le même code quatre fois pour avoir le même résultat?

Remarque: l'une des raisons souvent citées est que les styles préfixés sont destinés à être temporaires alors que le navigateur n'implémente pas correctement la spécification ou que la spécification n'est pas définitive .

OMI, cette raison est un non-sens:

• Si le moteur de navigateur n'implémente pas la spécification correctement, le navigateur ne sera pas conforme, qu'il ne l'implémente pas sous une forme non préfixée ou qu'il ne l'implémente pas sous une forme préfixée.
• Si la spécification n'est pas définitive, il peut être important qu'il y ait eu des implémentations précédentes portant le même nom. Par exemple, si CSS2 l'avait fait linear-gradient, mais que CSS3 était destiné à s'étendre linear-gradientavec des fonctionnalités supplémentaires, il serait intelligent de préfixer temporairement le nouveau, brouillon, implémentation en -css3-<style>différenciant le CSS2 fonctionnel et le CSS3 expérimental. En pratique, CSS2 n'a pas linear-gradientou d'autres nouveautés CSS3.

Je comprendrais également si différents navigateurs avaient des formats d'implémentation différents : par exemple, disons Firefox requis, pour l'ombre du texte <weight-of-shadow distance-x distance-y color>, tandis que Chrome est requis <distance-x distance-y weight-of-shadow color>. Mais en réalité, ce n'est pas le cas; au moins toutes les nouvelles fonctionnalités de CSS3 que j'ai utilisées jusqu'à présent avaient le même format.

Selon cette note du W3C :

Pour éviter les conflits avec les futures fonctionnalités CSS, la spécification CSS2.1 réserve une syntaxe préfixée pour les extensions propriétaires et expérimentales de CSS.

Avant qu'une spécification n'atteigne l'étape de recommandation du candidat dans le processus W3C, toutes les implémentations d'une fonctionnalité CSS sont considérées comme expérimentales. Le groupe de travail CSS recommande que les implémentations utilisent une syntaxe préfixée par le fournisseur pour ces fonctionnalités, y compris celles des brouillons de travail du W3C. Cela évite les incompatibilités avec les modifications futures du projet.

Vous pouvez suivre l'état du CSS ici et ici .

Je comprendrais également si différents navigateurs avaient des formats d'implémentation différents ... [b] ut en fait, ce n'est pas le cas; au moins toutes les nouvelles fonctionnalités de CSS3 que j'ai utilisées jusqu'à présent avaient le même format.

Cela me dit que vous n'avez pas joué à ce jeu depuis assez longtemps.

Le problème est que les navigateurs Web n'implémentent jamais de nouvelles fonctionnalités de la même manière. Il est courant de voir un navigateur implémenter des fonctionnalités qui n'ont pas été standardisées, et le résultat est que tout agit différemment sur différents navigateurs.

Non seulement cela, les nouvelles fonctionnalités sont souvent boguées (nous éviterons d'appeler IE par son nom), et donc même si la syntaxe des différents éléments est la même, le résultat est différent.

Cela provoque un casse-tête pour les développeurs qui tentent d'utiliser de nouvelles fonctionnalités. Après avoir fini d'écrire leur feuille de style, ils réalisent rapidement qu'elle s'affiche différemment sur différents navigateurs pour des raisons inexplicables.

Avant l'arrivée des préfixes, les développeurs étaient obligés de s'appuyer sur des différences détectables entre les navigateurs, souvent en exploitant des erreurs dans l'analyseur CSS. Cela a entraîné des abominations comme celle-ci:

padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;

Ces sortes de hacks étaient le résultat de la tentative d'un développeur de personnaliser leur feuille de style pour chaque navigateur, en utilisant toutes sortes de méthodes étranges qu'ils pouvaient trouver.

En standardisant les préfixes, il permet aux développeurs d'utiliser des fonctionnalités qui ne sont pas stables sur différents navigateurs. Les préfixes -moz-et -webkit-indiquent clairement que l'auteur essaie de fournir un style qui ne devrait être appliqué que dans certains navigateurs Web.

Une fois que les fonctionnalités deviennent stables et que les navigateurs commencent à agir de la même manière, vous pouvez supprimer le préfixe et déclarer la fonctionnalité une fois.

Je pense qu'il est important de réaliser que les préfixes ne signifient PAS que vous devez déclarer les styles une fois pour chaque navigateur. Les préfixes signifient que doit déclarer des styles supplémentaires chaque fois que vous trouvez qu'un navigateur Web n'est pas conforme à une norme. Par exemple, au lieu de votre code ci-dessus, vous devriez commencer par:

 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Si vous réalisez soudainement que Microsoft est incapable de calculer correctement un dégradé linéaire, vous pouvez ajouter un préfixe pour résoudre le problème sur IE:

 /* Friggin IE */
 background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Soudain, votre page a la même apparence dans tous les navigateurs, malgré le fait que l'un d'eux ait fait les choses différemment.

Vous constaterez que cela a été couvert de manière très complète dans cet article sur A List Apart .

Si le moteur de navigateur n'implémente pas la spécification correctement, le navigateur ne sera pas conforme, qu'il ne l'implémente pas sous une forme non préfixée ou qu'il ne l'implémente pas sous une forme préfixée.

La différence est que le navigateur ne cassera pas la compatibilité quand il ne se conforme. Si le comportement du navigateur est différent de la spécification, il ne cassera pas l'ancien code lorsqu'il le modifiera, car il est répertorié sous un nouveau nom.