Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels HTML/CSS

Revigorez vos travaux d’intégration en suivant les préconisations des instances mondiales de l’Internet !

Tutoriels HTML/CSS

Bonnes pratiques sur les dégradés CSS3

L’avantage des dégradés en CSS3 est que l’on peut d’ores et déjà les implémenter si l’on est adepte du « progressive enhancement ». Mais si on les utilise, autant bien le faire. Voici donc quelques petits trucs à ne pas oublier.

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


Ce que nos lecteurs en disent :

  1. Vincent

    Salut Sam,

    Merci pour le petit récap, c’est bien sympa.

    Je note une chose en fin de lecture : sur ta page de démonstration je constate de forts ralentissements lors du scrolling (sous Fx 4.0 Mac). J’ajouterais donc : n’abusez pas à outrance de cette technique, toujours au stade de l’expérimentation dans les navigateurs.

  2. shooo

    Merci pour cet article fort interessant.

    Domage que le site ne soit pas actualisé plus souvent, mais bon, je passe 1 fois par an pour voir ce qui est sortie :D

    ps: magnifique theme, bravo.

Les commentaires sont clos.