Navigateurs

Tous les navigateurs n'interprètent pas les différentes versions d'HTML, javascript et CSS de la même manière.

L'affichage des images, des animations, de la transparence change d'une version à l'autre.

Quand il est possible d'activer java (JRE 6.0), d'installer les "plugins" (Flash, Ipix, Quicktime, Acrobat Reader...), l'exécution est identique mais pas toujours la position sur l'écran.

Tous ces problèmes de compatibilité obligent les concepteurs de sites à rediriger ou à générer les pages en fonction du navigateur détecté ou à créer plusieurs feuilles de style ou le plus souvent à n'écrire que pour les navigateurs les plus courants ou les plus fréquents ou pour leur favori. D'où le danger d'utiliser ces logiciels qui prétendent offrir l'anonymat : comme le "referrer" ("HTTP_REFERER") peut être faux ou bloqué et les cookies refusés, comme il n'y a plus d'indication du type de navigateur, l'accès au site peut être interdit, les pages générées par PHP ou les routines de détection en javascript risquent de ne plus fonctionner et, ici, le menu de gauche, qui dépend du navigateur, peut recouvrir une partie du texte ou ne plus afficher le popup en CSS...

Conséquences pour les captures

Lors de la capture, il est donc préférable d'identifier le navigateur qui sera utilisé.
WinHTTrack propose 30 identifications en fonction du navigateur et du système d'exploitation et une option pour renvoyer n'importe quelle chaîne.
De plus, certains sites ou prestataires (comme free.fr) interdisant les aspirateurs de sites, c'est parfois le seul moyen d'effectuer la capture.
Sur le site la page http://danzcontrib2.free.fr/no_msie6.php renvoie tout compatible MSIE 6 à la page d'accueil et affiche le code aux autres navigateurs.

Avant que free.fr ne filtre HTTrack, vous pouviez tester la capture de ce site avec plusieurs identificateurs (un navigateur récent et un navigateur ancien par exemple) et receviez des pages très différentes. En changeant d'identificateur avec Mozilla (+ Multizilla), Firefox (+ User Agent Switcher), Konqueror, K-Meleon ou par l'intermédiaire de wannabrowser, vous obtiendrez des codes très différents : avec ou sans javascript, avec un choix de feuilles de style, des instructions CSS différentes...

Lors d'une mise à jour du navigateur, il est souvent indispensable de mettre à jour la capture si c'est encore possible.

Quelques problèmes de compatibilité

A titre d'exemple, voici quelques problèmes rencontrés pour ce site :

• Tout d'abord, le site a été testé avec plusieurs résolutions d'écran et les quatre moteurs de rendu CSS (Trident, Gecko, WebKit et Presto).
• Il a été testé avec MSIE 3, 4, 5, 5.5, 6, 7 et 8 (versions pour tester localement disponibles sur le site TredoSoft ou Internet Explorer Collection) puis Mozilla depuis la version 1.4 (Windows et Linux), Firefox / Firebird /Phoenix (Windows et Linux), Safari 2 et 3 et Chrome 1 et 2, Netscape 4, 6, 7 et 8, K-Meleon , Konqueror (Linux), Galeon (Linux), Epiphany (Linux), Links (Linux), elinks 0.9 (Linux) et Beonex Communicator.
• J'ajouterai Opera 5, 6 7, 8 et 9 (Windows et Linux), Dillo (Linux), Off By One, BrowseX, XBrowser (java) et d'autres...

Chaque test a conduit à des modifications (et a parfois ajouté des erreurs).

• En plein écran, une résolution de 1024x768 affiche texte (taille moyenne ou Zoom 100%) et images sans trop de problèmes quel que soit le navigateur, ce n'est plus le cas pour une résolution inférieure.
• Ceci dit, Netscape n'affiche pas les tableaux, les divisions, les animations gif comme MSIE.
  NN4 n'apprécie pas la balise TEXTAREA hors d'un formulaire et l'absence de balises de fermeture.
  De plus, inclure un DIV dans un TD ou une liste dans un P (un conteneur dans un conteneur) est risqué.
