IE6 et ses png, et m*rde.

------------
Modifié par Flayks (09 Jun 2013 - 23:13)

Bonjour,

Dégradation gracieuse.

Voilà, bonne continuation.


PS: pour l'utilisation d'un filtre DirectX avec IE6 pour obtenir un simili-fond translucide, voir dans les Astuces.

Flayks a écrit :
Faut-il inciter l'utilisateur à modifier son navigateur par des propos convaincants (sécurité, standards, affichage...) ?

Sur un site perso, pourquoi pas.
Sur un site pro, non.

Simple question de bon sens et de communication. La communication personnelle (vous êtes sur mon site, j'y fais les choses comme je le souhaite) autorise les coups de gueule, les conseils, les interpellation, et l'excuse «je n'ai pas envie de me prendre la tête plus que nécessaire». La communication institutionnelle et notamment commerciale ne l'autorise pas.

Exception possible: tout site qui propose une expérience utilisateur nouvelle ou innovante, peut annoncer «telle ou telle fonctionnalité n'est pas disponible avec les navigateurs trop anciens», et suggérer une mise à jour du navigateur de l'internaute. (Attention, il faut que ce qui est proposé soit suffisamment différent des sites classiques existants pour que l'utilisateur ne se dise pas «ils se foutent de moi, les autres sites où je vais marchent très bien avec mon navigateur»?)

Notons au passage que la dégradation gracieuse n'est pas assimilable à cette démarche. En effet, l'utilisateur d'IE6 n'a pas à savoir qu'on lui sert un rendu dégradé (c'est-à-dire au maximum ou proche du maximum des capacités de son navigateur).
Modifié par Florent V. (16 Feb 2009 - 14:25)

Flayks a écrit :
- Soit je lache l'affaire complètement avec IE6 et je propose grâce a un script, d'upgrader le navigateur de l'utilisateur a FF, Opera, Safari, Chrome.

Mauvaise idée

Flayks a écrit :
- Soit je persiste à trouver une méthode maléfique que je n'ai pas encore trouvé.

Bonne idée

Flayks a écrit :
est-il bon de dev encore pour IE6 ? Faut-il inciter l'utilisateur à modifier son navigateur par des propos convaincants (sécurité, standards, affichage...) ?

Tu cite toi même les stats du site en question, tu sais donc qu'une partie des visiteurs utilise IE. Tu crois qu'ils ne les ont jamais lu les argument anti IE6 ? Sincèrement, la plupart des utilisateurs d'IE6 n'ont pas le choix de le mettre à jour ou d'utiliser un autre navigateur.

Pour IE6 le plus simple c'est de faire comme sur Alsa, utiliser des fichier gif qui ne gèrent pas la transparence, mais qui "sauvent les meubles". C'est pas si dérangeant et c'est toujours mieux que de lire une énième fois que "le site n'est pas supporté par IE6" (qui est plutôt risible).

Personnellement, quand je vois un message du genre, je pars et je ne reviens pas.

EDIT :

Florent V. a écrit :
Sur un site perso, pourquoi pas.

Et encore, je préfère avoir un site qui ne prend pas en charge les spécificités d'IE6 mais qui s'en fout plutôt qu'un message me "conseillant" d'upgrader mon navigateur. ça a le don de m'énerver (bon en même temps, il faut pas grand chose pour )
Modifié par Laurie-Anne (16 Feb 2009 - 14:28)

Bonjour,

Flayks a écrit :
- Soit je lache l'affaire complètement avec IE6 et je propose grâce a un script, d'upgrader le navigateur de l'utilisateur a FF, Opera, Safari, Chrome.

Euh lâcher l'affaire serait AMHA de refiler un code HTML sans CSS ou très basique (au revoir les images de fond, le positionnement et les colonnes ...), pas d'emmerder l'utilisateur (déjà qu'il doit l'être assez comme ça si son IE6 lui est imposé ...)

Flayks a écrit :
- Soit je persiste à trouver une méthode maléfique que je n'ai pas encore trouvé.

Adobe ex-Macromedia Fireworks est pas mal avec ses PNG-8 (mais il coûte des sous et pas qu'un peu) ou pngnq si ça fonctionne dans ton cas

Flayks a écrit :
Il faut savoir que c'est un site professionnel, et que sur 850 visites en moins d'un an, 350+ visites sont d'IE dont 200+ d'IE6. Ce n'est pas négligeable...

Avez vous une solution qui marche réellement ? Au passage (je ne veux pas troller -on est lundi- ou relancer le débat interminable), est-il bon de dev encore pour IE6 ?

200 / 850 = oui c'est bon dans ton cas ( aussi )

Hello,
Il y a mon sens 2 solutions (j'exclue la solution du png fix qui pose trop de pbs, en particulier avec la technique des sprites css) :

1 - Pour chaque image, faire 2 images, une en png-24 et une en gif, puis dans les css on applique le png-24 par défaut le gif pour ie6 avec un hack, Ce qui donne :

div.machin{
  background-image:url("images/inscription.png");
}
* html div.machin{/*hack ie6*/
  background-image:url("images/inscription.gif");
}

Ca alourdit le fichier css, ça double le nb d'images, mais le rendu est satisfaisant partout.

2. Pour toutes les images utiliser du png-8 mais en n'ayant pas qu'une seule couleur de transparence, mais plusieurs (voir PNG8 - The Clear Winner pour plus d'infos) en utilisant Fireworks par exemple.
Ca permet de garder les transparences sur les navigateurs moderne et ne pas les afficher sous ie6. Les graphismes restent "lisibles" sous ie6, sans les transparences.
Cela permet surtout de n'avoir à utiliser qu'un seul fichier.
Par contre, les images sont en 256 couleurs, donc légèrement dégradés (plus ou moins selon la taille de l'image), c'est seul hic de la méthode. Mais pour des boutons, c'est nickel.

La méthode 1 est celle que je préfère, cependant, je préfère utiliser des commentaires conditionnels pour IE6 avec une feuille de style "corrective".

Hello

Pour ma part, j'utilise toujours les mêmes solutions (rien trouvé de plus convaincant et/ou souple et/ou léger pour le moment).

Solution 1 - Correction de la transparence avec le filtre AlphaImageLoader

/* Arrière-plan no-repeat */
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png");

/* Arrière-plan repeat */
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="scale");

Mmmh, les liens ne sont plus cliquables et le texte n'est plus sélectionnable :

Le conteneur est positionné absolument :

- Si cela vaut la peine de retoucher le code XHTML, alors on corrigera les effets indésirables du filtre en rajoutant un conteneur intermédiaire + quelques bricoles,
- Sinon on laisse tomber le filtre. Voir les solutions 2, 3 et 4.

Le conteneur n'est pas positionné absolument :

- On essaye un position:relative directement sur les liens (voir l'article sur les effets indésirables du filtre),
- Sinon on laisse tomber le filtre. Voir les solutions 2, 3 et 4.

Solution 2 - Une image avec transparence en PNG8

Si l'image est peu colorée et non translucide, exportation d'une nouvelle image sous Fireworks au format PNG8 avec transparence alpha.

Solution 3 - Une image avec transparence en GIF

- Soit on reprend le .png qui pose problème, on le retaille gentiment en virant tous les dégradés / fondus en transparence et on l'enregistre en GIF,
- Soit on reprend la maquette initiale, on vire les styles qui posent problème et on exporte une nouvelle image.

Solution 4 - Je lache l'affaire, je vire l'image et je mets une couleur d'arrière-plan

IE6 vainqueur par KO.


Ces solutions concernent les images dont l'arrière-plan n'est pas positionné (background-position avec sa valeur par défaut). Dans le cas contraire, alors oublier la Solution 1 (filtre AlphaImageLoader) et se rabattre directement sur 2, 3 et 4.

Ok ! Merci pour tous vos conseils. Je vais simplement supprimer les ombres et utiliser un png8 simple, sans transparence : tant pis pour les IE6users, ils auront un rendu un peu moins beau.

Pour ce qui est des filtres AlphaImageLoader, j'ai essayé (bien entendu...), mais bizarrement, ça supprimait l'image de fond, en ne mettant rien...

Je vais le faire, malheureusement, mais il le faut, d'un côté. *part se mordre les doigts pour 2 bonnes heures d'IE6*

Flayks a écrit :
Pour ce qui est des filtres AlphaImageLoader, j'ai essayé (bien entendu...), mais bizarrement, ça supprimait l'image de fond, en ne mettant rien...

Et tu as abandonné sans venir en parler aux copains ?

------------
Modifié par Flayks (09 Jun 2013 - 23:13)

Hum je ne crois pas que ce soit ça : j'ai installé Direct X 9.0c, rebooté XP, relancé ie6, appliqué ce code :

#conteneur{background none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/decors/contenu.png", sizingMethod="scale");}

Mais rien n'y fait, j'ai ça : http://www.grabup.com/uploads/62a6e65339878f9d40f53de2b9f3da6a.jpg

Help

Attention !

#conteneur{[b]background none;[/b]filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/decors/contenu.png", sizingMethod="scale");}

Les ":" ont disparu.

Hey mais tu utilises IETester. Ce prog craque beaucoup son slip en ce qui concerne la correction de la transparence avec le filtre. A ta place je passerais plutôt par MultipleIE (en plus tu as émulé XP donc pas de problème).

Ou alors tu demandes à quelqu'un de tester pour toi, mais à la longue...

Juste une petite question: Savez vous ce qui pousse les entreprises à ne pas "upgrader" leur version IE 6 vers IE 7 ?

Florent V. a écrit :
Dégradation gracieuse

Encore faut-il faire accepter au client cette idée, lequel à payé fort cher sa charte graphique et est en droit de la voir s'afficher correctement partout.
Cela dit, je milite moi aussi activement pour cette solution (j'en ai ma claque de débugger pour IE6... )

Laurie-Anne a écrit :
une partie des visiteurs utilise IE. Tu crois qu'ils ne les ont jamais lu les argument anti IE6 ?

Non seulement une grande partie des utilisateurs d'IE n'a jamais lu les arguments dont tu parles, mais une grande partie de cette grande partie ignore qu'il existe d'autre navigateurs.

jQuery.pngFix peut être une solution au problème.

Oui pour le :, j'ai copié juste avant de modifier. Mais j'ai aussi mis un :, rien n'y fait.
Je vais essayer MultipleIE (juste pour IE6 hein ), on ne sait jamais.

Nous verrons ! Je vous tiens au courant

Bon, je l'ai installé, mais pareil, rien n'y fait. Je sent que je vais faire des images spéciales et le problème sera réglé

Ericf a écrit :
Encore faut-il faire accepter au client cette idée, lequel à payé fort cher sa charte graphique

Ouep.

Ericf a écrit :
et est en droit de la voir s'afficher correctement partout

Nope. Ce n'est pas une affaire de droit. Obtenir un rendu identique dans IE6 est:
- soit impossible;
- soit couteux.
Le client devra se faire une raison pour tout ce qui est impossible (dégradation gracieuse, voire fonctionnalité manquante), et accepter ou non un surcout pour ce qui est possible mais couteux.

Mister Flayks, une remarque: le chemin utilisé pour le filtre AlphaImageLoader doit partir de la page HTML et non pas du CSS. Oui, c'est pas super logique, mais c'est comme ça. C'est bien sûr précisé dans l'astuce que je t'ai indiqué, que tu as lu attentivement et deux fois.

------------
Modifié par Flayks (09 Jun 2013 - 23:14)

Heu et à tout hasard, si tu vas sur une page de démo de l'utilisation du filtre AlphaImageLoader, la démo marche? Ça permettrait de savoir si le problème se joue au niveau d'IE (voire du système) ou de ton code.