Ceci est une mise à jour et une version plus complète de ce post.

Sur les CSS, il est commun d’utiliser les préfixes -moz-, -webkit- ou -o- pour cibler tous les navigateurs.
Ceci dit, on n’en est plus du tout au début des CSS3 et pour pratiquement tout les navigateurs à jours, les préfixes sont totalement inutiles. On peut vérifier le support d’une propriété CSS sur le site caniuse.com.

Voici un petit récapitulatif.

border-radius
Border-radius est supporté par tous les navigateurs maintenant, et depuis plusieurs versions. Pour Opera et IE, ces préfixes n’ont jamais existé.

box-shadow
Même remarque que pour border-radius : les préfixes sont maintenant inutiles.

animation
Mettez la version normale (sans préfix) et la version webkit. Celles de Firefox et d’Opera ne sont plus nécessaires et celle d’IE n’a jamais existé.

transition
Même chose que pour animation.

linear-gradient
La nouvelle spécification — avec « to bottom » ou « to left » au lieu de « top » et « right » — est prise en compte dans tous les navigateurs à jour (Firefox 24+, Chrome 27+, Opera 12+, IE11+).

L’ancienne spec est tout de même encore supportée, avec préfixe uniquement, et la très ancienne spec de Webkit est parfois encore nécessaire pour les vieux iPhone.

box-sizing
Box-sizing est supporté dans tous les navigateurs, sauf Firefox qui a besoin du préfixe.

background-size
Pas besoin de préfixe non plus. Les seuls préfixes qui ont existé n’existent d’ailleurs plus depuis des années.

calc
Cette propriété n’a plus non plus besoin de préfixes, sauf si vous ciblez les Backberry auquel cas il faut le préfixe de webkit. Opera 12 ne le supporte pas, avec ou sans préfixe.

rgba
Pas besoin de préfixes ici, depuis bien longtemps.

border-image
Sauf pour le navigateur par défaut d’Android qui a besoin du préfixe de webkit et d’Opera 12x qui a besoin du -o-, plus personne n’a besoin des préfixes.

background-image
Je parle ici des images multiples : plus pas besoin de préfixes.

word-wrap
Jamais eu besoin de préfixes non plus.

box-sizing
Firefox < 28 avait besoin d’une ligne supplémentaire avec -moz- devant. Depuis, ce n’est plus utile.


C’est à peu prés tout ce que j’utilise en CSS3, et dont je sais que les préfixes sont utiles ou non.
Bien-sûr, ajouter les préfixes permet de supporter d’autres versions de navigateurs. Mais est-ce franchement encore utile de tripler la taille de son fichier CSS pour supporter Firefox 3.5 alors qu’on est à 33 ?

MÀJ 2014/11/09 : ajout de box-sizing.

3 commentaires

gravatar
Nikelaos a dit :
Pour border-radius et box-shadox, s'ils ont inutile,je fais comment pour ajouter une bordure ou une ombre ?
gravatar
Le Hollandais Volant a dit :
@Nikelaos : Ce sont les préfixes "moz", "wekbit" ou "o" qui sont obsolètes, pas les propriétés.

En fait, quand les ombres CSS n’étaient encore que des concepts non-officiels, chaque navigateur utilisait sa propre syntaxe CSS. On utilisait ainsi ça :

#div {
border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-webkit-border-radius: 20px;
}


Respectivement pour le CSS officiel, celui pour Firefox (mozilla), celui pour Opera, celui pour Chrome et Safari (ceux utilisant Webkit).
Aujourd’hui, "border-radius" fait partie du CSS officiel et les préfixes (moz, webkit, o…) sont inutiles.

Mon article liste ici les CSS dont les préfixes ne sont plus nécessaires car les navigateurs n’en ont plus besoin.

Donc pour faire une bordure, tu fais simplement ça :

#div {
border-radius: 20px;
}

Les commentaires sont fermés pour cet article