Untitled Document
Assurer une compatibilité multinavigateur grâce aux commentaires conditionnels

En savoir plus

 

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 !

 


JDN Développeur Envoyer Imprimer Haut de page