5603 sujets

Sémantique web et HTML

[Résolu] Problème avec les commentaires conditionnels

Bonjour,
J'ai un problème avec cet hack CSS :

<!--[if lte IE 8]><script type="text/javascript" src="scripts/roundies.js"></script><![endif]-->
	<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen,projection"/><![endif]-->
	<!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen,projection"/><![endif]-->


Le navigateur IE6 lit la feuille de style ie7.css au lieu de ie6.css.

La syntaxe étant bonne je vois pas ou est le problème. Une solution ?

Merci.
Modifié par dartktemplar371 (28 Mar 2010 - 21:11)
Tu as quand même une quantité impressionnante de styles CSS dans tes feuilles de styles ie6.css et ie7.css. Ce sont uniquement des correctifs ou tu as dupliqué des styles de la feuille de styles principale pour y faire ensuite quelques modifications?

Pour ma part je préfère utiliser les commentaires conditionnels ainsi:
<body>
<!--[if lte IE 7]><div class="ISIE67"><![endif]-->

...

<!--[if lte IE 7]></div><![endif]-->
</body>

Ainsi, dans IE 6 et 7, tous les contenus de la page auront pour parent ou ancêtre un élément qui a la classe "ISIE67", ce qui permet d'écrire en CSS:
#test {
  /* Styles pour tous navigateurs */
}
.ISIE67 #test {
  /* Styles pour IE 6 et 7 */
}
body > .ISIE67 #test {
  /* Styles pour IE 7 */
}
* html .ISIE67 #test {
  /* Styles pour IE 6 */
}

Seul le dernier sélecteur est un hack à proprement parler: c'est une syntaxe de sélecteur qui ne devrait rien sélectionner (car l'élément html est l'élément racine), mais qui marche tout de même avec IE6. Comme on utilise la classe "ISIE67" insérée via un commentaire conditionnel (fiable), on peut être sûr de s'adresser uniquement à certains navigateurs, en l'occurrence IE 7 et IE 6 (et éventuellement IE 5 mais vu les parts de marché inexistantes de ce dernier j'ignore en général ce risque).

Les avantages de cette méthode:
1. Pas de téléchargement de fichiers supplémentaires (optimisation des performances en diminuant les requêtes HTTP).
2. Les correctifs CSS pour IE6 et IE7 suivent directement les styles «normaux», ce qui facilite la maintenance.

Les inconvénients:
1. On ne peut pas adresser de correctifs pour IE 6-7 aux éléments HTML et BODY.
2. Les scripts JS qui rajoutent un contenu juste avant </body> générent un code qui ne peut pas être style via la classe "ISIE67".
(Il y a une parade pour ces deux inconvénients, mais ça demande de faire reposer la technique sur le support de JavaScript.)
Modifié par Florent V. (28 Mar 2010 - 12:50)
Administrateur
Bonjour,

Le problème avec ton site, tu peux le chercher longtemps ...
Voyons voir ... tu es sous Windows XP, tu as IE8 ou IE7 et tu utilises pour voir comment ça s'affiche avec IE6 ... Smiley batterie ... IE TESTER !

IE TESTER C4EST TOUT POURRI (pour pas dire plus upload/39-kof.gif )

Quand l'outil de test cause des problèmes qui n'existent pas, il est temps d'envisager de changer d'outil de test Smiley smile ==> Multiple IE ou une machine virtuelle avec IE6

Florent V.> ah j'avais pas vu ton post ici, je t'ai répondu dans not' salon privé
aux autres> j'aime pas la solution de Florent V., il y a un hack CSS et la syntaxe des sélecteurs CSS pour IE7 et 6 est compliquée à retenir. Je vois pas trop le problème avec les commentaires conditionnels en fait ...
Felipe a écrit :
IE TESTER C4EST TOUT POURRI (pour pas dire plus upload/39-kof.gif)

Ou alors c'est toi qui es pas doué. Moi j'ai jamais eu d'emmerdes de commentaires conditionnels avec IETester, du moins la dernière version et la précédente.

Felipe a écrit :
Quand l'outil de test cause des problèmes qui n'existent pas, il est temps d'envisager de changer d'outil de test

Oué, ou de le mettre à jour parce que c'est une version alpha1 et que le apha3 ou alpha4 corrige le souci.

Felipe a écrit :
j'aime pas la solution de Florent V.

Je me disais bien que t'étais un enfoiré. Smiley biggol
Modifié par Florent V. (28 Mar 2010 - 18:03)
Merci pour cette solution Florent ! Smiley biggrin Par contre j'aimerais toujours avoir une réponse pour le problème de commentaires que j'avais dans mon premier message, car si jamais je fais une découpe en ayant besoin de modifier le body pour IE7 (par exemple) je devrais laisser tomber cette technique.
Je voudrais aussi en savoir plus sur la parade pour le problème de JS (problème que j'ai pas très bien compris...).

"Florent" a écrit :
Ce sont uniquement des correctifs ou tu as dupliqué des styles de la feuille de styles principale pour y faire ensuite quelques modifications?

J'ai plutôt dupliquer les styles et modifier par dessus.

"Felipe" a écrit :
Voyons voir ... tu es sous Windows XP, tu as IE8 ou IE7 et tu utilises pour voir comment ça s'affiche avec IE6 ...

Non, mon Windows n'étant pas "clean" je ne peux pas avoir les versions officielles d'IE7 et 8. Mais j'ai pu télécharger des versions portables.
Modifié par dartktemplar371 (28 Mar 2010 - 19:00)
dartktemplar371 a écrit :
Non, mon Windows n'étant pas "clean" je ne peux pas avoir les versions officielles d'IE7 et 8.

P****n, on croit rêver...

Pour pouvoir travailler correctement et garantir un résultat tel que l'utilisateur final le verra, commence par acquérir légalement les logiciels sous licence propriétaire. Smiley fache
Victor BRITO a écrit :

P****n, on croit rêver...

Pour pouvoir travailler correctement et garantir un résultat tel que l'utilisateur final le verra, commence par acquérir légalement les logiciels sous licence propriétaire. Smiley fache

T'as raison même si je fais pas de travail commercial, mais ton message est un peu hors sujet...

"darktemplar371" a écrit :
Merci pour cette solution Florent ! Smiley biggrin

Je retire ce que j'ai dis, finalement il y a encore un problème : il n'y a pas de distinction entre IE7 et IE8. Mais je crois que je vais arrêter ici, car je fais tout ça que pour IE6 et je me demande si ce dernier mérite vraiment que je fasse encore plus d'efforts... Merci quand même pour toute l'aide apportée.
Modifié par dartktemplar371 (28 Mar 2010 - 22:38)
dartktemplar371 a écrit :
il y a encore un problème : il n'y a pas de distinction entre IE7 et IE8

Si le IE8 que tu utilises lit un commentaire conditionnel pour IE7 ou pour IE7 et inférieurs, tu as un problème avec la version standalone ou autre utilisée.
Si le but est de pouvoir adresser des correctifs CSS à IE8... je te proposerai plutôt d'apprendre à maitriser CSS 2.1, vu qu'IE8 en a un support complet avec peu de bugs. Smiley cligne
Sujet clos
Aller à