Les préfixes vendeurs en CSS

Afin de permettre le développement progressif et l'implémentation des modules CSS, les éditeurs de navigateurs (vendors) ont la possibilité d'introduire le support de propriétés spécifiques. Cette manière d'opérer est recommandée par le W3C depuis CSS 2.1 et valable pour les versions suivantes.

Ces "propriétés propriétaires" doivent être préfixées d'un tiret et d'un code correspondant au moteur les exploitant :

• -o- pour Opera
• -moz- pour Gecko (Mozilla)
• -webkit- pour Webkit (Chrome, Safari, Android...)
• -ms- pour Microsoft (Internet Explorer)
• -khtml- pour KHTML (Konqueror)

Le tout doit être suivi du nom de la propriété souhaitée ou anticipée. D'autres syntaxes exotiques existent également, comme mso- pour Microsoft Office, sans oublier d'autres extensions propriétaires comme les fameux filter et zoom pour Internet Explorer.

Ainsi, la fameuse propriété border-radius destinée à arrondir les angles des boîtes sans utiliser d'images ou de techniques alternatives s'est vue introduite par :

• -moz-border-radius sous Gecko (2.0 à 3.6)
• -webkit-border-radius sous WebKit

Opera 10.5 l'a implémentée directement sans préfixe, puis suite à sa finalisation, l'ont fait également Safari 5.0, Chrome 5.0, Firefox 4.0 et Internet Explorer 9.

D'autres cas concrets peuvent faire appel à ces combinaisons, notamment pour la gestion de l'opacité (opacity), des transitions, des colonnes ou des ombrages (box-shadow). WebKit dispose d'un nombre appréciable de ces propriétés préfixées et parfois très expérimentales.

Ce principe permet aux navigateurs d'ajouter le support de fonctionnalités particulières sans attendre la publication définitive dans la norme, notamment CSS3, et de tester en situation réelle le rendu, souvent réclamé avec insistance par les développeurs web ou suggéré par l'équipe même de l'éditeur. Le but est aussi de permettre la migration vers la syntaxe finale en retirant uniquement le préfixe lors de la validation officielle de la propriété et des valeurs qu'elle peut accepter.

Quelques inconvénients font surface :

• Si l'on souhaite profiter en avance de ces styles, il faudra user de plusieurs propriétés pour une déclaration, avec chacun des préfixes.
• Cela peut être perçu comme une autre façon d'écrire des hacks spécifiques à chaque navigateur, c'est pourquoi certains puristes réclament l'utilisation d'un préfixe commun, tel que -beta-.
• Accessoirement, la syntaxe ou les propriétés peuvent changer, la spécification CSS étant toujours en cours de rédaction pour certains modules.

Recommandation d'usage courant

L'idéal est de toujours commencer une déclaration par les propriétés précitées, puis de la finir par celle qui devra les remplacer un jour, pour garantir que l'implémentation finale sera bien assurée par cette dernière (le navigateur devant alors faire le choix d'ignorer les déclarations propriétaires initiales, tout comme pour une même propriété déclarée de façon multiple dans un même bloc).

.boite {
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}

En revanche, votre feuille de style ne sera alors plus valide selon le validateur du W3C, mais gageons que celui-ci pourra un jour ignorer les préfixes vendeurs qu'il invite lui-même à utiliser.