Utilisation des préfixes navigateurs▲
CSS 3 apporte de nombreuses nouvelles fonctionnalités qui sont implémentées au fur et à mesure par les navigateurs.
L'implémentation d'une nouvelle fonctionnalité se fait en plusieurs étapes. La dernière d'entre elles est la mise en place sur la version stable du navigateur pour pouvoir tester la fonctionnalité dans un contexte réel et affiner le cas échéant certains détails. Cela signifie donc que la fonctionnalité est implémentée, mais pas encore en version finale, c'est-à-dire que son comportement est encore susceptible d'évoluer pour corriger d'éventuels bogues ou mieux coller aux spécifications.
Il faut donc que la fonctionnalité puisse être testée sans être pour autant disponible dans sa version définitive. Pour pouvoir faire la distinction entre les propriétés CSS stables et celles en cours de finalisation, le W3C a normalisé lasyntaxe des préfixes vendeurs (vendor-specific extensions).
La règle est simple : chaque moteur de rendu peut implémenter des propriétés en les préfixant avec leur propre identifiant entouré de tirets.
Par exemple, si le moteur XYZ souhaite expérimenter la propriété prop, il pourra le faire sous le nom -xyz-prop.
Les principaux préfixes utilisés sont :
- -moz- (Firefox et dérivés) ;
- -webkit- (Chrome, Safari, Opera 15+ et dérivés) ;
- -ms- (Internet Explorer) ;
- -o- (Opera jusqu'à la version 12).
Même s'il est déconseillé d'utiliser les propriétés préfixées sur une page Web en production (puisque leur implémentation est expérimentale), il est malgré tout courant de le faire, notamment parce qu'à ce stade de développement, l'implémentation est considérée comme suffisamment stable pour fonctionner correctement dans les cas généraux et n'être potentiellement boguée que dans des cas limites.
Pour mettre en place ces propriétés dans votre page, vous devez lister tous les préfixes possibles (par exemple pour border-radius) :
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;Enfin, il faut penser au futur ! N'oubliez donc pas de préciser la propriété définitive. Il est important de mettre celle-ci en fin de liste afin d'écraser les versions expérimentales si la version définitive est disponible :
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;Les propriétés de style avec préfixe sont utilisables en JavaScript. Si la notation CSS des préfixes et la notation JavaScript des propriétés standards sont normalisées (en utilisant la notation camelCase : voir Comment passer d'une propriété de style CSS à celle qui correspond en JavaScript ?), la gestion du préfixe dans la notation JavaScript ne l'est pas. Certains navigateurs conservent la notation camelCase (ou lowerCamelCase), d'autres utilisent une notation dite UpperCamelCase (avec majuscule initiale) pour différencier les propriétés préfixées de celles qui ne le sont pas.
Par exemple, pour récupérer ou affecter la valeur de la propriété border-radius pour l'élément dont l'identifiant est element, on procèdera comme suit :
var $element = document.getElementById('element');
if($element.style.borderRadius){
// border-radius
}
else if($element.style.MozBorderRadius){
// -moz-border-radius
}
else if($element.style.webkitBorderRadius){
// -webkit-border-radius
}
else if($element.style.msBorderRadius){ // IE accepte aussi MsBorderRadius
// -ms-border-radius
}
else if($element.style.OBorderRadius){
// -o-border-radius
}
else{
// il faut peut-être changer de navigateur ?
}Complément d'information : Liste des propriétés CSS préfixées.