PROJET AUTOBLOG


Le Hollandais Volant

source: Le Hollandais Volant

⇐ retour index

[MÀJ] Les préfixes CSS obsolètes

dimanche 2 février 2014 à 16:36
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 à jours (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.


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 à 26 ? Si je regarde mes stats sur les versions de Firefox, 3% de mes visiteurs sous Firefox utilisent la version 23 ou moins (soit même pas 1% de tous les visiteurs).