Le Hollandais Volant

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.