11548 sujets

JavaScript, DOM et API Web HTML5

Cufon et comportement sous IE6

Bonsoir,

J'ai du mal à saisir pourquoi cufon ne fonctionne pas de la même manière sous IE6.

1. Tout d'abord, comment expliquez que si j'utilise uniquement l'ID #n2clic_logo, cufon ne s'applique pas sous IE6 (cela fonctionne très bien sous les autres navigateurs). Lorsque j'utilise un sélecteur CSS comme h1 ou h2, tout marche bien sous IE6... mais comme vous le comprenez je ne veux pas que cufon soit appliqué sur tous mes sélecteurs.

Cela me pose énormément problème, surtout sur les menus de navigation ou j'utilise l'ID #nav.

2. D'autant plus que je fais donc face à un problème de police. Les polices que j'utilise avec cufon sont très souvent plus petite qu'une police sans cufon. Je suis donc obligé les agrandir en utilisant la class :
.cufon-active #nav {font-size:18px;} /* Taille originale de la police Trebuchet MS 13px */


Or, avec IE6 cufon ne s'applique que sur les sélecteurs. Du coup, le menu dont l'ID est #nav est affiché avec la police classique (Trebuchet MS). Et pire, la taille utilisée est 18px car IE6 tient compte de la classe .cufon-active #nav! Ce qui dégrade souvent l'affichage du menu car il n'est pas adapté à une telle taille avec une police de caractère "classique".

Je vous transmet le bout de code suivant, si cela peut aider :

<!-- Cufon -->
<script type="text/javascript">
	Cufon.replace('h2',{ hover: true });
	Cufon('h2', {
		textShadow: '#197C3B 0 1px 1px'
	});
	Cufon.replace('h3');
	Cufon.replace('h1');
	Cufon.replace('#n2clic_logo',{ hover: true });
</script>
<script type="text/javascript">
Cufon.now();
</script>


Je vous remercie d'avance pour votre aide Smiley biggrin

-------------
HS : Les commentaires conditionnels existent-ils en javascript?
Julien1926 a écrit :
Bonsoir,
1. Tout d'abord, comment expliquez que si j'utilise uniquement l'ID #n2clic_logo, cufon ne s'applique pas sous IE6 (cela fonctionne très bien sous les autres navigateurs).

tu es sur que tes IDs sont uniques dans ta page ?


Julien1926 a écrit :

HS : Les commentaires conditionnels existent-ils en javascript?

non pas en tant que tel mais :
- tu peux détecter le support de ta fonctionalité
- tu peux détecter si oui ou non tu es sur IE
- si tu fais ça : 
if(!/*@cc_on!@*/0) {
 alert('IE is my king');
}

seul IE lira le code

J'ajoute que Cufon disent qu'ils supportent pleinement IE6, donc tu devrais essayer de debug de manière classique : fais une page nue sur laquelle tu tentes d'isoler le problème
Modifié par jpvincent (15 Sep 2010 - 11:58)
Mes IDs sont bien uniques, et le validation W3C est là pour me le confirmer.
Je vais effectivement essayer sur une page nue.
Bonjour,
bogs a écrit :
pq utiliser des commentaires conditionnels alors qu'il existe une variable "navigator" pour connaitre ton environnement ? Smiley eek

Car les commentaires conditionnels sont justement prévus pour cela...

"navigator" est à manier avec beaucoup de précaution :
- l'analyse des informations qu'elle contient demande une connaissance solide de l'ensemble des navigateurs ;
- l'apparition d'un nouveau navigateur sur le marché peut rendre cette analyse fausse.

P.S. : la page vers laquelle tu lies est complètement obsolète.
Modifié par Julien Royer (15 Sep 2010 - 15:50)
jpvincent a écrit :
non pas en tant que tel mais :
- tu peux détecter le support de ta fonctionalité
- tu peux détecter si oui ou non tu es sur IE
- si tu fais ça : 
if(!/*@cc_on!@*/0) {
 alert('IE is my king');
}

seul IE lira le code

Il s'agit bien de commentaires conditionnels. Smiley smile
Hello...

Juste une petite remarque en passant à propos des commentaires conditionnels en JS.

J'ai déjà eu plusieurs surprises en utilisant des minifieurs de JS, comme JSMIN par exemple. A donc utiliser en connaissance de cause...
Modérateur
Salut,

