Easy-Micro

LANGAGE Langage CSS
CSS conditionnels

Commentaires CSS conditionnels

CSS Commentaires CSS conditionnels pour IE

Qui n'as pas eu de problèmes de compatibilités avec le navigateur Microsoft Internet Explorer pour Windows lors du développement d'un site Internet avec des styles CSS?

Ces défauts d'implémentation CSS d'IE (les trops fameux hacks CSS) peuvent-être gérer par des commentaires conditionnels pour Internet Explorer associés aux feuilles de style.

L'idée est de présenter une condition au navigateur de chez Microsoft:
"si tu est inférieur à IE 7... alors utilise telle feuille de style... sinon telle autre"

Exemple de syntaxe (valable uniquement pour IE):
<!--[if lt IE 7]> /* déclaration du style pour IE */ <![endif]-->

L'opérateurs de comparaison "[if lt IE 7]" veut dire "if less than IE 7" (si inférieur à IE 7)

CSS Exemple avec un menu (basé sur une liste - voir le code ci-dessous):


<html><head>
<style type="text/css">

#menu ul {overflow: hidden ;}
#menu ul li { float: left ; width:100px; }

</style>
<!--[if lt IE 7]>
<style type="text/css">
#menu ul {overflow: visible ;}
#menu ul li { float:expression('left'); width:expression(100 + "px"); }
</style>
<![endif]-->
</head><body>...

Est utilisé dans l'exemple ci-dessus, une extension propriétaire de IE: les expressions. Elles permettent de spécifier un style sous forme d'expression javascript. Cela n'est, bien sur, pas du tout obligatoire dans cet exemple. Plus d'infos sur les expressions sur Svend Tofte (en anglais) et sur Alsacréations.

On peut aussi utiliser les commentaires conditionnels sur les liens de feuilles de style CSS:
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/ie_only.css" /><![endif]-->

Il existe en fait deux types de commentaires conditionnels:
Downlevel-hidden dont leur contenu n'est lu que par IE pour Windows.
Downlevel-revealed qui masque leur contenu à IE (mais invalide en XHTML).

Attention: les commentaires conditionnels ne sont transposable sur aucun autre navigateur. Chez les autre navigateurs, ces commentaires conditionnels deviennent de simple commentaires. Donc sans risque d'erreur sous un Firefox, Safari ou autre Opera. Pour plus d'infos, je vous recommande l'excellent billet sur le blog de Laurent Denis, Blog et Blues.

Voici le code du menu visible ci-dessus réalisé à partir d'une lise à puce
/* soit, pour tous li contenu dans un ul contenu dans un div "contenu" */
div#contenu ul li {
display: inline ;
border: 1px solid gray;
margin-left:-5px;
padding:5px;
}

/* soit, pour tous liens (a) contenu dans un li, contenu dans un ul contenu dans un div "contenu" */
div#contenu ul li a {
padding:5px;
margin:-5px;
}

div#contenu ul li a:hover {
padding:5px; margin-left:-5px;
background-color:#ffffaa;
}


< Page précédente LANGAGE CSS Page suivante >