Tutoriel CSS - sommaire

CSS3 : intérêt du codage en RGBA ou en HSLA

Rappels

Rappels : le module de couleurs de niveau 3 de CSS introduit deux nouvelles techniques de codage : HSL et HSLA et standardise 147 noms (anglais bien sûr) de couleurs. Avec une telle profusion de noms de couleurs, pourquoi s'embêter à coder encore les couleurs en hexadécimal ???

Dans cette page je vais vous montrer que l'emploi de la propriété opacity réserve quelques surprises. Et que dans certains cas, vous n'avez pas le choix, vous devez coder les couleurs en RGBA ou HSLA.

La propriété opacity a ceci de particulier qu'elle s'applique à l'ensemble constitué de l'élément lui-même et de ses descendants.
Et ce n'est pas le mécanisme d'héritage habituel : la rupture d'héritage pour les enfants n'est pas possible !

Le codage RGBA

Ci-dessous trois boîtes avec un fond jaune à demi transparent (ou à demi opaque).
Sauf dans la boite du milieu, le texte est aussi à demi transparent.

Le code correspondant

RBGA est un nouveau système de notation de la couleur.
Le A dans RGBA désigne la couche alpha c'est à dire le niveau de transparence (ou d'opacité).

Dans la boîte de gauche (identifiée fond1) la boîte est remplie de jaune (code : rgb(255,255,0)) mais en plus emploi de la propriété opacity à 0.5.
L'inconvénient de la propriété opacity est qu'elle se transmet aux éléments enfants. On dit qu'il y a héritage. Donc le texte balisé par H4 (enfant de DIV) hérite de la demi opacité.

Par contre dans la boîte du milieu (identifiée fond2) la boîte est remplie aussi de jaune à demi transparent mais le texte est d'un noir opaque car la couleur de remplissage du conteneur a été codé en RGBA donc sans utiliser la propriété opacity. Il n'y a pas héritage.

Dans la boite de gauche (identifié "fond3") j'ai voulu faire une rupture d'héritage (balise H4 avec style = 'opacity : 1"). Mais cette commande n'est pas prise en compte par le navigateur. Donc

La notation HSLA

Ci-dessous deux boîtes avec un fond jaune à demi transparent (ou à demi opaque).
Dans la boîte de gauche le texte est aussi en noir à demi transparent ce qui n'est pas le cas dans la boîte de droite ( texte en noir bien opaque).

Le code correspondant :

Il y a aussi les règles de style relatives aux sélecteurs DIV et H4.

Le A dans HSLA désigne la couche alpha donc le niveau d'opacité.

Dans la boîte de gauche (identifiée fond3) la boîte est remplie de jaune (code hsl(60,100%,50%)) mais en plus avec la propriété opacity à 0.5.

Dans la boîte de droite (identifiée fond4) la couleur de fond est codée en HSLA (code : hsla(60,100%,50%,0.5)).

Conclusion

Donc si vous ne voulez pas que les "descendants" héritent de la transparence définie au niveau du "parent" utilisez la notation RGBA (ou HSLA) pour ce parent plutôt que la notation RGB (ou HSL) couplée avec la propriété opacity.

Ci-dessous liens vers deux applications très pratiques pour déterminer le code RGBA ou HSLA d'une couleur composée via des curseurs :
Application pour obtenir le code RGBA d'une couleur à partir d'une palette
Application pour obtenir le code HSLA d'une couleur à partir d'une palette