18041 sujets

Questions générales et questions de débutants

[Résolu] .class conditionnelles en [HTML]

Bonjour tout le monde,

Je suis en train de tester mon site avec iE, j'ai remarqué quelques différences à Mozilla. Je suis tombé sur l'article : les classes conditionnelles en html

Je n'arrive pas à faire marcher cette fonction. Lorsque je mets :

  <!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if gt IE 9]> <html class="ieMore"> <![endif]-->


Rien ne se passe avec "gt IE 9]".

En mettant : 

<!--[if IE]> <html class="ieMore"> <![endif]-->


Rien ne se passe après ie 9 avec débug bar.
Modifié par blond1n (01 Sep 2017 - 11:06)
Modérateur
Salut,

Du coup je crois que tu as mal lu l'article que tu as posté...
Le code d'exemple est sensiblement différent sur la dernière ligne :
<!--[if lte IE 7]> <html class="ie67 ie678" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="ie8 ie678" lang="fr"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="fr"> <!--<![endif]-->

et c'est peut être justement fait pour pouvoir avoir un fallback car IE>10 ne reconnait pas ces commentaires.

Et comme le dit Raphaeal sur ce post https://forum.alsacreations.com/topic-2-59368-1-Commentairesconditionnelsie9.html : Smiley quiote Juste pour info, "gte IE 9" n'a guère d'utilité puisque IE10 (et les suivants) ne reconnait plus les commentaires conditionnels. [/quiote]
j'ai fait le test avec le code de Raphael, il me rajoute la class "ieMore" pour Mozilla. Le problème css intervient sur ie11. Du coup je teste un peu dans tout les sens pour voir Smiley sweatdrop 


 <!--[if lte IE 7]> <html class="ie67 ie678" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="ie8 ie678" lang="fr"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="ieMore" lang="fr"> <!--<![endif]-->


Je ne pige pas trop pourquoi ce <!--> et <!--
Modifié par blond1n (01 Sep 2017 - 11:53)
Administrateur
blond1n a écrit :

Je ne pige pas trop pourquoi ce &lt;!--&gt; et &lt;!--

C'est une astuce pour que le commentaire soit reconnu par les autres navigateurs hors Microsoft.

Sur le principe général : en quoi as-tu besoin de commentaires conditionnels aujourd'hui ? Tiens-tu encore compte de IE9 ?
Modérateur
Et bah c'est un fall back.

- Si le navigateur reconnait les commentaire conditionnel il ne va pas afficher cette ligne (sauf pour IE9) :
<!--[if gt IE 8]><!--> <html class="ieMore" lang="fr"> <!--<![endif]-->

<!--[if gt IE 8]> sera reconnu donc --> ne fermera pas le commentaire, c'est <![endif]--> qui le fera

- Et si le navigateur ne reconnait pas les commentaire conditionnels alors il affiche cette ligne quand meme :
<!--[if gt IE 8]><!--> <html class="ieMore" lang="fr"> <!--<![endif]-->

[if gt IE 8] ne sera pas reconnu donc il ne prendra en compte que la premiere partie <!-- comme un commentaire classique quoi. Et du coup le --> referme le commentaire pour pouvoir print la balise html.

Ca permet d'avoir une balise html par défaut quoi... Parceque sur Mozzilla qui s'en tape des commentaire conditionel ca voudrait dire que tu n'a pas de balise <html> qui s'ouvre... gênant non ?
Ben en faite sur ce site lorsque je suis dans la zone réduction (bleue), sur Mozilla les petits bonhommes apparaissent bien comme il faut, sous IE, ça déconne. En mettant 
<!--[if gt IE 8]><!--> <html class="ieMore" lang="fr"> <!--<![endif]-->
Mozilla récupère la class "ieMore" alors que je souhaite que seul sous Ie "ieMore" soit utilisée.
Modifié par blond1n (01 Sep 2017 - 12:03)
Modérateur
Oui si tu as bien suivi, les commentaire conditionnels sont fait pour détecter les IE<=9
Donc les IE10+ vont réagir exactement de la même façon que FF, Chrome etc...

Si ton soucis c'est aussi de différencier IE10+ des autres navigateurs alors il va falloir chercher ailleurs vu que les commentaire conditionnels ne sont plus reconnu.
ok, merci pour ta réponse. J'ai compris.. Smiley cligne

L'interprétation du css par IE10+ n'était pas la même que FF et les autres. Il écrasait l'image sur son élément parent. En modifiant le css pour tout le monde du coup l'erreur de IE10 a disparu. Par contre je ne comprend pas cette interprétation du css..
Merci aux presseurs de Kiwis (Raphael et _laurent ! Smiley biggrin

Je poursuis ma route. . à la prochaine banane sur le sol [la toile]
Sujet clos
Aller à