Yann Faurie

Meilleurs voeux !

Yann Faurie — Sun, 03 Jan 2010 23:21:00 +0100

Bonne Année 2010 à tous ! Pleine de nouveaux sites E-Majine et Izi-Media ! Santé, bonheur et prospérité

Comment corriger plus de 25 bogues d'Internet Explorer 6

Yann Faurie — Wed, 16 Sep 2009 08:59:00 +0200

Traduction de l'article publié le 15 septembre 2009 par Benjamin sous le titre "Ultimate IE6 cheatsheet : How to fix 25+ Internet Explorer 6 Bugs" sur le site Virtuosi Media :

http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

La meilleure stratégie à adopter avec IE6 est de ne pas en assurer le support.

Stop. Très bien, je sens votre frustration. Vous êtes développeur web et prêt à vous arracher les cheveux parce que vous AVEZ à supporter IE6, mais pour dire les choses avec diplomatie, IE6 ne vous supporte pas. Vous avez passé des heures sur votre mise en page, mais vous ne pouvez toujours pas obtenir un rendu correct. Je peux comprendre. Je peux aussi vous aider.

Ceci n'est pas un de ces assaut à propos d'IE6 ou une campagne pour essayer de l'enterrer. Il y a assez de cela sur le web, et cela ne vous aide pas si vous devez supporter IE6 pour la simple raison qu'il a encore assez de parts de marché que vous ne pouvez ignorer pour des raisons professionnelles. Non, ce ne sont pas les ressources que vous aviez espérées.

J'ai parcouru le web pour trouver des ressources, j'ai également inclus mes correctifs pour IE6 et j'ai maintenant tout réuni dans cet article de référence afin de venir en aide à celui qui doit tenir compte d'Internet Explorer 6. Quand cela m'a été possible, j'ai fait de mon mieux pour proposer des solutions valides et propres à chaque bug, plutôt que des bidouilles. J'ai également tenté de donner les crédits appropriés pour chaque cas, mais certaines solutions ont été partagées tellement de fois que trouver la découverte originale de chaque correction est difficile. Si vous rencontrez un crédit manquant ou si j'ai oublié un bogue et sa solution, merci de contacter l'auteur qui mettra son article à jour.

Ce volumineux guide pour IE6 a prit un certain temps à être rédiger, et je vous invite à le bookmarker, partager, tweeter et utiliser afin de vous épargner du temps.

Stratégies

Avant de regarder les bogues spécifiques à IE6 et leurs correctifs, il est important de mettre en place en premier certaines stratégies qui vous aideront à minimiser le nombre de problèmes à répétition. Un peu de prévention est bien plus efficace/rentable que d'avoir à gérer une multitude de bugs qui auraient pu être évités en suivant ces bonnes pratiques.

Parts de marché d'IE 6

Selon Market Share, le pourcentage actuel (Aout 2009) d'utilisateurs d'IE6 est de 25,25%, mais d'autres sources indiquent un pourcentage bien inférieur à 18,1%. Bien que les statistiques varient, elles indiquent toutes une courbe / tendance descendante. Toutefois, les seules statistiques qui comptent vraiment sont celles de votre propre site. Si vous utilisez déjà des outils d'analyse de traffic , le pourcentage d'utilisation d'IE6 justifie-t-il le développement pour lui ? En termes d'affaire, quel est le cout / ratio bénéfique pour le temps et l'argent investis à développer pour IE6, contre le fait de l'abandonner carrément ? Pouvez-vous faire un cas de marché pour supporter le mourant IE6 ? Si la majorité de vos visiteurs n'utilisent pas IE6 et que cela ne risque pas de vous amputer du chiffre d'affaire, vous pouvez vous épargner beaucoup de temps, d'effort et d'argent en évitant carrément le problème IE6.

Planifiez votre design et gardez-le simple

Si vous planifiez votre design , ne serait-ce qu'en prenant quelques minutes pour étudier la meilleure approche de développement, vous pouvez mettre de côté certains problèmes de mise en page potentiels. Même les plus complexes designs visuels peuvent et doivent être créés à l'aide de solutions de balisage simples. Si vous trouvez que vous utilisez un nombre de balises excessif, c'est peut-être le signe que vous devriez ré-évaluer votre approche.

Avec l'expérience et en surmontant plusieurs cas de mise en page, gardez trace de vos résultats et des problèmes résolus. Je peux quasiment vous garantir que vous rencontrer à nouveau le même problème, et le fait d'avoir ce document de référence vous fera économiser du temps.

Utilisez un Doctype correct

Le fait de ne pas utiliser le bon doctype (ou ne pas utiliser de doctype tout court) va déclencher le mode "quirks" et va empêcher votre page d'avoir un rendu consistent selon les navigateurs. Utilisez un des doctypes suivants : HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional, or XHTML 1.1

HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Validez votre code

J'ai entendu quelques personnes dire qu'il n'y avait aucune raison commerciale de valider le code, mais je n'adhère pas.
La validation n'est pas difficile à ce point dans la plupart des cas, et devrait prendre seulement quelques minutes à réaliser. Quelques minutes passées à valider le XHML et CSS peuvent soulever des bénéfices pour TOUS les navigateurs, pas seulement pour IE6. La validation assure une compatibilité future et réduit la maintenance. Au minimum, validez le balisage XHTML. La seule vraie raison pour laquelle cela pourrait être ignoré est si vous souhaitez donner l'avantage de quelques propriétés CSS3 aux navigateurs qui les supportent.

Développez en premier pour les navigateurs respectueux des standards