• Opera 6 n'aime pas certains espaces (" 7" est différent de "7"), les changements de polices de caractères et de style, la réduction de la taille du texte et la balise TEXTAREA, les positions relatives ou absolues, java (JRE 6.0)...
  Opera 7 fait un peu mieux mais pas pour tout avant la 7.11, les animations gif par exemple.
• Beonex 0.8, Mozilla 1.2 (et les navigateurs construits sur cette base) ainsi que Off By One ne peuvent envoyer de message sur ce site à cause d'un script perl qui reçoit de mauvaises informations (problème de "referrer").
• Konqueror ne reconnaît pas ′.
• Contrairement à Mozilla, MSIE accepte les erreurs de syntaxe dans le code HTML ou CSS (qualité ou défaut ?).

Le service de validation du W3C permet souvent de corriger de nombreuses erreurs dans le code d'une page.
Ceci dit, les problèmes sont le plus souvent dus à l'utilisation de javascript et CSS.

javascript

• Peu de points communs entre le javascript de Netscape 4 et 6 ou 7.
  Les routines en javascript ne donnent plus le même résultat d'une version à l'autre...
• De même, j'ai trouvé entre le JScript de MSIE 5 (plus ou moins compatible avec Netscape) et de MSIE 5.5 des différences comme undefined qui bloque MSIE 5 car indéfini !
  Le javascript de MSIE donne des résultats incohérents avec la balise DIV (document.body.clientHeight par exemple sans hasLayout).
• Opera ne peut pas être utilisé pour les fichiers générés par Hot Potatoes car l'interprétation par Opera de javascript diffère d'une version à l'autre et n'est pas toujours compatible avec les scripts destinés à MSIE ou à Netscape, et ce même si on change l'identificateur.
• Pour les animations, la compatibilité n'est jamais garantie.

PHP m'a permis de limiter au maximum l'utilisation de javascript.

CSS

• Les problèmes sont souvent dûs au contexte ou à des conflits lorsqu'une règle est redéfinie.
• Un DOCTYPE incomplet est souvent source d'incompatibilité.
• De gros problèmes avec p:first-letter et overflow pour tous les navigateurs.
• Certaines instructions CSS2 inactivent une partie des liens et bloquent l'affichage de lignes avec NN4 qui n'apprécie pas du tout bold, float, border-style, border-width, margin et padding en fonction du contexte.
  La couleur du texte n'est pas toujours celle du parent.
