La transparence en CSS

La transparence en CSS est une question qui revient très souvent. Prise en charge différemment sur chaque navigateur, elle peut s’avérer confuse au premier abord.
Il va falloir définir séparément plusieurs attributs pour prendre en compte cette transparence sur chaque navigateurs (et même IE6, pfff…).
Heureusement ces attributs ne se parasitent pas entre eux !

Voici un exemple avec 50% de transparence :

Attention : l’ordre est important !

.transparent_class {
filter:alpha(opacity=50); // en premier
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

Détails de chaque propriétés CSS :

• opacity: 0.5; est le plus important car il représente le standard CSS en place. Il fonctionne sous de nombreuses versions de Firefox, Safari, et Opera. Si tous les navigateurs respectaient les standards il n’y aurait pas besoin d’autre chose.
• filter:alpha(opacity=50); Celui-ci est pour IE.
• -moz-opacity:0.5; Celui-ci concerne les anciennes versions de Mozilla comme Netscape Navigator.
• -khtml-opacity: 0.5; Celui-là concerne les anciennes versions de Safari (1.x) quand le moteur de rendu était sous KTHML, à l’opposé de l’actuel WebKit.