En conjonction avec la validation de code, vous vous épargnerez beaucoup de tracas en développant prioritairement pour les navigateurs respectueux des standards comme Firefox, Opera, Safari et Chrome en premier, puis en opérant pour des navigateurs non conformes comme IE6 et IE7. Parce que les premiers vont avoir sensiblement le même rendu, vous aurez alors la capacité de traiter les particularités d'Internet Explorer séparément. Utiliser le workflow peut également aider dans la garantie d'un code évolutif parce qu'il vous donne une base solide et que si vous identifiez correctement vos correctifs, vous pourrez les oter sans soucis une fois que le support pour ces navigateurs ne sera plus assuré.

Utilisez les améliorations progressives

L'amélioration progressive signifie simplement de s'assurer que la fonctionnalité de base est disponible pour tous les utilisateurs avant d'ajouter le lustrant. EN général, l'amélioration progressive fait référence à des applications web qui fonctionnent sans javascript, puis qui utilisent javascript pour ajouter des animations effets Ajax, etc, mais, en parlant d'IE6, on pourrait également appliquer le principe des améliorations progressives à l'utilisation des CSS3 (oû même plusieurs parties de CSS2), HTML5, et d'autres protocoles non supportés par IE6.

Dans certains cas, il se peut que cela ne soit pas possible de procurer la même expérience à tous les utilisateurs de tous les navigateurs, spécifiquement ceux utilisant IE6. Mettre en place la stratégie d'amélioration progressive assurera que ces utilisateurs auront au moins le minimum de fonctionnalité en parcourant votre site ou votre application web.

Utilisez une règle de mise à zéro CSS

Chaque navigateur est livré avec sa propre feuilles de style par défaut, et cela ne surprendra personne, chacune est différente. Une simple remise à zéro au début de votre feuille de style peut s'avérer gagnante dans l'écriture de code compatible inter-navigateurs. Il y a de nombreuses règles de remise à zéro sur internet, allant de la plus simple à la plus détaillée.

Utilisez un framework javascript

Si JavaScript représente plus qu'une part anecdotique de votre site, considérez l'utilisation d'un framework. La plupart ont été testé dans de multiples navigateurs incluant IE6 et prendront automatiquement en main la plupart (mais pas tous) des cas inter-navigateurs. Il y a plusieurs framework javascript parmi lesquels choisir. En général, ce qui peut être fait avec l'un peut l'être avec l'autre, aussi choisissez avec lequel vous êtes les plus à l'aise au niveau de la syntaxe.

Voici une liste de quelques frameworks parmi les plus populaires :

Il y a certainement beaucoup d'autres frameworks et de nouveaux continuent de sortir, mais les lister tous sera pour un autre jour. Parmi ceux cités, j'adore, utilise et recommande pleinement MooTools si vous maîtrisez JavaScript. Si vous venez juste de débuter, jQuery serait probablement ma seconde recommandation.

Utilisez un script de correction Javascript pour IE

Il y a quelques solutions javascript proposées sur Internet qui tentent de forcer IE à agir comme un navigateur respectueux des standards. Si l'audience ciblée comporte un seuil suffisamment élevé d'utilisateurs disposant de Javascript, vous pourriez essayer IE7 de Dean Packer's ou un script similaire.

Comment déboguer Internet Explorer

Internet Explorer est de notoriété publique difficile à déboguer, mais il existe de nombreux outils pour rendre la tâche aux développeurs plus facile. Comme déjà dit, premièrement développez pour les navigateurs respectant les normes. Firebug et la Web Developper toolbar sont tous deux d'excellent greffons pour Firefox et peuvent aider à trouver ou éradiquer de nombreux bugs dans IE. Si vous souhaitez la puissance de Firebug dans d'autres environnements, Firebug Lite est maintenant également disponible en tant que bookmarklet.

Pour tester de multiples versions d'Internet Explorer, la meilleure option sans installer une machine virtuelle est actuellement IEtester. Les créateurs d'IETester proposent également DebugBar, un plugin pour IE gratuit pour un usage personnel mais demandant une licence commerciale après 60 jours d'utilisation à des fins commerciales.

Comment isoler IE6

La première étape pour gérer IE6 est de l'isoler de façon à ce que tous les changements ne l'affectent que lui et aucun des autres navigateurs. Il existe plusieurs façons de poinconner IE6 : à l'aide de commentaires conditionnels, à l'aide de selecteurs CSS, et à l'aide de JavaScript. Nous allons aborder chacune de ces méthodes tour à tour.

Utiliser les commentaires conditionnels pour Internet Explorer.

Microsoft a inclus les commentaires conditionnels comme un moyen de cibler les différentes version sd'Internet Explorer. Tout peut-être placé dans les commentaires conditionnels, incluant le balisage, JavaScript, les fichiers Javacsript, les CSS et fichiers externes. Les commentaires conditionnels fonctionnent de façon telle que vous pouvez cibler une version spécifique d'IE, et chaque version antérieure ou postérieure à une version particulière.

La syntaxe est la suivante :

Utiliser les commentaires conditionnels comporte de nombreux avantages sur les autres méthodes. La feuille de style est séparée des autres CSS de la sorte qu'il n'y a aucune confusion sur les navigateurs impactés. Egalement, quand IE6 chutera a un niveau suffisant de part de marché, la feuille de style peut être rapidement retirée dans avoir à parcourir chaque déclaration CSS.

Le seul inconvénient à utiliser les commentaires conditionnels réside dans le fait qu'ils ajoutent une requête HTTP à la page pour ce navigateur. Bien que cela soit un moindre mal pour une CSS, je conseillerai d'éviter les javascript conditionnels externes parce qu'ils agissent comme des freins et peuvent empêcher d'autres fichiers à se charger jusqu'à ce que le chargement soit complètement terminé. Si vous avez besoin de javascript conditionnels externes, utilisez plutôt JavaScript lui-même pour cibler le navigateur.

