De l’opacité qui fonctionne sur (quasiment ?) tous les navigateurs !

Sur l’ancienne version de vinch.be, j’utilisais de l’opacité sur quelques blocs pour améliorer légèrement le look général du site.

J’avais à l’époque créé un page sur laquelle j’expliquais comment j’avais fait pour que ce soit visible de la même façon sur tous les navigateurs. Comme cette page a aujourd’hui disparu, et en attendant CSS 3, voici un rappel de la façon de procéder…

Le bloc qu’on veut rendre opaque à 50% a l’identifiant foo. Dans le fichier CSS, on a donc :

#foo {
    opacity:0.5;
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
    filter:alpha(opacity=50);
}

* opacity est la future propriété CSS 3, qui fonctionne déjà sur quelques navigateurs, dont Opera.
* -moz-opacity fonctionne sur les navigateurs dont le moteur de rendu est Gecko, comme Firefox, Camino, Flock, etc.
* -ktml-opacity fonctionne sur les navigateurs dont le moteur de rendu est KHTML, comme Konqueror, Safari, etc.
* la dernière propriété fonctionne uniquement sur le navigateur de Microsoft.

J’ai créé un exemple simple sur cette page.

Si vous êtes un puriste, évitez d’utiliser ce mécanisme, car cela menera inévitablement à des erreurs de validation CSS.

* Pour en savoir plus sur l’opacité : Transparence des images et navigateurs
* Pour en savoir plus sur les moteurs de rendu des navigateurs : Petite étude sur les moteurs de rendus (layout engines)