Comme un exemple est tout aussi important qu'une explication, nous allons manipuler une page HTML simple qui
présente toutes les caractéristiques d'une incompatibilité entre navigateurs, en utilisant l'effet d'opacité. En effet, cette
fonctionnalité est native dans les moteurs d'interprétation moderne, mais elle est soumise à différentes syntaxes.
<HTML>
<HEAD>
<-- commentairesConditionnels_1.html -->
<TITLE>Commentaires conditionnels</TITLE>
<STYLE>
BODY {
background-color: #999999;
}
DIV.titre {
clear: both;
padding-top: 10px;
font-weight: bold;
}
.opacityLessThanIE55 {
background-color: #ffffff;
float:left;
border: 1px solid #000000;
/* 100% = bloc opaque ; 0% = bloc transparent */
filter: alpha(opacity=50);
}
.opacityForAndMoreThanIE55 {
background-color: #ffffff;
float:left;
border: 1px solid #000000;
/* 100% = bloc opaque ; 0% = bloc transparent */
filter:progid:DXImageTransform.Microsoft.Alpha
(opacity=50);
}
.opacityForMozilla {
background-color: #ffffff;
float:left;
border: 1px solid #000000;
/* 1 = bloc opaque ; 0 = bloc transparent */
-moz-opacity: 0.5;
}
.opacityForOthers {
background-color: #ffffff;
float:left;
border: 1px solid #000000;
/* 1 = bloc opaque ; 0 = bloc transparent */
opacity: 0.5;
}
</STYLE>
</HEAD>
<BODY>
<DIV class="titre">class="opacityLessThanIE55"</DIV>
<DIV class="opacityLessThanIE55">
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed non risus.
Suspendisse lectus tortor, </p>
</DIV>
<DIV class="titre">class="opacityForAndMoreThanIE55"
</DIV>
<DIV class="opacityForAndMoreThanIE55">
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit </p>
</DIV>
<DIV class="titre">class="opacityForMozilla"</DIV>
<DIV class="opacityForMozilla">
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit </p>
</DIV>
<DIV class="titre">class="opacityForOthers"</DIV>
<DIV class="opacityForOthers">
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, </p>
</DIV>
</BODY>
</HTML>
Le rendu dans Internet Explorer 7, Opéra 9.23 et Firefox 2 est éloquent !