Commentaire conditionel en CSS
Bonjour,
sur mon site j'ai un menu déroulant et dans ce menu déroulant j'ai mis dans mon mapage.css une image png de cette cette sorte :
Code:
1
2
3
4
5
| #menu li a:hover {background:#09c; color:#fff;}
#menu li:hover > a {background:#09c; color:#fff;}
#menu li a.fly {background: url(arrow.png) no-repeat right top;}
#menu li a.fly:hover {background:#09c url(arrow.png) no-repeat right top;}
#menu li:hover > a.fly {background:#09c url(arrow.png) no-repeat right top;} |
Cependant le png ne fait pas bon ménage avec IE 6 donc je compte coder pour que cette image "fleche" en png ne soit pas d'actualité sur IE 6.
Pour cela je vais introduire cela dans ma page html dans la balise <head> :
Code:
1
2
3
4
|
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" />
<![endif]--> |
Et donc créé un fichier ie6.css qui sera identique à mon mapage.css sauf que pour mes background cités ci dessus je ne mettrait pas mon arrow.png.
Je n'ai pas encore testé, mais dans la logique des choses comme je vous ai présenté ma façon de résoudre le problème, ca devrait marcher.
Mais la je me demande : est ce qu'il y a un moyen de résoudre ce probleme autrement qu'en créant 2 fichiers css ? C'est à dire, puis je poser ma conditions autrement, peut etre meme directement dans mon mapage.css pour que mon arrow.pgn ne s'affiche pas si je suis sous IE6 ?
Merci d'avance
nb : je sais qu'au lieu de faire ma fleche en png je pourrais la faire en jpg en mettant les couleurs autour de cette fleche de la meme couleur que mon background, mais ca m'oblige à retoucher trop d'image car j'utilise plusieurs types de fleche.
