IE 6 est clairement le navigateur qui freine la vitesse d’intégration des pages. Ce navigateur vieillissant et dépassé (déjà plus de 8 ans) reste pourtant utilisé par un grand pourcentage de la population. À cette date, ce navigateur est encore utilisé par 25% des internautes environ.
Petit liste rapide des innombrables techniques que nous devons mettre en place pour s’affranchir des bugs sur ce navigateur. Autant d’astuces que je serais heureux d’oublier :
- ne pas combiner les marges intérieures et les tailles fixées ;
- placer une classe « premier » sur les éléments répétitifs ;
- utiliser les filtres pour pouvoir utiliser les PNG 24 ;
- passer les flottants en affichage en ligne s’ils sont associés à une marge ;
- ajouter une classe sur les différents champs de formulaire pour pouvoir les différencier ;
- prévoir un JS pour simuler les survols d’éléments ;
- pouvoir enfin utiliser correctement les classes multiples ;
- ne pas ruser avec les hauteurs minimales en détourant les propriétés ;
- arrêter de conférer le « haslayout » via des propriétés inutiles ;
- ne plus se préoccuper des retours chariots dans le code HTML ;
- et pouvoir correctement commenter son document.
Cette liste est d’ailleurs très incomplète encore, n’hésitez pas…
Et donc à ce propos, vous arrive t-il dans vos développements de sciemment ignorer ce navigateur ? À quel prix ? Comment convaincre vos clients ? Quels sont les gains (en terme de temps par exemple) ?
Je ne fais ici qu’évoquer rapidement les principes de la dégradation gracieuse, les avez-vous déjà adoptés, vous ?
20 commentaires ↓
Chez Téléfun/Skyrock, nous avons des fonctionnalités non disponibles sous IE6. Ce ne sont que les fonctionnalités les plus complexes, mais cela nous permet justement de simplifier un peu le code. IE6 représente 20% des navigateurs mais seulement 16% des visites. On ne peut pas se permettre de bloquer complètement les IE6, mais boudiou, que ça ferait du bien.
J’ai appris récemment que les PNG 8 bits supportaient aussi un canal alpha. Plus léger que les PNG 24 et pas forcément plus moche selon les cas.
Je ne vois pas ce que tu veux dire en parlant de :
Pour ma part, je me sens bien obligé de satisfaire les utilisateurs de ce navigateur préhistorique.
Cependant il ne constitue pas ma crainte la plus importante.
Les utilisateurs d’IE6 passent pour beaucoup a IE7 et de plus en plus avec l’annonce de la prochaine sortie d’IE8… En ce qui me concerne, la vrai question est plutôt de savoir si les versions actuelles et futures répondrons réellement à une démarche de respect des standards dictés par le W3C. Pour IE7, nous le savons tous, et pour IE8, la tendance reste au pessimisme au vue de la qualité des navigateurs livrés par la firme de Redmond jusqu’à présent… .…. … à suivre pour moi.
sinon je suis plutôt pour attendre encore un tantinet que les pourcentages d’utilisation baissent avant de passer IE6 à la trappe.
PS : Bien joué 20cents, clap clap clap STPo, un beau header et un bien beau footer 😀
Salut Rik (et bienvenue !),
PNG 8 et canal alpha
Tout comme toi, mais je n’ai pas encore eu l’occasion de mettre en pratique. Il me semble que Fireworks fait ça très bien.
Retours chariots dans le HTML
Je suis souvent obligé de « ruser » pour ne pas provoquer d’espaces supplémentaires entre mes
<li>si ils sont en flottants.Pour ma part on s’est réunis avec plusieurs concepteurs et on s’est décidé à intégrer à chacun de nos projets une infobulle persistante sur les pages affichées via IE6 que le navigateur est obsolète et on invite à mettre à jour IE ou à passer sous FF ou opéra. L’idée est d’accompagner les visiteurs dans leur mise à jour en affichant plus d’infos dans une nouvelle page. On lutte comme on peut !
Dans notre équipe, nous appliquons déjà certaines dégradations sur IE6, lorsque c’est possible :
Mais le plus gros problème reste l’utilisation des classes multiples : je pense que leur utilisation changerait complètement notre façon de travailler.
PS : Pour ton problème de
<li>, c’est un problème qui devrait pouvoir être résolu en appliquant un hasLayout à ton élément, et parfois aussi à celui qu’il contient (<a>endisplay:block…).J’oubliais de mentionner que nos bords arrondis sont fait avec la propriété adéquate en CSS, IE et Opera sont donc laissés de côté. Ce n’est pas spécifique à IE6, mais c’est avec ce genre de choses qu’on gagne beaucoup de temps et d’octets. Et on est en plein dans le principe de dégradation gracieuse.
@HeyTi1: Franchement, IE8 passant le test Acid2 et devant normalement supporter tout CSS2.1, on va pas cracher dessus. Et ils font aussi des efforts dans d’autres domaines(setAttribute, Selectors API, etc). On aimerait toujours que ça aille plus vite, mais ils vont quand même dans la bonne direction.
PS : Les commentaires manquent vraiment d’un bouton Prévisualiser vu la syntaxe proposée.
Il y a aussi le position:fixed qui est absent d’IE6 et qui oblige de hacker avec des expressions bien coûteuses sans autre vrai moyen de dégradation gracieuse… Sans parler des balises auto-fermantes qui génèrent parfois des plantages inexplicables. J’ai abandonné les hacks à base de filter pour les PNGs, trop lourds en perf, trop instables. Désormais je passe tout en PNG8 sans alpha pour IE6, tant pis si c’est moins beau (et ça l’est rarement - ou du moins j’aimerais que les clients le croient).
Concernant IE7, il me semble qu’il ne gère pas encore nativement l’opacité CSS ? Assez pénible quand-même vu le nombre d’années qu’on va encore se le traîner…
Sinon puisque personne n’en a parlé, il y a notamment MobileMe et 37Signals qui ont cessé le support IE6 me semble-t-il.
PS : Les commentaires manquent vraiment d’un bouton Prévisualiser vu la syntaxe proposée. =þ
C’est en place.
Sur mon site perso je dégrade violemment (pardon, « gracieusement ») pour certains trucs (le PNG de titre, PNG-24 parce que j’apprends juste au-dessus aujourd’hui même que le PNG-8 a une couche alpha).
Et je me sers des commentaires conditionnels pour faire du bourrage de crânes sur le besoin de monter en gamme.
Et je fais une CSS hyper-light, juste ce qu’il faut pour un peu de multicolonnage.
Dans le cadre professionnel je continue à expliquer tous les trucs de base que tu mentionnes, en particulier les histoires de calculs de tailles de boîtes etc. Parce qu’on doit quand même garder à peu près un « standard » de qualité pour IE6, surtout considérant que ça reste le navigateur officiel de la compagnie.
@stpo : sisi, IE7 et PNG ça va bien. Mon site perso (que le monde m’envie) n’a pas été retouché d’une ligne au passage d’IE6 à IE7, et donc IE7 utilise tout ce que je déclare pour les grands garçons, dont le PNG. Ça ne le fait pas tousser, dirait-on.
PS : le texte rouge et gras dans la zone de saisie de commentaire me détruit les yeux.
@stéphane : non non, en fait je parlais de la propriété CSS opacity et pas des couches alpha des PNG qui sont effectivement bien prises en compte par IE7 (Dieu existe). Comme le
position:fixedd’ailleurs si ma mémoire est bonne.PS : très bien ce bouton « previsualiser », c’est guénial, hourras du public ! (tu vois, je t’encourage… =)
@stpo : il y a un filtre propriétaire à base d’ActiveX.
Je sais que c’est mal, mais ils ont quand même poussé pas mal de choses, les gens de Microsoft, au fil des ans.
(En fait je prépare le terrain pour le speech de Chris Wilson à Paris Web, je trouverais dommage qu’il se prenne des tomates alors qu’il se bat depuis des années pour faire avancer le Web. J’espère que les gens seront assez intelligents pour ne pas confondre le mec et la compagnie.)
PS : ah et les champs de formulaire c’est boucoumiou. Un hourra ici aussi.
Bonne idée ce billet Vincent
Au risque de me voir taxer de copieur, je me suis hâté de sortir le mien qui était en préparation depuis quelque temps. Il est clair qu’il faut se poser la question de savoir si on continue à intégrer les nouveaux sites web pour IE6 ou pour les autres navigateurs, parce qu’au final ça revient à ça. Au fil des années on a tous cherché comment arriver à un résultat similaire aux autres navigateurs dans IE6, on a tous écrit des articles dans des blogs pour faire part de notre expérience, on a tous cherché comment résoudre les dizaines de bugs de ce navigateur, on s’est tous arraché les cheveux devant nos écrans pour essayer de comprendre pourquoi ça ne s’affichait pas correctement.
Pourtant il y a une norme qui est définie qui s’appelle « les standards du web », ça devrait être facile de suivre ces règles pour construire des pages web valides. oui mais valide ne veut rien dire quand l’outil qui est censé les afficher ne suit pas ces règles.
Alors avons-nous pendant toutes ces années fait le jeu de Microsoft en lui reconnaissant cette toute-puissance ?
Quand j’ai commencé à faire de l’intégration ce navigateur et ces deux versions antérieures (IE5 et IE5.5) totalisaient de 90 à 95% des navigateurs du marché, Netscape étant en plein déclin. On a maintenant le choix…
Cette effervescence actuelle sur ce sujet (la disparition d’IE6) est intéressante parce qu’elle témoigne de la vitalité de ces acteurs et la volonté de faire évoluer internet. Alors n’hésitez pas à en parler autour de vous.
Bonjour,
je reste assez étonné que beaucoup de monde en France puisse considérer comme légitime les statistiques du site W3School parce que leur périmètre n’est que ce site pas l’ensemble du web. Il n’est pas juste que de généraliser ainsi. Par contre ce qui pourrait l’être, c’est de dire que les personnes intéresser par les technologies web naviguent avec un navigateur potable.
@stéphane : oui oui je sais, je l’utilise fréquemment mais saymal et saynul =]
Les commentaires ici sont de trop haute tenue, je vais aller faire un tour sur ceux de Clubic pour me rafraîchir !
@Nicolas : tu préconises quoi comme source pour les stats navigateurs ? Je vois par rapport à celles du W3School, le journal du net ou ceux de ma boite, on reste quand même dans les même proportions.
@Eric : en vrac sur webDevFr on en avait causé :
Je ne sais pas à quel point c’est fiable ou non…
Hello,
Sur Alsacréations j’explique pourquoi et comment, pour un projet «perso», le support d’IE6 est minimal: http://forum.alsacreations.com/topic-9-37885-1.html
La technique employée pour filtrer IE6 doit être familière de la plupart des lecteurs de ce blog. 😉
Pour les statistiques européennes il y a le baromètre des navigateurs de XITI.
Grosso modo on retombe toujours sur les mêmes fourchettes : 24% pour IE 6, 36% pour IE7 et 31% pour Firefox, Opéra est pas loin des 5%.
Concernant le détail des parts d’Internet Explorer, IE7 aura mis 2 ans pour arriver à - seulement - 61% des parts de marchés et ce chiffre a tendance à se stabiliser.
IE7 et IE8 fonctionnant au minimum avec XP SP2, c’est aussi AMHA une des raisons de la non-adoption d’IE6.
Donc surveiller les parts de marchés des systèmes d’exploitation me semble tout aussi judicieux.
Plein de bonnes choses par là aussi : http://groups.google.fr/group/webdevfr/browse_thread/thread/b18a247f5c2130dc?hl=fr
[…] pense que la plupart savent de quoi je parle (Vincent en avait parlé il a quelques mois maintenant) mais force est de constater qu’en tant que chef de projet internet, on ne prend pas assez de […]
Laisser un commentaire