Commentaire conditionnel CSS

Commentaire conditionnel CSS - HTML/CSS - Programmation

Marsh Posté le 21-01-2010 à 23:14:37    

Bonjour,  
 
sur mon site j'ai un menu déroulant et dans ce menu déroulant j'ai mis dans mon [B]mapage.css[/B] une image png de cette cette sorte :
 

Code :
  1. #menu li a:hover {background:#09c; color:#fff;}
  2. #menu li:hover > a {background:#09c; color:#fff;}
  3. #menu li a.fly {background: url(arrow.png) no-repeat right top;}
  4. #menu li a.fly:hover {background:#09c url(arrow.png) no-repeat right top;}
  5. #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. <!--[if IE 6]>
  2.       <link rel="stylesheet" href="css/ie6.css" type="text/css" />
  3. <![endif]-->


 
Et donc créé un fichier ie6.css qui sera identique à mon [B]mapage.css[/B] 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 [B]mapage.css[/B] 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.

Reply

Marsh Posté le 21-01-2010 à 23:14:37   

Reply

Marsh Posté le 21-01-2010 à 23:46:34    

charlelechauve a écrit :

Bonjour,

 

sur mon site j'ai un menu déroulant et dans ce menu déroulant j'ai mis dans mon [B]mapage.css[/B] une image png de cette cette sorte :

 
Code :
  1. #menu li a:hover {background:#09c; color:#fff;}
  2. #menu li:hover > a {background:#09c; color:#fff;}
  3. #menu li a.fly {background: url(arrow.png) no-repeat right top;}
  4. #menu li a.fly:hover {background:#09c url(arrow.png) no-repeat right top;}
  5. #menu li:hover > a.fly {background:#09c url(arrow.png) no-repeat right top;}



Code :
  1. #menu li a:hover,
  2. #menu li:hover > a {background:#09c; color:#fff;}
  3. #menu li a.fly {background: url(arrow.png) no-repeat right top;}
  4. #menu li a.fly:hover,
  5. #menu li:hover > a.fly {background-color: #09c;}


Pas besoin de repréciser tout dans l'état :hover , juste ce qui change par rapport au lien "au repos" (Tout ce qui s'applique à "#menu li a.fly" s'applique aussi à "#menu li a.fly:hover" )
Comme les deux derniers blocs d'instruction sont identiques, autant regrouper via une virgule les 2 sélecteurs de règles. edit: idem pour les 2 premiers

 
charlelechauve a écrit :

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. <!--[if IE 6]>
  2.       <link rel="stylesheet" href="css/ie6.css" type="text/css" />
  3. <![endif]-->
 

Et donc créé un fichier ie6.css qui sera identique à mon [B]mapage.css[/B] sauf que pour mes background cités ci dessus je ne mettrait pas mon arrow.png.


un fichier ie6.css qui sera identique à mapage.css ? Euh ...
IE6 applique comme tous les autres navigateurs toutes les instructions de la feuille de style mapage.css (sauf ce qu'il ne comprend pas comme li:hover)
Dans la CSS chargée via un commentaire conditionnel, tu n'as à préciser que ce qui est différent par rapport à mapage.css ! Ce qui est commun est déjà stylé grâce à mapage.css, il ne faut pas le réécrire dans ie6.css c'est juste inutile et même source d'erreur puisque chaque modif° doit être faite dans 2 fichiers, chose que tu oublieras forcément de faire au moins une fois.

 
charlelechauve a écrit :

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 [B]mapage.css[/B] 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.


D'autres méthodes seraient possibles:
- un fichier JS chargé de s'occuper des PNG transparents sous IE6. C'est pas 100% compatible mais si ça fonctionne, c'est simple à mettre en place
- un truc trop compliqué qui cible les non-IE puis les IE>6 puis IE6 . 3 commentaires conditionnel pour une flèche, ça se justifie pas, autant ne s'occuper que d'IE6 contre le reste du monde
- pour une bête flèche, un PNG-8 transparent créé avec Fireworks ou un PNG-8 façon GIF sont amplement suffisants. Ou alors tu as un menu déroulant avec des images de fond complexes et j'imagine le pire quand au résultat  [:bighead]


Message édité par phosphoreloaded le 21-01-2010 à 23:51:01
Reply

Marsh Posté le 24-01-2010 à 01:23:35    

J'ai tout bêtement pris ta denière méthode, en convertissant mon pgn en png-8 et ça marche niquel; le tout en 179 octets :)
J'ai aussi fait les modifications dans le CSS. Encore un gain d'espace et donc plus de claireté dans mon CSS  :)  
 
Merci encore une fois pour ton aide


Message édité par charlelechauve le 24-01-2010 à 01:24:38
Reply

Marsh Posté le 24-01-2010 à 02:19:21    

Edit : pour le CSS, je suis obligé de tout repréciser pour a.hover et a.fly.hover sinon mon menu ne se colori plus au passage de la souris et ne se dépli même plus (sous IE6 uniquement).  
 
Foutu IE6 :)
 
Mais bon, en reprécisant tout ça marche donc problème résolu tout de même ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed