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 navigateur (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 {
-khtml-opacity:0.5;
-moz-opacity : 0.5;
-ms-filter: "alpha(opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
filter : alpha(opacity=50);
opacity : 0.5;
}
Détails de chaque propriété CSS :
- -khtml-opacity: 0.5; Celui-là concerne les anciennes versions de Safari (< 2.1) quand le moteur de rendu était sous KTHML, à l’opposé de l’actuel WebKit.
- -moz-opacity:0.5; Celui-ci concerne les anciennes versions de Mozilla comme Netscape Navigator ou Firefox <= 0.9.
- -ms-filter: « alpha(opacity=50) »; Celui-ci concerne Internet Explorer 8 et il est interprété par IE 10
- filter: progid:DXImageTransform.Microsoft.Alpha(opacity=10); Celui-ci concerne Internet Explorer > 4 et Internet Explorer < 8 et il est interprété par Internet Explorer 10
- filter : alpha(opacity=10); Celui-ci concerne Internet Explorer 4
- 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.