28173 sujets

CSS et mise en forme, CSS3

Bojour,

J'ai lu ave GRAND intérêt de très bon tuto http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows

Malheureusement, je pense avoir soulevé un petit bug (à moins bien sûr qu'il ne s'agisse d'un pb de IE7RC, seule version dispo en France à ce jour).

Mon problème est le suivant : je souhaite faire prendre en compte une portion de code à TOUS les navigateurs, SAUF les versions antérieures ou égales à IE6
IE7 devra donc prenre en compte le code.

En suivant le tuto, j'en déduis que je dois utiliser le code suivant :
  <!--[if IE 7]> <-->
      mon code   
  <!--> <![endif]-->

Ca marche très bien, hormis l'affichage du code <--> sous IE7 !
Bien sûr, ce bout de code a son utilité et si on l'enlève, le hack n'est plus fonctionnel.

Donc je voulais vous en parler pour savoir si c'était un bug connu ou non, spécifique à IE7RC ou non
Modifié par EcliptuX (24 Oct 2006 - 00:56)
Euh... je vois pas de bug, pour ma part.
 <!--[if IE 7]>

Ce qui suit ne sera interprété que par IE 7. Pour IE 7, on n'est donc pas dans un commentaire, mais dans du code valide.
<-->

Ceci n'est pas une balise ou un commentaire, donc on l'affiche tel quel
mon code

Bon, ça ça marche aussi, on interprète et on affiche
<!-->

Un commentaire ouvert et non fermé...
<! endif -->

Du bla bla et une fin de commentaire.

Bref, tout marche correctement, non ?
Et non justement Smiley smile
Sous IE7, la chaine de caractère <--> qui suit le code <!--[if IE 7]> est affiché !
Et uniquement sous IE7 Smiley ohwell
EcliptuX a écrit :
Et non justement Smiley smile
Sous IE7, la chaine de caractère <--> qui suit le code <!--[if IE 7]> est affiché !
Et uniquement sous IE7 Smiley ohwell

C'est justement ce que je dis, et je répète que c'est logique.

Pour tous les navigateurs sauf IE7, les commentaires conditionnels utilisés seront traités comme de simples commentaires HTML. Seul IE7 fera comme s'il ne s'agissait pas de commentaires, et analysera le contenu inséré.

Ce contenu commence par <-->. Tu peux faire le test : fournis le code <--> (en dehors de tout commentaire conditionnel) à n'importe quel navigateur, et il sera affiché, car il ne s'agit pas d'un commentaire, mais juste d'un « machin ».

Un commentaire HTML, c'est ceci :
<!-- Commentaire -->


Par contre, le code que tu utilises est un « machin ». Ta question est donc : j'ai mis un « machin » dans un commentaire conditionnel pour IE7, et IE7 me l'affiche, tandis que les autres navigateurs ne le font pas ! Où est le problème ?

Mon sentiment est que la réponse à la question est dans l'énoncé de la question... Smiley rolleyes
Ben disons que mon objectif est que le code s'exécute sur IE7, Firefox, Safari et Opera sans pour autant afficher le code <--> sous IE7
C'est moi qui suis pas clair ?
Bonjour,

Si je comprends bien l'échange, tu demandes à IE7 d'éxécuter du code que tu ne veux pas voir apparaitre dans IE7 (y a comme une erreur, non ?)
EcliptuX a écrit :
Ben disons que mon objectif est que le code s'exécute sur IE7, Firefox, Safari et Opera sans pour autant afficher le code <--> sous IE7
C'est moi qui suis pas clair ?

J'ai l'impression que tu n'es pas tout à fait au point sur les commentaires conditionnels, d'où notre échange qui ressemble à un dialogue de sourds...

Le commentaire conditionnel utilisé signifie que :
- tous les navigateurs sauf IE/win estiment (avec raison) qu'il s'agit d'un simple commentaire HTML, et passent leur chemin ;
- IE/win l'analyse, mais ici seule la version 7 de ce navigateur appliquera le code entre les commentaires conditionnels, les autres versions considérant que ça n'est pas pour elles ;
- IE 7 appliquera donc ce code.

Deuxième étape : que trouve-t-on entre les commentaires conditionnels (appliqués uniquement par IE 7 dans ton cas, donc) ? On trouve un <-->, qui ne correspond à aucune balise, et qui n'est pas (selon les règles de la syntaxe HTML) un commentaire HTML. Bref, IE 7 affichera ce machin (les autres navigateurs/versions ayant passé leur chemin, comme déjà dit...).

Je suis pas sûr d'être clair.

Tu as vraiment un <--> dans ton code, ou en fait il s'agit d'une version « simplifiée » de ce que tu utilises vraiment dans ton code ?

Parce que là je suis perplexe sur l'utilité du machin <--> qui ne correspond à rien...
Je vais reformuler mon pb Smiley smile

Sur la page http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows, en fin d'article, on peut lire ceci :
a écrit :
Pour masquer une feuille de style (ou un autre code HTML) à toutes les versions d'IE Windows, on écrira:

<!--[if !IE]> <-->
   <link href="all-browsers-not-ie-win.css" rel="stylesheet" type="text/css" />
<!--> <![endif]-->


On voit ici apparaître l'opérateur de négation ! (not). L'expression if !IE signifie simplement Si le navigateur n'est pas IE Windows.

Surtout, on remarque également l'apparition de balisages de commentaires HTML supplémentaires. Le principe est :

* Une ouverture de commentaire conditionnelle identique aux précédentes: <!--[if !IE]>, si ce n'est pour la condition not IE dans notre exemple. Celui-ci va donc ignorer tout ce qui suit jusqu'au [endif]. D'autres conditions, incluant ou non la négation, peuvent être utilisées.
* Le code <--> : le double tiret indique aux navigateurs que le chevron > qui suit est une fermeture de commentaires HTML. La ligne suivante est donc interprétée par Safari, Opera, Firefox (et Internet Explorer Mac), etc. comme un lien tout à fait habituel vers une feuille de style.
* Le lien HTML link vers la CSS (ou l'élément style équivalent).
* Le code <!--> indique la réouverture d'un nouveau commentaire HTML
* IE Windows y trouve le tag de fermeture du commentaire conditionnel: <![endif]
* Le commentaire HTML est finalement refermé par -->.

J'ai mis en gras la signification et l'utilité, d'après l'auteur de l'article, du code "<-->" dans ce hack.

Je me suis donc inspiré de ce hack en l'adaptant de la manière suivante :
  <!--[if IE 7]> <-->

      mon code   

  <!--> <! endif -->

Ainsi, d'après l'article sus-cité, le code situé dans ce hack sera lu par : IE7, FF, Safari, Opera.
En revanche, il ne sera pas lu sous IE5, IE 5.5 et IE6.

Effectivement, ça fonctionne ! Pas de pb à ce niveau là Smiley smile

Le seul (petit) soucis, c'est que sous IE7RC, le bout de code "<-->" apparaît en haut du site.
Si je l'enlève du hack, il ne s'affiche évidemment plus sous IE7, mais le code n'est plus exécuté sous FF (et peut-être aussi sous Safari et Opera).
Le hack devient donc inutile.
Et c'est normal, étant donné l'utilité du code "<-->" (voir explication en gras dans l'article)

Donc ma question est la suivante : est-il possible d'avoir le même filtrage de navigateurs via ce hack ou un autre, sans avoir l'inconvénient sous IE7, de voir s'afficher le bout de code "<-->" (qui est interprété par IE7 comme une simple chaîne de caractère!)

J'espère cette fois-ci avoir été plus clair Smiley ravi
EcliptuX a écrit :
J'espère cette fois-ci avoir été plus clair Smiley ravi

Oui, par contre il aurait été utile de préciser dès le départ que tu utilisais l'opérateur de négation ! Ah tiens, en fait non, tu ne pouvais pas le préciser, vu que tu ne l'utilises pas...

Là, je serais tenté de te suggérer de relire avec attention l'article de Laurent Denis.

Bon, on va le faire ici quand même...

Il y a deux syntaxes pour les commentaires conditionnels : une qui fait que seul IE/win (ou un sous-ensemble des versions d'IE/win) ne considère pas le contenu du commentaire comme étant commenté, et une qui fait que seul IE/win considère le tout comme un commentaire, et pas les autres navigateurs.

<!--[if IE]> mon code <![ endif] -->

<!--[if !IE]> <--> mon code <!--> <![ endif]-->


Toi, tu essaies de mélanger les deux, et tu te demandes pourquoi ça ne marche pas ! Smiley sweatdrop

Le <--> sert à fermer le commentaire (à part le premier caractère, c'est la syntaxe standard pour faire ça) pour tous les navigateurs... sauf pour IE, à la condition expresse que l'on ait utilisé la syntaxe négative, celle avec le point d'exclamation.

Si tu utilises la syntaxe positive, voilà comment c'est interprété par IE :
<!--[if IE]>		Ceci n'est pas un commentaire, on continue à interpréter.
<			Un simple caractère...
-->			Une fin de commentaire... mais comme aucun commentaire n'a été ouvert, on ignore ce code et on affiche les caractères.
code			Du code qu'on interprète.

etc.


Bref, faut pas s'étonner que ça marche pas quand on utilise pas la syntaxe correcte...
EcliptuX a écrit :
Je me suis donc inspiré de ce hack en l'adaptant de la manière suivante :
  <!--[if IE 7]> <-->

      mon code   

  <!--> <! endif -->

Ainsi, d'après l'article sus-cité, le code situé dans ce hack sera lu par : IE7, FF, Safari, Opera.
En revanche, il ne sera pas lu sous IE5, IE 5.5 et IE6.

NON.

La partie mon code sera lu par tous les navigateurs, tandis qu'IE7, lui, lira <--> mon code <!-->. Voilà le résultat de la syntaxe utilisée.

La seule solution que je vois pour faire exactement ce que tu veux, c'est d'appeler deux fois la feuille de style, une fois pour tous les navigateurs qui ne sont pas IE (syntaxe négative des commentaires conditionnels), et une fois spécifiquement pour IE à partir de la version 7.

Mais réaliser une feuille de style pour tous les navigateurs et rajouter, dans un deuxième temps, des correctifs pour les IE inférieurs à la version 7, me semblerait plus logique et surtout moins prise de tête comme démarche.


Et les commentaires conditionnels ne sont pas des hacks ! Smiley fache
Edit : non j'ai pas compris.

Déjà, désolé pour l'abus de langage... Smiley ohwell

Mais ce que tu m'expliques est contradictoire avec ce qui est dit dans le tutoriel.

Car qd je lis :
a écrit :
L'intérêt de cette technique est cependant de pouvoir viser, à nouveau, telle ou telle version d'IE Windows, en jouant sur les conditions et les numéros de version. Par exemple:
<!--[if IE 7]> <-->
   <link rel="stylesheet" href="modern-browers.css" type="text/css" />
<!--> <![endif]-->

<!--[if lte IE 6]>
   <link rel="stylesheet" href="old-ie.css" type="text/css" />
<![endif]-->


La première feuille de style:
* sera lue par Safari, Firefox, Opera, etc.
* sera également lue par IE7, conformément à la condition [if IE 7]
* mais ne sera pas lue par IE5.x et 6.0 Windows.

Si je lis bien ce qui est écrit, le premier commentaire conditionnel de cet exemple répond bien à mon besoin initial !

Donc il y a une erreur dans le tutoriel et effectivement comme tu le dis le bout de code "<-->" est interprété par IE7 (ce qui est peut-être normal, mais non souhaité)
Modifié par EcliptuX (23 Oct 2006 - 11:28)
Effectivement, je n'avais pas vu que Laurent Denis avait lui-même proposé une syntaxe mixte... j'aurais pensé qu'IE/win, lorsqu'il n'est pas ciblé par le commentaire conditionnel, le considérait comme un commentaire normal. En fait, il semblerait plutôt qu'il le considère comme un « commentaire spécial (fermé par un endif) » de toute manière, même si la version utilisée n'est pas la version ciblée.

Mais effectivement, même avec ce comportement, le code présenté dans le tutoriel fera que les navigateurs hors IE verront code, tandis que les versions ciblées d'IE (ici la version 7) verront [i]<--> code <!-->... Je ne sais pas si Laurent Denis avais eu l'occasion de tester en profondeur la solution (proposée...

Pour résoudre ton problème, il suffit, je pense, de dissocier l'appel de la feuille de style pour IE7 et l'appel de la feuille de style pour les autres navigateurs. En reprenant l'exemple de Laurent :
<!--[if !IE]> <-->
	<link rel="stylesheet" href="modern-browers.css" type="text/css" />
<!--> <![ endif]-->
<!--[if gte IE 7]>
	<link rel="stylesheet" href="modern-browers.css" type="text/css" />
<![ endif]-->
<!--[if lte IE 6]>
	<link rel="stylesheet" href="old-ie.css" type="text/css" />
<![ endif]-->

Le plus simple, à mon sens, reste de n'apporter pour IE 6 que des correctifs ponctuels, plutôt que de devoir maintenir une feuille de style alternative complète... mais bon, ça peut dépendre du contexte...[/i]
Modifié par mpop (24 Oct 2006 - 21:58)
Je me disais aussi qu'il y avait un truc de pas clair dans l'histoire Smiley cligne

Merci mpop pour ton dernier message qui en effet répond à ma problématique initiale Smiley smile