Comment cibler IE6 à l'aide de sélecteurs CSS

Si vous ne souhaitez pas utiliser de commentaires conditionnels, les sélecteurs CSS sont une autre option pour cibler IE6. Internet Explorer 6 ne supporte/comprend/interprète pas les sélecteurs enfants. Vous pouvez donc créer une déclaration CSS pour IE6 puis utilisez les sélecteurs enfants pour des déclarations destinées à IE7 et tous les navigateurs modernes.

En premier, le HTML

Puis les CSS

L'inconvénient de cette méthode est que cela peut rendre votre feuille de style un peu cahotique, assurez-vous alors de commenter clairement votre code. La déclaration CSS pour IE6 sera également détectée et interprétée par les autres navigateurs, aussi est-ce important de la placer avant la déclaration du sélecteur enfant. La raison pour laquelle l'enfant surcharge la première déclaration et parce qu'il confère un coefficient de spécificité supérieur à la déclaration. Parce qu'IE6 ne reconnaît pas la syntaxe, il l'ignore, mais tous les autres navigateurs l'interprètent comme ils le devraient.

Comment utiliser JavaSCript pour détecter IE6

Si vous souhaitez détecter IE6 via JavaSCript sans vouloir utiliser des commentaires conditionnels, voici comment :

Images

IE6 comporte de nombreux points noirs qui peuvent s'avérer bloquant à propos des images si vous avez un agenda serré ou êtes liés à une mise en page particulière. Cette section est destinée à vous alléger de certaines de ces contraintes.

Le correctif de transparence Alpha PNG pour IE6

Un des aspects les plus frustrants d'Internet Explorer 6 est qu'il ne supporte pas la transparence pour les images en haute qualité, rendant les effets de superpositions de calques difficiles. Il existe quelques solutions Javascript, que je liste dessous, mais aucune ne vous permet d'utiliser la techniques des sprites CSS.

La solution la plus simple consiste à enregistrer votre image en tant que fichier PNG8 avec transparence alpha. Si vous utilisez Adobe Fireworks, voici comment faire : Enregistrer Sous > Enregistrer comme type > PNG aplati > Options > Transparence Alpha. Si vous utilisez un type de dégradé, vous pouvez cocher la case "Dither" afin d'obtenir une qualité de dégradé légèrement meilleure. Sauvegarder en tant que PNG avec transparence Alpha n'affichera comme semi-transparentes que les zones d'images transparentes à 100%, il n'y a pas de variantes de degrés d'opacité.

Coins arrondis dans IE6

Plutôt que de me lancer dans une explication détaillée ici, je vous renvoie simplement vers un tutoriel sur les menus CSS à coins arrondis, qui couvre une méthode inter-navigateur pour créer des coins arrondis pour des menus ou d'autres éléments de mise en page.

Comment résoudre l'image de fond qui vacille

Si vous utilisez des sprites CSS en pour des images de fond appliquées à des boutons ou des liens, vous remarquerez que l'image se mettra à vaciller brièvement dans IE6. La raison en est qu'IE6 ne met pas en cache l'image correctement et la recharge à chaque fois. Vous pouvez corriger cela en utilisant une seule ligne de JavaSCript qui force IE6 à cacher l'image.

D'autres solutions

Mise en page

Les bogues de mise en page d'IE6 peuvent être les pires à contourner, surtout lorsque vous travaillez sur un positionnement au pixel près qui s'affiche comme souhaité dans tous les navigateurs sauf IE6.
Cette section concerne ces bogues et leurs correctifs.

Comprendre hasLayout

Un certain nombre de bogues d'IE6 et d'erreurs de rendu peuvent être attribués au concept propriétaire hasLayout de Mircosoft. En quelques mots, hasLayout est déclenché lorsqu'un élément a des dimensions comme la hauteur ou la largeur. L'absence de ces déclarations peuvent se solder par un des nombreux bogues que vos rencontrerez sûrement en travaillant pour IE6.

Plutôt que de m'embarquer dans une longue description de hasLayout, je vous renvoie plutôt à un excellent tutoriel sur le sujet par John Gallant and Holly Bergevin, qui détaillera quand et comment gérer hasLayout.

En savoir plus

Le modèle de boîte d'IE6

Si le mode quirks "excentrique" est déclenché dans IE6, ce dernier va utiliser une ancienne interprétation du modèle de boîte de Microsoft qui exclue les bordures et les marges internes de la largeur totale d'un élément. La meilleure stratégie pour gérer ce bogue est d'éviter de déclencher ce mode en spécifiant un doctype correct ou en n'appliquant pas de propriété "largeur" à un élément qui comporte déjà des propriétés border ou padding. Les commentaires conditionnels peuvent également être utilisés, mais ne devraient être appelés qu'en dernier recours.

En savoir plus

Hauteur Minimum - Min Height

IE6 ne connaît pas le propriété min-height et traite la hauteur en tant qu'hauteur minimum à la place. Grâce à Dustin Diaz, un correctif a été découvert qui utilise la déclaration !important, qu'IE6 surchargera mais pas les autres navigateurs. Cette solution fonctionne également avec min-width.

Max height

Malheureusement, les seuls façons de réussir l'effet de "hauteur maximum" dans IE6 est rendu possible par les déclarations des CSS spécifiques à IE, ce qui revient à exécuter du Javascript dans une feuille de script, ou en utilisant directement Javascript. Des deux, je recommande d'utiliser la solution de Javascript vu que les expressions CSS sont coûteuses en terme de puissance de calcul et peuvent entraîner un plantage du navigateur. Aucune des deux solutions ne fonctionnera si Javascript est désactivé. Notez que cette solution n'est valable que pour IE6 vu que tous les autres navigateurs accepte max-height.

