Hello, I’m Vinch

And this is my website.

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

01/31/07

This post is more than 10 years old. It might not reflect my current skills and convictions.

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)

3 comments

Leave a comment