La transparence en CSS

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 !

[code lang=”css”]
.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;
}
[/code]

Détails de chaque propriétés 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.
Frédéric Voignier

Frédéric Voignier opère en tant que WebDeveloper et WebDesigner Freelance, depuis plus de 14 ans au service d'une clientèle variée. Je suis fervent défenseur de la création de site Internet juste, et du retour sur investissement. Passionné du Web et de son expérimentation, je me tiens informé des évolutions technologiques, relatives au web et à la visibilité en ligne.

0 Commentaire

Laisser un commentaire