100% Hauteur

Dans le but qu'un élément atteigne 100% de sa hauteur dans IE, vous aurez besoin de spécifier à l'élément parent une hauteur fixe. Si vous voulez que l'élément respecte la longueur totale de votre page, appliquez hauteur : 100%; aussi bien à html qu'au corps de l'élément.

Min width / Largeur miminum

Tout comme max-height et max-width, min-width n'est pas toléré par IE6. Il y a deux solutions, appliquer un balisage "extra" pour réussir l'effet, ou utiliser Javascript.

Max width / Largeur maximum

La seule façon d'utiliser max-width dans IE6 est de se servir de Javascript.

Le bogue de la double marge flottante

IE6 double de façon incorrecte la marge pour les éléments flottants avec une marge appliquée au même côté que l'élément flottant. Steve Clason est l'auteur du correctif, qui est de simplement ajouter display:inline; à l'élément flottant.

Comment se débarrasser des flottements

Si vous tentez d'emballer des éléments flottants au sein d'un conteneur, mais que celui-ci ne les contient pas correctement, définissez-lui soit une hauteur soit une largeur avec une valeur autre que auto, puis ajouter la propriété overflow avec l'une des valeurs suivantes : auto, hidden ou scroll.

Alex Walker a été le premier a écrire sur cette technique et crédite Paul O'Brien pour l'idée.

Les chûtes de flottement

Ce bogue survient lorsque les contenus d'un bloc flottant dépassent sa largeur définie. Dans Firefox, IE7 et les autres navigateurs, les contenus seront seulement coupés, mais dans IE6, le conteneur ne tiendra pas compte de ses dimensions spécifiées et s'élargit afin de s'adapter aux contenus.SI d'autres éléments ont été positionnés en flottant juste à côté, ils passeront dessous.

Ce bogue est l'un des bogue d'IE6 pour lequel je n'ai pas vraiment trouvé de solution satisfaisante. Il peut être minimisé en utilisant overflow:hidden; ou overflow:scroll; mais la valeur hidden présente des soucis d'accessibilité et la valeur scroll peut défigurer la mise en page. Même les correctifs Javascript ne semblent pas utiles. La meilleure solution que je puisse proposer est d'éviter ce cas de figure, soit en utilisant une mise en page fixe, soit en étant très pointilleux sur la taille de votre contenu.

Le bogue de la Guillotine

C'est un bug particulièrement frustrant d'IE6 et d'IE7. Il tronque ou guillotine le contenu d'un élément flottant non dégagé qui serait plus large que son élément conteneur quand les liens ont des styles de survol avec des éléments non-flottants après le passage de la souris. Pas de soucis si cela ne vous paraît pas clair, ce bug et son correctif sont encore une fois bien documentés par les gens de Position Is Eveything.

En dépit des conditions complexes à réunir pour déclencher le bogue, les solutions sont plutôt simples. La première requiert d'ajouter un élément additionnel en bas du conteneur et lui attribuer un clear:both;
La seconde solution est de déclencher hasLayout sur l'élément contenant les liens qui provoquent l'effet guillotine. Ceci peut-être réalisé en ajoutant simplement une déclaration de height:1%;

Le bogue de l'écart de 3px

Egalement appelé le bogue du texte poussé de 3px, il survient dans IE6 lorsque du texte est adjacent accolé à un élément flottant. IE6 ajoutera une margin de 3px entre l'élément et le texte, même si aucun n'est spécifié. Stu Nichols a une solution élégante au problème.

IE et la propriété Z-index

Si vous utilisez la propriété z-index sur des éléments positionnés dans IE6 ou 7, l'index d'empilement se réinitialisera à zéro, provoquant une erreur de rendu. La solution, évoquée par une personne nommée baker, est d'ajouter un z-index plus haut que l'élément parent. Dans certains cas, l'élément parent peut également avoir besoin de se voir attribuer un position:relative;

Bogue du débordement

Jonathan Snook documente et résout le bug de l'overflow, qui survient lorsque la propriété overflow est attribuée sur un élément conteneur dans lequel un élément enfant à la hauteur supérieure est positionné en relatif. Dans IE6 et IE7, au lieu de suivre la déclaration overflow, l'enfant plus grand se répandra hors de son parent. La solution ? Ajouter position:relative; au conteneur.

Les listes

Sans surprise, il y a un certain nombre de bogues spécifiques à IE6 concernant les listes. En voici quelques uns et leurs correctifs.

Le bogue de l'escalier

Apparaît lorsque les contenus d'un élément <li> sont flottants dans une tentative de créer une liste horizontale (souvent dans le cadre de la navigation). Chaque élément apparaîtra soit empilé verticalement, soit flottant en suivant un dessin d'escalier.

La solution ? Appliquez le flottement à l'élément <li>, ou appliquez lui display:inline;

Espacement vertical ou bogue de l'espace blanc

En créant une liste verticale qui contient des balises <li> avec des enfants en niveaux de bloc, IE6 (et parfois IE7) ajoutera de façon erronée un espace vertical entre chaque élément de liste. Il existe de nombreuses solutions, mais regardons rapidement un exemple auparavant :

Jon Hicks a le mérite d'un correctif qui implique du flottement et du clearing sur les liens d'une liste :

Une autre option est de déclencher hasLayout en spécifiant soit une hauteur soit une largeur spécifiques sur les liens ou tout élément de niveau bloc.

On peut également attribuer une déclaration display:inline à la balise <li>