• Netscape 6 et 7 ignorent parfois margin-top ou margin, exigent clear après float (avec display:inline) et crashent parfois avec display:none/inline-block jusqu'à la version 7.2.
• Konqueror n'affiche pas les popups en CSS du menu, n'apprécie pas div:hover ou link rel="alternate stylesheet" ou first-letter (en particulier utilisé avec une classe utilisant "overflow:hidden" - à remplacer par overflow:auto), une bordure transparente et ne respecte pas l'instruction z-index. Des problèmes d'héritage m'ont amené à ajouter des balises. Il se comporte souvent comme IE5.5 pour les versions antérieures à la 3.2 ou comme Safari 1.2. Quelques instructions CSS2 ne sont pas encore appliquées.
• MSIE 5 et 5.5 n'ajoutent pas les bordures au texte du menu de gauche contrairement à Netscape, Mozilla ou Opera qui, comme précisé dans les spécifications CSS, incluent les bordures dans le bloc texte. Ce bug apparaît quand un même élément utilise à la fois width et padding/border - avec MSIE 6 sans DOCTYPE valide (Quirks mode) et MSIE 5.x.
  MSIE interprète CSS différemment dans une même version mais dans un contexte différent (cette page importe une feuille de style qui remplace p:first-letter, ce qui génère une erreur dans le paragraphe encadré ci-dessous si vous utilisez MSIE 6).
  Avec MSIE 6 p:first-letter et text-decoration ne font pas bon ménage.
  div:first-letter donne des resultats étonnants.
  Autres bugs avec le contenu généré (3px), float ("Peekaboo Bug" - texte qui disparaît / apparaît - style brun, page sur les captures - réglé grâce à l'ajout de display:inline-block avec des commentaires conditionnels pour une validation W3C -ou une hauteur ou une largeur- dans le style du div qui l'enveloppe), background-color pour un a:hover ou encore, pour les versions 5 et 5.5, margin-top.
  Dans les listes affectées par le "Whitespace Bug" - espace ajouté entre les lignes quand on utilise li{display:block;} - il faut, par exemple, supprimer tout espace dans le code entre </li> et l'élément suivant (</li><li> et </li></ul>).
  Les commentaires dans les définitions ne sont pas appréciés par MSIE 5 et MSIE 5.5 (mais bien utiles comme "hacks").
  MSIE a souvent besoin qu'hasLayout soit activé pour afficher correctement.
  MSIE n'interprète pas min-width, max-width...
  MSIE ignore min-height sinon dans un tableau ainsi que, depuis la version 6, position:fixed qui plaçait n'importe où.
  Avec MSIE 5 et 5.5, toute classe du modèle box utilisée avec la balise P doit être redéfinie.
  La liste est longue...
  MSIE 7 corrige beaucoup des erreurs citées plus haut en mode "Standards Compliance" mais hasLayout est encore plus souvent nécessaire. L'utilisation de height, position:relative ou absolute et l'utilisation de "hacks" ou filtres avec les versions antérieures détruit souvent la mise en page. Beaucoup de problèmes d'affichage sont encore présents.
  MSIE 8 corrige presque toutes les erreurs des versions précédentes et n'a plus besoin de hasLayout. On ne peut pas compter son mode compatibilité avec MSIE 7 pour effectuer des tests car il ne fonctionne pas bien.
• IE Mac n'aime pas les instructions destinées à MSIE Win car il ne souffre pas des mêmes maux.
• Quelques problèmes avec Opera : link rel="alternate stylesheet", les positions (margin-top avec les version 5 et 6), margin-left est interprété left, les calculs pour le menu de gauche, a:visited {font-weight:bold;} bouleverse tout l'affichage... height -destiné à MSIE- est interprété.
• display:none; utilisé avec une ancre désactive le lien avec Firefox.
• Les dernières versions beta de Firefox et Mozilla (depuis rv:1.8a3 jusqu'à 1.8b2) posent problème avec les liens du site pour le style par défaut.

Le service de validation du W3C permet souvent de corriger de nombreuses erreurs.
PHP m'a permis de détecter le navigateur et de corriger la plupart des problèmes même s'il vaut mieux procéder autrement.
La page sur CSS détaille la façon dont ils ont été réglés.
Egalement en ligne, une initiation à la façon de déboguer une page avec des problèmes.
Vous trouverez aussi quelques pages qui décrivent une façon de réaliser une feuille de style sans tableaux compatible avec de nombreux navigateurs.

Les navigateurs moins connus, souvent plus rapides, affichent le texte, parfois les images, une partie des menus et rarement les animations javascript.

Une liste des navigateurs avec des commentaires en anglais est disponible sur le site Dan's Web Tips.
Un tableau comparatif en anglais des navigateurs est disponible sur le site Wikipedia.
Un tableau comparant en anglais les possibilités des navigateurs est disponible sur le site nanobox.chipx86.com.

Tous ces problèmes m'ont amené, dans un premier temps, à mettre  cette version du site de côté car 5 à 10% des visiteurs du site (humains ou robots) utilisent encore ou annoncent des navigateurs trop anciens pour CSS2 (de génération 3 ou 4, en particulier Nescape 4).

Pour vos captures, faites donc des essais et comparez.