5568 sujets

Sémantique web et HTML

[Résolu] Commentaires et boucles conditionnelles pour IE

Je ne comprends pas comment fonctionne ce code, plus précisément l'ajout de la partie
<!--> après le <!--[if gt IE 7]>. A quoi sert-il ?
Pourquoi le endif final est-il différent : <!--<![endif]--> ?




<head>
  <!--[if lte IE 7]>
    <link type="text/css" rel="stylesheet" 
          href="http://tools.w3clubs.com/pagr/2.expires.css">
  <![endif]-->
  <!--[if gt IE 7]><!-->
    <link type="text/css" rel="stylesheet" 
          href="http://tools.w3clubs.com/pagr/1.expires.css">
  <!--<![endif]-->
</head>

Modifié par yanngaudino (09 Apr 2014 - 16:38)
Administrateur
Bonjour,

c'est la version la plus compliquée : Smiley smile

- un IE prenant en compte les commentaires condtionnels (jusqu'à la version 9 incluse donc) voit l'ouverture d'un commentaire conditionnel (ça commence par "[if qqch]" dans un début de commentaire HTML "<!--") et le traite jusqu'à rencontrer le <![endif]-->
- un navigateur moderne (autre qu'IE et IE10+) n'a aucune idée de ce qu'est un "commentaire conditionnel". Il voit des commentaires HTML.
Et --> ben ça ferme un commentaire HTML donc le 2e élément link sera bien traité par tous ces navigateurs. Après ce 2e élément link il y a à nouveau un commentaire HTML qui commence par <!-- et termine par -->

De la lecture, par Florent : http://www.alsacreations.com/astuce/lire/48-commentaires-conditionnels.html
Modifié par Felipe (09 Apr 2014 - 17:25)
Je suppose que l'ordre des liens a son importance ?

Je m'explique si j'ai un lien vers un fichier CSS nommé base-ie.css et un lien vers un fichier base.css, je pense qu'il faut d'abord mettre le lien normal (lu par les navigateurs autres que IE) puis ma boucle conditionnelle [if lte IE 9] et le lien vers base-ie.css.

D'ailleurs j'ai constaté sous IE8 lorsque je mettais la condition [ if IE] elle était ignorée par le navigateur qui appliquait la feuille base.css,

Il a fallu que je mette [if lte IE 9] avec un espace entre IE et 9 pour que la boucle soit prise en compte.

Je vais donc maintenant tester avec if IE 8 pour voir si cela change qqchose.
Administrateur
L'ordre des éléments link impose l'ordre des règles CSS chargées donc oui il est important.
Si on prend un sélecteur .classe utilisé dans 2 règles, l'une lue par tous les navigateurs et l'autre lue uniquement par IE parce que chargée dans un commentaire conditionnel : les 2 ont la même spécificité (ils sont identiques...) donc le dernier va écraser le premier (*) et il faut donc que le dernier soit celui pour IE.

(*) C'est pas toute la règle qui écrase l'autre, c'est pour chaque instruction présente dans les 2 règles. S'il y a display dans l'une et pas dans l'autre, rien ne l'écrasera/elle n'écrasera rien Smiley smile

Pour info, on utilise plutôt les classes conditionnelles pour des raisons de performance (charger le moins de fichiers possibles, surtout sur des navigateurs qui sont assez lents comme ça) et aussi de maintenance (.ie8 .truc écrase toujours .truc et on voit de suite à quoi ça va servir, c'est écrit dedans ^^) m'enfin ça fonctionne aussi sans. En terme de priorités pour améliorer les perfs, compresser les images l'est bien plus.
Modifié par Felipe (10 Apr 2014 - 12:40)
Merci pour les réponses, grâce à celle ci j'ai pu modifier l'organisation de mes sources pour le rendre plus lisible. Et pour le prochain site, j'essayerai de faire mieux directement....
Sujet clos
Aller à