A mon sens, mieux vaut passer par la détection d'une méthode propriétaire (ex.: window.attachEvent pour IE) plutôt que par les commentaires conditionnels en JS ou encore de la détection via la propriété navigator.userAgent. Au moins, on n'a pas de soucis avec les minifieurs et ça me semble plus solide que les autres méthodes.
Autre option, robuste mais crade : 


	<!--[if lte IE 8]>
<script>var isLteIE8 = true;</script>
	<![endif]-->


A décliner pour avoir plein de variable globale. Mais vraiment, vraiment pas beau ...
koala64 a écrit :
A mon sens, mieux vaut passer par la détection d'une méthode propriétaire (ex.: window.attachEvent pour IE) plutôt que par les commentaires conditionnels en JS ou encore de la détection via la propriété navigator.userAgent. Au moins, on n'a pas de soucis avec les minifieurs et ça me semble plus solide que les autres méthodes.

Le problème des minifieurs vaut en effet la peine d'être posé. Mais il s'agit à mon avis d'un problème d'outil : si je suis obligé d'arrêter d'utiliser les commentaires conditionnels HTML à cause d'un minifieur de code, je songerai sérieusement à trouver une autre solution que celle qui consiste à utiliser des hacks dans mes feuilles de style...

Quant à la robustesse, l'utilisation d'une méthode propriétaire ne me convainc pas : quelques exemples célèbres existent, comme Opera qui a supporté (et qui supporte peut-être toujours) attachEvent, ou innerHTML, XMLHttpRequest qui sont nés dans un navigateur et ont fini par être supportés par la quasi-totalité des navigateurs existants.
Si tu utilises déjà un bloc de JS inclus dans chaque page, ça peut en faire partie. Comme ça tu as un lot de trucs robustes mais crades, et ça passe toujours mieux en groupe ces machins là. Smiley smile 

<head>
  <meta charset="utf-8">
  <title>Hopla</title>
  <!--[if IE 8]><script>document.documentElement.id='IE8';IE8=true</script><![endif]-->
  <!--[if IE 7]><script>document.documentElement.id='IE7';IE7=true</script><![endif]-->
  <!--[if IE 6]><script>document.documentElement.id='IE6';IE6=true</script><![endif]-->
  <link rel="stylesheet" href="...">

Bon ok, ça fait trois lignes, mais avec presque aucun espace dedans. Smiley lol

Ça permet de faire des sélecteurs commençant par "#IE6", "#IE7" ou "#IE8" en CSS, et d'utiliser "if(IE7){}" en JavaScript.

Il y a bien sûr d'autres techniques disponibles. Et on rappellera à toutes fins utiles que:
- éviter ce genre de choses en CSS autant que possible, c'est pas plus mal;
- en JavaScript la détection de méthodes marche plutôt bien;
- cette solution ne peut s'appliquer qu'à IE.

Pour la compilation conditionnelle, je rajouterai cette page de test qui montre une application possible.
http://covertprestige.info/javascript/ie-cc/
Merci pour toutes ces informations! Quelle mine d'information ce alsacréations Smiley biggrin
Je regrette de m'être contenté d'être un spectateur...

Je vous tiens au courant concernant les test avec une page "vierge" sous IETester...

Pouvez-vous m'indiquez s'il existe des différentes entre IETester et une version native de IE6 sur un ordinateur ancien?

Avant de passer à Win7, j'utilisais "MultipleIE" (un truc du genre)... mais je n'ai pas réussi à le faire fonctionner sous cet OS. Je suis donc passé sous IETester, qui me paraît correct.
Modifié par Julien1926 (15 Sep 2010 - 20:11)
Modérateur
Julien Royer a écrit :
Le problème des minifieurs vaut en effet la peine d'être posé. Mais il s'agit à mon avis d'un problème d'outil : si je suis obligé d'arrêter d'utiliser les commentaires conditionnels HTML à cause d'un minifieur de code, je songerai sérieusement à trouver une autre solution que celle qui consiste à utiliser des hacks dans mes feuilles de style...

Quant à la robustesse, l'utilisation d'une méthode propriétaire ne me convainc pas : quelques exemples célèbres existent, comme Opera qui a supporté (et qui supporte peut-être toujours) attachEvent, ou innerHTML, XMLHttpRequest qui sont nés dans un navigateur et ont fini par être supportés par la quasi-totalité des navigateurs existants.
Il y a certes un problème d'outils mais pas seulement; je pense que, de toutes les solutions citées, chacune va répondre à un besoin dans un contexte donné et aucune n'est vraiment parfaite... simplement parce qu'on se trouve déjà dans un contournement.

