Pour afficher un dégradé en CSS3,  les navigateurs créent dynamiquement une image de fond définie par des instructions normés. À l’heure actuelle, il est possible d’appliquer un dégradé en CSS sur tous les navigateurs récents. Cependant chaque navigateur possède encore ses propres normes de nommages et surtout ses propres limites.

De ce fait, pour appliquer cette propriété il est nécessaire de multiplier les instructions.

button {
	background-image:linear-gradient(green, blue); /* Norme W3C */
	background-image:-moz-linear-gradient(green, blue); /* Firefox */
	background-image:-webkit-gradient(linear, green, blue); /* Chrome, Safari */
	background-image:-o-linear-gradient(green, blue); /* Opera */
	background-image:-ms-linear-gradient(green, blue); /* IE */
}

Faire des dégradés en CSS c’est bien. Le faire correctement, c’est mieux ! Voici donc un récapitulatif de ce qu’il ne faut oublier lorsque l’on les utilise.

D’abord le fallback

Lorsque vous utilisez des dégradés, le premier item de votre checklist doit impérativement être la couleur de fond de fallback (càd de secours). Il s’agit de la couleur de fond qui sera affichée si le dégradé n’est pas chargé.

En effet, un navigateur ne comprenant pas les dégradés (ex : FF3.6 et IE6 à 9), n’appliquera pas de couleur par défaut si on ne lui spécifie pas. Dans ce cas, vous serez à coup sûr confrontés à des problèmes d’affichage et de contrastes.

N’oubliez donc jamais de placer un background-color sous peine d’obtenir un résultat du même type que la capture ci-dessous.

Utiliser des valeurs relatives

Un internaute n’a ni le même navigateur ni les mêmes préférences que vous et ne naviguera jamais comme vous sur un site. On ne le dira jamais assez, un site Web est un média flexible. Styler en utilisant des unités de grandeurs en pixel, c’est le mal.

Pour survivre à cette torture, vos propriétés CSS se doivent d’être définies avec des unités de valeurs relatives : %, em, etc.

Cette bonne pratique s’applique également au dégradés. Si vous les définissez en pixels, vos dégradés n’auront plus l’effet escompté lors d’un agrandissement de texte par l’utilisateur.

La transparence pour la maintenance

Ne nous le cachons pas, définir des dégradés en CSS3, c’est chiant : code complexe à retenir, calibrage hasardeux des couleurs et ajustements à tâtons. C’est pourquoi il existe de formidables outils nous permettant de copier-coller des dégradés tout fait, par exemple : Ultimate CSS Gradient Generator de ColorZilla ou CSS3 Gradient Generator de Damian Galarza.

Un axe pour se faciliter les dégradés est d’utiliser la transparence de ceux-ci en couplant avec un couleur de fond. Le principe, n’utiliser des dégradés que de blanc ou noir vers le transparent qui seront affichés en sur couche d’une couleur unie.

Cette méthode se révèle particulièrement utile lorsque des changements de couleurs sont prévues sur les pseudo-classes visited, hover ou active.

Démo sur les dégradés transparents