Il n'y a rien de caché ici, vous n'êtes pas obligés de poster pour voir.
De l'utilisation des préfixes CSS
Pour ceux d'entre toi, lecteur, qui ne comprendrais pas de quoi je parle, voici un chouette petit résumé explicatif !
Les "préfixes propriétaires" (aussi connus sous le sobriquet de "préfixes vendeurs"), sont apparus afin d'intégrer dans le CSS des propriétés non-standardisées (la standardisation étant le travail du W3C, l'organisme chargé de chapeauter les technologies html/css). On ajoute donc un préfixe devant la propriété CSS, comme ça : -prefixe-propriété. En sachant qu'il y a plusieurs préfixes existants, on se retrouve souvent avec ceci :
- Code:
élément {
-webkit-propriété: valeur;
-moz-propriété: valeur;
-ms-propriété: valeur;
-o-propriété: valeur;
propriété: valeur;
}
Et là, tu vas me dire "Mais qu'est-ce que c'est ce foutoir ?" (et tu auras raison !). Hé bien chaque préfixe correspond à un moteur de rendu qui équipe différents navigateurs. En voici la liste non-exhaustive (car il y a PLEIN de navigateurs) avec seulement les principaux :
- -webkit- : Préfixe pour le moteur WebKit, qui équipe Safari (et sa version mobile), Chromium, Chrome, Opera, Epiphany, Konqueror, Iron, Maxthon...
- -moz- : Préfixe pour le moteur Gecko développé par Mozilla et qui est donc utilisé par Firefox, SeaMonkey...
- -ms- : Préfixe pour le moteur Trident développé par Microsoft, utilisé par Internet Explorer et les anciennes version de Maxthon
- -o- : Préfixe pour le moteur Presto, jusqu'à très récemment utilisé par Opera, qui a maintenant migré sur Blink, la version personnalisée de WebKit par Google (qui équipe aussi Chrome, donc).
On voit parfois passer le préfixe -kthml-, mais il est bien moindre car correspond à un moteur très peu utilisé. Et si vous voyez -htm-, c'est facile : Il n'existe pas, c'est une erreur.
Comment savoir quand utiliser un préfixe ?
C'est là le but de ce post. En effet, les préfixes ont l'avantage de proposer des versions "beta" (non complètes) des propriétés en cours d'élaboration par le W3C (en contrepartie, leur prise en charge est parfois partielle et bancale) pour que les développeurs puissent commencer à travailler avec, mais ils posent aussi un problème de compatibilité, car un préfixe -moz- ne sera pas lu par un navigateur qui ne tourne pas sur Gecko, de même qu'un préfixe -webkit- ne sera pas pris en compte par un navigateur non-webkit. Mais ajouter des préfixes pour tous les navigateurs possible représente un travail conséquent et alourdit le code. De plus, les propriétés étant toujours en cours d'élaboration, leur syntaxe est susceptible de changer (c'est ce qui s'est passé avec linear-gradient). De plus dans certains cas, la propriété est finalisée depuis suffisamment longtemps pour que la plupart des navigateurs aient pu l'implémenter correctement, et les préfixes ne sont donc plus utiles. Dans certains cas, ils ne sont plus pris en charge par les versions récentes d'un navigateur (c'est le cas de -moz-border-radius).
Une solution : Se renseigner
Un site référence quelles propriétés sont disponibles avec ou sans préfixes, et pour quels navigateurs. Il s'agit de Can I Use. Il permet de voir, pour chaque propriété, la prise en charge pour chaque navigateur principal. Maintenant, voyons comment tirer parti de ces informations. Nous allons prendre pour ça l'exemple de la propriété transition, dont la page est ici. On constate que :
- Il n'y a eu aucun préfixe pour aucune version d'IE, on peut donc se passer du préfixe -ms-
- Firefox supporte la propriété finale depuis plus de 5 version, on peut donc raisonnablement se passer de -moz-
- Chrome supporte la propriété finale depuis six versions, mais Safari que depuis la version 7. Pour iOS et Androïd Mobile, trop récent aussi ; il est donc judicieux d'utiliser -webkit-
- Opera supportait la version finale en sa version dernière version sous Presto (12.1). Le pourcentage d'utilisateurs au-dessous de la version 12.1 étant très faible, on peut se passer de -o-. Bien qu'ils utilisent depuis Webkit comme moteur de rendu, il est inutile de s'en préoccuper ici, n'ayant jamais implémenté de version préfixée avec -webkit- de cette propriété.
Notre code sera donc tout simplement :
- Code:
élément {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
À refaire pour chaque propriété sur laquelle vous pourriez avoir un doute, bien entendu.
Un peu de javascript
Léa Verou propose un petit fichier Javascript de sa création à télécharger ici, qui va s'occuper de gérer les préfixes à votre place ; la contrepartie, c'est que vous n'aurez pas la même finesse qu'en faisant le choix manuellement.
Aide-mémoire
Parce qu'un peu de généralités ne fait pas de mal !
Propriétés CSS3 qui ne nécessitent plus de préfixes
Linear-gradient
La syntaxe la plus "compatible" possible (tout en étant raisonnable comme dans le reste du post) au jour d'aujourd'hui :
- Code:
background: #59b8b5;
background: -webkit-linear-gradient(top, #63c1be 0%,#59b8b5 100%);
background: linear-gradient(to bottom, #63c1be 0%,#59b8b5 100%);
À accorder bien sûr avec vos valeurs.
Voir aussi : CSS Gradients sur CanIUse • Documentation W3C de linear-gradient
Voilà !
À votre charge de faire des codes propres à présent.