Si je code seul, je suis plus à même de contrôler ce que je fais et un commentaire conditionnel me conviendra très bien parce que je n'en suis pas arrivé à minifier mon JS pour un petit site perso. En revanche, lorsqu'on code à plusieurs sur un projet, je ne maîtrise pas forcément toutes les composantes donc je me suis orienté sur la détection de méthodes propriétaires parce que :

- le commentaire conditionnel peut effectivement poser des problèmes quant à sa syntaxe,
- il est difficile de contraindre les collègues à inclure des commentaires conditionnels (CSS) pour définir des variables globales sur chacune des pages du site...

Bref, ça reste encore la solution qui me convient le mieux, parce que moins "impactante".

Après, je ne nierais pas que la détection d'une méthode propriétaire ne me semble pas forcément pérenne, effectivement. Néanmoins, la plupart des contournements que j'ai à effectuer ont lieu pour IE... et pour ce dernier, ce n'est pas les méthodes propriétaires qui manquent ! Smiley lol (sans compter que pour les contournements vis à vis des autres navigateurs, je ne dispose pas de commentaires conditionnels donc le choix est vite fait).

Pour ce qui est d'Opera, je n'avais pas connaissance qu'il ait pu supporter la méthode attachEvent, ayant très peu eu la présence de ce navigateur dans mon cahier des charges, mais bon, quoi qu'il en soit, avec lui, dans le pire, c'est facile: je n'ai qu'à rajouter un test sur "window.opera" (un autre navigateur aurait-il osé mettre cette valeur à "true" ? Smiley biggol )

En somme, j'ai plutôt tendance à tout centraliser en créant, comme pour la plupart des librairies, un objet de détection testant diverses méthodes propriétaires.

Julien1926 a écrit :
Pouvez-vous m'indiquez s'il existe des différentes entre IETester et une version native de IE6 sur un ordinateur ancien?

Avant de passer à Win7, j'utilisais "MultipleIE" (un truc du genre)... mais je n'ai pas réussi à le faire fonctionner sous cet OS. Je suis donc passé sous IETester, qui me paraît correct.
Rien ne vaut un vrai IE6 !

La plupart des émulateurs peuvent faire office d'outils d'appoint mais il subsiste toujours quelques bugs. L'un de ceux que j'ai trouvé assez récurrent est, par exemple, sur les inputs de type text où on ne peut tout simplement pas écrire du texte au sein de l'input, ce qui est particulièrement handicapant lorsqu'on teste le code d'un formulaire.

Par conséquent, à défaut d'un IE6 natif, mieux vaut s'orienter sur les machines virtuelles.

[EDIT] Après une petite recherche, j'ai effectivement trouvé un article parlant d'attachEvent et Opera Smiley cligne
Modifié par koala64 (16 Sep 2010 - 06:49)
Julien Royer a écrit :

Le problème des minifieurs vaut en effet la peine d'être posé. Mais il s'agit à mon avis d'un problème d'outil : si je suis obligé d'arrêter d'utiliser les commentaires conditionnels HTML à cause d'un minifieur de code, je songerai sérieusement à trouver une autre solution que celle qui consiste à utiliser des hacks dans mes feuilles de style...

Quant à la robustesse, l'utilisation d'une méthode propriétaire ne me convainc pas : quelques exemples célèbres existent, comme Opera qui a supporté (et qui supporte peut-être toujours) attachEvent, ou innerHTML, XMLHttpRequest qui sont nés dans un navigateur et ont fini par être supportés par la quasi-totalité des navigateurs existants.

perso, je n'ai jamais utilisé de commentaires conditionnels parce que c'est un peu utiliser une faille comme condition ... c'est p-e prévu pour, mais ça m'a toujours laissé perplexe.

j'ai proposé l'alternative rapide de la variable "navigator" pour qu'il puisse directement connaitre son environnement(quand au lien, j'ai donné le premier trouvé dans google) .. mais effectivement je ne l'utilise pas non plus.

en général j'ai des fonctions assez courtes et il y a en général qu'une seule commande à l'intérieur de ces fonctions qui pose problème donc je fais mon test sur la commande même.
ex:
if(attachEvent) -> code pouvant supporter attachEvent (sans me soucier des navigator qui tourneront avec)
else -> code alternatif (et au final, je lance un peu tous mes navigateurs pour voir que tout se passe correctement sur chacun d'eux... ça prend du temps mais autrement on a souvent de vilaines surprises avec ces crasses d'interpréteurs différents.)
Sujet clos
Aller à