Propriétés CSS spécifiques au fournisseur: un mal nécessaire?

Les développeurs de navigateurs (fournisseurs) étendent souvent les spécifications CSS avec des propriétés propriétaires. Ces extensions servent à diverses fins, notamment en ajoutant de nouvelles fonctionnalités, en menant des expériences et en facilitant les tests des fonctionnalités prévues pour la normalisation du W3C avant d'atteindre l'état de recommandation des candidats.

Pour éviter les conflits avec les propriétés CSS standard existantes ou futures, une convention de dénomination spécifique est utilisée. Les propriétés et les mots-clés spécifiques au fournisseur doivent commencer par un trait d'union ( - ) ou un soulignement ( _ ). Le format recommandé est:

'-'   vendor specific identifier   '-'   meaningful name

'_'   vendor specific identifier   '-'   meaningful name

Cette convention garantit la compatibilité, car les propriétés CSS standard ne commenceront jamais par un trait d'union ou un soulignement. Cependant, bien que cela minimise les conflits, les extensions spécifiques aux fournisseurs ne font pas partie des spécifications officielles du CSS et sont susceptibles de changer. Par conséquent, leur utilisation doit être minimisée.

Tableau 1: préfixes du fournisseur commun

ATTENTION: Bien qu'il soit peu susceptible de provoquer des conflits, les extensions spécifiques au fournisseur peuvent changer sans préavis. Ils ne passeront pas non plus la validation CSS. Prioriser les propriétés CSS standard dans la mesure du possible. Si une extension est nécessaire, choisissez-en un en reflétant étroitement une propriété standard pour faciliter une transition en douceur vers la norme une fois disponible.

Exemple: la propriété

Avant le support CSS3 répandu, les développeurs ont utilisé des extensions spécifiques au fournisseur pour opacité . Cet exemple démontre une approche commune:

.test {
  background: red;
  /* IE filter extension */
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
  width: 100%;                /* Required for IE filter */
  -moz-opacity: 0.6;         /* Mozilla extension */
  -khtml-opacity: 0.6;        /* Konqueror extension (Safari 1.1) */
  opacity: 0.6;              /* Standard CSS3 syntax */
}

Cette technique a assuré la compatibilité entre divers navigateurs, chaque navigateur sélectionnant la propriété appropriée. Même après que les navigateurs ont adopté la propriété standard opacité , cette approche est restée fonctionnelle. Notez que la propriété Internet Explorer filtre est une exception non standard.

Conclusion:

Les propriétés spécifiques au fournisseur peuvent être utiles pour tester et combler les lacunes de compatibilité, mais elles ne sont pas idéales pour des solutions à long terme. Favoriser toujours les propriétés CSS standard. Utilisez les préfixes des fournisseurs avec parcimonie et seulement lorsqu'ils sont absolument nécessaires, en vous rappelant qu'ils ne sont pas bien documentés et peuvent changer de façon inattendue. Reportez-vous à des ressources comme puis-je utiliser pour les informations de compatibilité du navigateur.