Un autre correctif intéressant implique de laisser un espace entre le dernier caractère textuel dans le bloc de niveau, et la balise fermante.

Comportement

Comme dans beaucoup d'autres scenarii, IE6 a des problèmes dans sa façon de se comporter. Certaines de ses lacunes proviennent de l'âge d'IE6, parce qu'il ne supporte que partiellement CSS2; parc qu'il ne supporte pas du tout CSS3, ou encore parce que Microsoft a simplement décidé de suivre un standard propriétaire.

Regardons quelques-uns des problèmes de comportements les plus communs d'IE6

Pas d'état au survol dans IE6

Il n'y a aucun support pour un état au survol d'un élément, exception faite des balises d'ancres avec l'attribut href, ou d'éléments pour lesquels une telle balise ancre agit comme un conteneur. Cela restreint sérieusement les effets de survol au passage de la souris dans IE6, mais il existe des moyens de contourner cela.

La meilleure façon est de ne pas s'appuyer sur la propriété hover pour des missions de fonctionnalités critiques. A la place, utilisez-la seulement pour accentuer ou améliorer une option déjà fonctionnel et accessible.

La plupart des correctifs utilisent soit la propriété propriétaire de Microsoft ou une solution javascript souvent au travers d'un framework ou d'un script correctif.

Incorporer le modèle de balise dans IE

Aucune version d'explorer (incluant IE7 et IE8) ne supporte le modèle de HTML5 car Microsoft préfère à la place proposer sa propre option, VML. Toutefois voici plusieurs solutions JavaSCript qui émulent le tableau de balises pour IE.

Bogue de redimensionnement

Emilie Stenström a découvert et trouvé un correctif pour ce bogue. Dans un document à la mise en page fixe et à l'élément body centré, tout élément positionné relativement à l'intérieur deviendra fixe si la page est re-dimensionnée sans être rechargée. La solution d'Emilie fût simple et élégante : ajouter position:relative; à la balise body.

Javascript

IE6 souffre également d'une pléthore d'erreurs lorsqu'il tente d'interpréter javascript. Je ne vais pas être capable de tous les couvrir, mais je vais aborder quelques unes des situations les plus communes et ce que pouvez réaliser pour les corriger.

Erreur : identifiant attendu, chaîne, ou nombre

IE n'est pas réputé pour être tolérant vis-à-vis de javascript mal codé et donnera souvent l'erreur "identifiant attendu, chaîne, ou nombre" si une virgule qui traîne est trouvé après le dernier élément d'un ensemble. Les autres navigateurs sont plus indulgents , mais en retirant la virgule, vous pouvez habituellement vous débarrasser de l'erreur.

Fuite de mémoire javascript

Parce qu'il utilise son propre gestionnaire de mémoire, il eut être sujet à une fuite de mémoire lorsqu'il ne parvient pas à faire appel à de la mémoire pour intéragir avec javascript. Douglas Crockford a une compte-rendu excellent sur la prévention des failles de mémoire dans IE. Une autre page sur le sujet, écrite par Hedger Wang, vaut également le détour.

Divers

Cette section est dédiée aux quelques bogues et correctifs qui ne rentrent pas clairement dans les autres catégories.

Bogue de copie de caractères

Lorsqu'IE6 rencontre quelque sorte d'élément caché, comme un commentaire ou un élément mis en display:none; à l'intérieur d'un élément flottant, il arrive qu'il duplique les caractères. Le problème est joliment détaillé dans Position Is Everything, mais la solution semble assez simple : appliquer un display:inline; sur le flottant qui précède les éléments cachés.

Favicons dans IE

C'est le raccourci pour Favorite Icon et fait référence à l'image de 16 par 16 pixel qui apparaît à côté de la page que vous mettez dans vos favoris. Il y a deux méthodes pour le faire apparaître. La première est simplement d'enregistrer une image nommée favicon.ico dans le répertoire racine de votre site web. IE et les autres navigateurs devraient automatiquement chercher l'image et l'afficher. La seconde méthode est de placer le code suivant dans l'entête de votre document HTML (après avoir chargé votre image).

Notez que cette image favicon peut être mise en cache, et ne changera pas jusqu'à ce que vous vidiez votre cache navigateur une voire plusieurs fois.
Si vous souhaitez une mise à jour automatique pour vos visiteurs, définissez l'expiration dans l'entête de l'image.

GZip dans IE6

Certaines versions d'IE6 antérieures à la mise à jour XP SP2 peuvent avoir des problèmes avec les fichiers qui ont été servis via la compression Gzip.
Heureusement, Seb Duggan a trouvé une solution à ce bug en utilisant le répertoire d'installation ISAPI_REWRITE du serveur Apache.

Sa solution consiste à placer le code suivant dans le fichier httpd.conf à l'intérieur de ce répertoire.

La réécriture d'URL (URL rewriting) avec E-Majine

Yann Faurie — Tue, 15 Apr 2008 14:51:00 +0200

La ré-écriture d'URL avec E-Majine

Qu'est-ce ?

Cela consiste à remplacer une chaine de caractères utilisée par les serveurs web par une autre.
Concrètement, il s'agit des caractères affichés après le nom de domaine du site, dans la barre d'adresse de votre navigateur internet.

Exemple :

http://www.site.com/page.php?param1=moncritere&variable=français

pourra être avantageusement remplacé par :

http://www.monsite.com/formation/referencement/optimisation-de-code-source.php

Pourquoi recourir à la réécriture d'URL ?

