Commentaire conditionnel CSS
Commentaire conditionnel CSS - HTML/CSS - Programmation
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 :
|
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> :
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]](https://forum-images.hardware.fr/images/perso/bighead.gif "[:bighead]")
Message édité par phosphoreloaded le 21-01-2010 à 23:51:01
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
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 
Sujets relatifs:
- défilement horizontal avec la pté CSS overflow
- Alignement de texte à droite CSS
- CSS pas pris en compte + question sur firebug
- Problème hauteur CSS
- [HTML/Css/Javascript] Listes liées avec la librairie prototype
- Menu déroulant CSS
- script commentaire et appels javascript
- problème firefox/CSS [RESOLU]
- [CSS] Un site extensible
- (resolu) Problème de positionnement d'un bouton CSS
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 :
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> :
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.