Support des couleurs RVBA (CSS3)

Màj: 14 avril 2010

Que sont les couleurs RVBA?

Cette page teste le support des couleurs RVBA (couleurs RVB — dit aussi RGB en anglais pour red, green, blue — avec couche alpha, c'est-à-dire avec un degré d'opacité) avec différents navigateurs web.

Ce type de couleur permettra par exemple d'afficher un fond translucide sans avoir recours à une image de fond en PNG-24. Contrairement à la propriété CSS opacity, cela permettra aussi de dissocier le traitement des fonds du traitement du contenu (texte et éléments enfants et descendants).

La syntaxe CSS pour les couleurs RVBA est décrite dans le document CSS Color Module Level 3.

Test de la notation de couleur rgba(r,g,b,a)

On utilise une couleur de fond RVBA pour le fond des blocs suivants:

Test 1

background-color: rgb(255,255,255);
background-color: rgba(255,255,255,0.6);

Ce bloc est censé avoir un fond blanc translucide (opaque à 60%).
Ou, à défaut, un fond blanc opaque.

Test 2

background: rgb(255,255,255);
background: rgba(255,255,255,0.6);

Ce bloc est censé avoir un fond blanc translucide (opaque à 60%).
Ou, à défaut, un fond blanc opaque.

Pour ces deux tests, on déclare deux fois la propriété background-color; la première fois avec une valeur RVB (opaque), et la deuxième fois avec une valeur RVBA (translucide). La première déclaration sert de déclaration de «rattrapage» (fallback, en anglais). Au cas où un navigateur ne comprendrait pas la deuxième valeur, il doit la considérer comme invalide et conserver la première valeur.

La valeur de «rattrapage» est déclarée avec la propriété background-color dans le premier test, et la propriété de raccourci background dans le deuxième test. Vous aller voir pourquoi avec les résultats ci-dessous.

Résultats du test

À l'heure actuelle, la majorité des navigateurs intègre le support des couleurs RVBA en CSS. Les navigateurs qui ne l’implémentent pas sont Internet Explorer 7 et 8.

Rendu observé pour les cadre blocs du test, par navigateur
Navigateur Résultat test 1
(background-color)		 Résultat test 2
(background)
Internet Explorer 6-7 Pas de couleur de fond! Fond blanc opaque
Firefox 2, Opera 9.6, Safari 3.0 Fond blanc opaque Fond blanc opaque
Internet Explorer 8 Fond blanc opaque Fond blanc opaque
Firefox 3+, Opera 10+, Safari 3.1+, Chrome 1+ Fond blanc translucide Fond blanc translucide
Internet Explorer 9
(version platform preview non finale)		 Fond blanc translucide Fond blanc translucide

Bug d’Internet Explorer 6-7 avec background-color

Les versions 6 et 7 d’Internet Explorer ont beaucoup de mal à afficher la couleur opaque «de rattrapage». C’est un bug qui a été corrigé dans la version 8 de ce navigateur.

Il existe deux solutions:

  1. Comme dans notre test 2, utiliser la propriété background plutôt que background-color. Dans ce cas, la valeur de rattrapage sera prise en compte même par IE 6 et 7. Attention, si vous utilisez une autre propriété en plus de background, par exemple un background-image, vous perdrez la couleur de fond dans IE 6-7. (La source de cette astuce est css-tricks.com. Mais contrairement à ce qui est écrit sur cet article, les notations autres que hexadécimale marchent aussi, comme dans notre exemple.)
  2. Appliquer un background-color juste pour IE6 et IE7 (ou juste IE7 si vous n’assurez pas le support d’IE6…), par exemple en utilisant les commentaires conditionnels (voire une classe conditionnelle pour IE 6 et 7).