D'un point de vue purement pratique, cela permet d'afficher l'arborescence que l'on souhaite voir apparaitre dans la barre d'adresse.
C'est également beaucoup plus explicite pour l'internaute (qui n'a plus besoin de nommer ses favoris/bookmarks puisque le contenu est dans l'URL).
Pour le référencement internet, les robots des moteurs de recherche collectent les adresses des pages web (URL) et y associent des champs lexicaux : Une URL de type http://www.e-majine.com/gerer-son-site-avec-e-majine-manage/, et qui comprend dans le contenu visible de la page des mots liés à la gestion de site, va être mieux prise en compte par le moteur de recherche, puisque les mots-clé associés au thème de la page sont repris dans l'adresse, qu'une URL de forme http://www.e-majine.com/1435423.html.

A contenus équivalents et en partant d'une page "nouvelle" (pas de liens externes pointant vers elle), le moteur affichera en priorité notre URL dans les résultats !

Enfin,

http://www.site.com/page.php?param1=moncritere&variable=français

regroupe les inconvénients suivants : illisibilité, signification nulle pour l'internaute non spécialiste, caractères spéciaux (?/&/$/€,ç..) encodés et non pris en compte par la plupart des moteurs de recherche.

C'est une adresse qui ne sera pas retenue pour figurer dans les index des bases d'engins de recherche en réponse à la requête "naturelle" d'un internaute.

Accessoirement, c'est aussi potentiellement dangereux car cela fournit un bon indicateur pour toute personne malveillante qui tenterait d'accéder par déduction à d'autres contenus...

Je suis convaincu(e) ! Quand utiliser la réécriture d'URL ?

Lorsqu'il s'agit d'un site web dit "statique" (les pages sont assemblées à la main, et les liens vers les ressources et les autres pages sont connus d'avance par le webmaster), nul besoin de ré-écrire l'adresse puisque le webmestre peut choisir lui-même le nom à donner à ses fichiers.

Lorsqu'il s'agit de sites administrables, c'est à dire dont le contenu est créé puis publié au fur et à mesure, l'exercice est impossible puisque nul ne peut prédire les contenus qui vont être intégrés. Il s'agit alors de trouver un système qui va forger une adresse à partir d'éléments contenus dans et autour de la ressource.

L'état de l'art de la ré-écriture d'URL

Par défaut, la grande majorité des sites dits "dynamiques" servent leurs pages en laissant dans l'URL les paramètres qui sont passés via le langage interprété côté serveur, afin d'accéder à la base de données et de retourner les résultats correspondants à la requête de l'internaute.

Ce système est utilisé massivement par la plupart des outils dits "web 2.0", qu'ils soient blogs, forums ou CMS...

Concrètement, cela donne souvent, avec les différentes solutions du marché (exemples au hasard) :

article.php3?id_article=765
spip.php?article98
/content/section/1/2/
index.php?id=250
/content/#more-55

Note : Certaines de ses solutions peuvent permettre la ré-écriture d'URL, à condition d'user de plug-in (greffons), et d'aller configurer et éditer manuellement des fichiers .php et .htaccess , et sous réserve de compatibilités entre versions; enfin sous réserve de compatibilité avec la configuration serveur de l'hébergeur...

E-Majine les surpasse en déclinant ce principe au plus petit élément rédactionnel publié sur le site, l'article.

En effet, par défaut (sans aucune configuration), E-Majine est optimisé pour le référencement naturel avec un système d'écriture d'URL qui reprend le chemin de votre arborescence (au minimum), puis le nom du fichier (si vous l'avez spécifié).

Ex : http://www.e-majine.com/concevoir-des-sites-internet-cms/solutions/les-produits-standards/34-gerer-son-site-internet.html

Et depuis la V1, c'est également tout le catalogue (et donc les produits...) qui bénéficie de cette fonctionnalité !

Où est le piège ?

Il n'y en a pas ! E-Majine vous permet d'associer exclusivement une adresse optimisée à une page. Ainsi, pas de risque de se voir pénalisé par Google pour "duplicate content" (duplication de contenu > deux pages proposant le même code - visible et invisible - dans le but de posséder un plus grand nombre de pages indexées, et donc de toucher potentiellement plus d'internautes en squattant les places dans les pages de résultats des moteurs de recherche; en savoir plus sur le site de Google "outils pour webmasters").

Existe-t-il des contraintes ?

Bien entendu, dans le cadre d'une réécriture d'URL pour améliorer le positionnement de sa page dans les feuilles de résultats des moteurs de recherche, il ne faut pas s'imaginer qu'il suffit de truffer son adresse de mots-clés pour que l'affaire soit gagnée...
Tout comme pour les sous-domaines mieux notés que les répertoires, il faut penser à positionner les mots importants le plus près du nom de domaine possible (donc à gauche pour notre sens de lecture.) Ceux qui viennent après perdent en importance. Enfin, il est souvent question de limite du nombre de caractère d'une URL, variable tant que le serveur est capable de donner la page (sans quoi il retourne une erreur 414 - URI trop longue).

Voici ainsi quelques adresses ayant pignon sur web :

http://thelongestlistofthelongeststuff(...)

Et une requête encodée :

http://www.google.com/search?hl=en&lr=&c2coff=1&rls=(...)

Et avec E-Majine ?

De la même façon que l'écriture pour le web requiert un travail adapté (on appelle cette tâche optimisation des contenus), vous déclarez les règles que vous souhaitez voir appliquer à cette ré-écriture en signifiant à E-Majine les paramètres à intégrer dans l'URL.

Voici les différentes possibilités qui vous sont fournies pour faire du sur-mesure, sans connaissance particulière :

Nom de la page : c'est la partie finale de l'URL, placée donc à l'extrémité droite, et qui comporte l'extension du fichier. Il vous est ainsi possible d'associer à votre page un nom et une extension de votre choix (.html, .html, .php, .txt....)

Titre de la page : c'est la balise html <title> dont le contenu est affiché dans la barre du navigateur. C'est une balise primordiale dans le cadre du référencement naturel.

Pour le CATALOGUE E-COMMERCE, depuis la V1 d'E-Majine, il est possible de choisir un certain nombre de paramètres des fiches produits qui seront remontés dans l'adresse :

Libellé
Référence
Propriété(s) additionnelle(s)
Variante(s) de produits

Tout en ayant la possibilité d'inter-changer l'ordre de ces éléments dans la réécriture.

Il en va de même pour les fiches du module annuaire. Il est ainsi possible de choisir parmi les noms de catégories, et les noms des fiches. Par exemple : /liens/category-3-sites-de-salles-de-concerts.html

L'accès à la fiche de l'annuaire permet de remonter le titre de l'entrée dans le <title> de la page.
Utilisée conjointement avec la ré-écriture d'URL de l'arborescence dans E-Majine, vous allez ainsi obtenir des URL dites "propres", c'est à dire dont la syntaxe comprend des mots explicites et signifiants, sans caractère spécial (encodage, sigles, etc) qui pourrait en gêner la lisibilité.

Le même principe est décliné aux articles (de type actualités, évènements, en multi-publication...)

Le forum hérite quant à lui du passage des titres et de la description au niveau de la balise <title> et de la balise meta description.

La ré-écriture d'URL est également la méthode utilisée dans E-Majine pour gérer les exceptions, comme la fameuse page 404 ("page not found", page non trouvée (sur le serveur)), que vous pouvez choisir de diriger vers une page/rubrique spéciale (un plan du site ?), ou bien de ramener au niveau d'arborescence parent.

(A noter que les redirections au niveau des rubriques, si utilisées via les méthodes de publication, sont de type "permanentes" (entête HTTP 301)).

Ces possibilités de ré-écrire vos adresses vous épargnent le travail délicat qui est effectué en coulisse, basé sur des règles d'expressions régulières dont la moindre erreur (de logique ou de syntaxe) peut entrainer l'indisponibilité partielle ou totale de votre site !

Elles sont accessibles simplement, et ne demandent aucune connaissance informatique (E-majine corrige vos suggestions en remplaçant les caractères spéciaux et les espaces.)

Enfin, elles sont immédiates à mettre en œuvre, et peuvent s'appliquer de façon individuelle à chaque page. Ainsi donc, on peut laisser au choix E-Majine gérer la ré-écriture automatiquement, ou attribuer arbitrairement (à posteriori) une adresse individuelle à une page. Et c'est ce qui fait l'atout incomparable d'E-Majine face aux autres solutions qui ne peuvent qu'appliquer des règles de réécriture à priori (c'est à dire où il faut définir une règle qui sera appliquée de façon uniforme à toutes nos adresses) : dans le cadre d'un travail collaboratif sur un site E-Majine, la personne en charge du référencement peut venir optimiser individuellement les URL des pages et des articles créés par les rédacteurs même une fois les contenus publiés !

Nous aborderons dans un prochain billet la question d'accessibilité, en couvrant les notions de code standard conforme, de normes et de l'optimisation appliquée aux ressources dans E-Majine (code XHTML et CSS valides, attributs ALT, LONGDESC, LANG gérés nativement, etc...)

YF

En savoir plus sur les fonctionnalités proposées par E-Majine : référencement et SITEMAP

Yann Faurie — Mon, 10 Mar 2008 09:15:00 +0100

Les conseils prodigués ci-après vous permettront d'avoir le maximum de cartes en mains pour suivre et optimiser le référencement naturel de vos sites avec E-Majine.

1/ Qu'est-ce que c'est ?

Le Sitemap est un fichier au format XML le plus souvent (il peut aussi être au format .txt) qui liste les pages de votre site.
Le sitemap est depuis fin 2006 un standard informatique, dont on peut lire les spécifications sur le site sitemaps.org.

Il a longtemps été associé au moteur de recherche Google (d'où le terme lu un peu partout de "Google Sitemaps") puisque c'est ce dernier qui a contribué à le rendre populaire.
Il peut être généré par des programmes ou des applications en ligne, et la V1 d'E-Majine vous permet de le publier et paramétrer selon vos besoins.

2/ A quoi cela me sert-il ?

Le sitemap ("plan du site" en anglais) est destiné à indiquer aux robots des moteurs de recherche en un endroit toutes les pages de votre site, sans notion de hiérarchie ou d'arborescence. Les adresses absolues (déclaration de type : http://www.votresite.com/index.php ou http://www.votresite.com/rubrique2/sous-rubrique2/mon-fichier.php) se succèdent les unes à la suite des autres au sein de balises XML.

Le Sitemap est alors un autre plan du site ?

Oui, il est destiné aux "non-humains". Il est à différencier du plan du site "traditionnel" qui lui est destiné à être lu par vos internautes dans le but de leur faciliter l'accès aux rubriques et aux contenus parfois nombreux et imbriqués. Le plan du site qui vous est proposé comme méthode de publication avec E-Majine vous permet ainsi de délimiter le niveau d'imbrication de vos rubriques ainsi que la rubrique de départ afin de proposer éventuellement plusieurs plans pour des publics différents.

3/ A qui s'adresse t-il ?

Les moteurs de recherche listés ci-dessous et leur robots adhèrent au standard sitemap et sont donc capables de lire et parcourir votre fichier afin d'en extraire les liens :

Google
Yahoo!
Ask
MSN/Windows LiveSearch
Exalead

(Cette liste est donc susceptible de croitre puisque le sitemap répond à un standard pouvant être utilisé par tous.)

4/ Quel bénéfice puis-je en tirer ?

Le robot qui arrive sur votre site n'a pas à parcourir toute l'arborescence de vos pages avant de pouvoir les indexer, puisque vous lui en fournissez la liste au moyen de ce fichier. Cela vous permet donc d'optimiser votre référencement naturel en conférant une visibilité à toutes les pages désirées, même si
la citation d’une url de page dans un sitemap ne garantit pas son indexation par le moteur ! De même, les pages énumérées ne sont pas immédiatement indexées (le robot procède par étapes, et il est généralement constaté que l'affichage au sein des pages de résultat de recherche se fait progressivement, par petits groupes de pages).

5/ Comment procéder ?

Une fois que l'arborescence de votre site est faite, et que vous commencez à publier des contenus, vous avez la possibilité de générer le sitemap de façon automatique avec E-Majine depuis la version 1 de l'interface Manage (la version 0.15a vous permet de l'éditer après l'avoir récupéré par un autre biais).
Manage > Référencement > Sitemap

N'oubliez pas de supprimer de la liste ainsi générée les URL que vous ne souhaitez pas faire connaitre (rubriques invisibles par exemple).
Le Sitemap généré par E-Majine est compressé afin d'optimiser l'espace disque : sitemap.xml.gz (qui est parfaitement décompressé par les robots).

C'est tout ?

Non. Vous devez maintenant faire connaitre l'existence de l'adresse de ce plan aux principaux intéressés, à savoir les moteurs de recherche.
Pour ce faire, il existe plusieurs méthodes.
La plus simple est d'ajouter cette adresse au sein d'un autre fichier pouvant être également généré par E-Majine, le fichier robots.txt
Ce dernier faisant partie d'un protocole plus ancien et connu de tous les développeurs d'agents utilisateurs, il est demandé et lu par tous les robots lorsque ceux-ci accèdent à votre site par la racine. Depuis l'apparition du sitemap le standard a été modernisé afin que le robots.txt puisse également servir à faire connaitre l'adresse du sitemap (faire d'une pierre deux coups.)

La déclaration se fait de la manière suivante dans votre fichier robots.txt :

Sitemap : "emplacement_Sitemap"

ce qui peut donner : 

Sitemap : http://www.medialibs.com/sitemap.xml.gz

Plus d'infos sur le protocole d'exclusion de robots : http://www.robotstxt.org/

Si vous souhaitez aller plus loin et obtenir des informations des moteurs de recherche en retour, il va vous falloir vous créer un compte (gratuit) sur certains de ces moteurs. Le plus connu, Google, propose depuis 2006 un service baptisé "outils pour webmasters" qui permet de suivre l'évolution de la présence des pages de son site sur son index, ainsi que des conseils basés sur les principes du référencement naturel. De même pour le sitemap, pour lequel le service susnommé de Google va vous indiquer s'il a bien été pris en compte par son robot, s'il ne comporte pas d'erreurs, et quand il a été parcouru pour la dernière fois .

Et après ?

Soyez un minimum patients... Progressivement les pages de votre site (celles indiqués sur votre sitemap) devraient être indexées par les robots, et donc ressortir sur les pages de résultats de moteurs de recherche par rapport à leurs contenus.

Au fur et à mesure de la vie de votre site, de nouvelles rubriques vont surement voir le jour, ainsi que de nouvelles publications de contenus.
Des mises à jour du sitemap sont donc à prévoir, puisque par défaut E-Majine ne peut décider pour vous ce qui doit-être référencé par les robots.
Une fois que vous avez généré votre nouveau sitemap, il faut penser à signaler aux robots qu'il a été mis à jour, afin que ceux-ci prennent les modifications en compte (le plus rapidement possible, en sachant que vous n'avez aucune - ou très peu d' - influence sur le délai ni les fréquences de passage des robots sur votre site).

Pour ce faire le Manage vous propose d'envoyer une requête à Google pour qu'il soit averti que vous avez mis vos pages à jour.
Cette opération s'appelle "PINGer" (prononcez "Pineguer").

Dans le cas de figure où vous avez également créé un compte sur d'autres sites de moteur, n'hésitez pas à reproduire l'opération pour leurs robots !
Voici les adresses à utiliser, notez bien qu'il vous faut changer les noms de domaine indiqué (www.e-majine.com) par celui de votre site ! Certaines adresses doivent également être encodées.

Ask.com: http://submissions.ask.com/ping?sitemap=http://www.e-majine.com/sitemap.xml
Google: http://www.google.com/webmasters/sitemaps/ping?sitemap=http://www.e-majine.com/sitemap.xml
Yahoo: http://search.yahooapis.com/SiteExplorerService/V1/updateNotification?appid=YahooDemo&url=http://www.e-majine.com/sitemap.xml
Exalead : http://www.exalead.fr/search/submitYourSitePage
MSN / LiveSearch : http://webmaster.live.com/ping.aspx?siteMap=http://www.e-majine.com/sitemap.xml

A VENIR :

Lors de mon prochain article, je vous parlerai d'une autre fonctionnalité très utile au référencement naturel : la ré-écriture d'URL (URL REWRITING), proposée depuis la version 0.15 dans l'interface Manage, et grandement améliorée depuis la V1 avec l'extension de ses fonctionnalités au catalogue.

MISE A JOUR juin 2009 :

Depuis que Microsoft a lancé "BING", son nouveau moteur de recherche, voici l'URL à utiliser pour soumettre vos sitemaps :

http://www.bing.com/webmaster/ping.aspx?siteMap=

Notez que l'ancienne adresse fonctionne toujours