Manuel de compatibilité Gecko

  • Raccourci de la révision : Manuel_de_compatibilité_Gecko
  • Titre de la révision : Manuel de compatibilité Gecko
  • ID de la révision : 271415
  • Créé :
  • Créateur : Omnisilver
  • Version actuelle ? Non
  • Commentaire Quelques corrections d'orthographe / fautes de frappes

Contenu de la révision

{{wiki.template('Traduction_à_relire')}} L'objectif de ce manuel est de vous aider à mettre à jour vos sites Web pour qu'ils fonctionnent dans les navigateurs respectant les standards du Web et détectent correctement Gecko.

Si vous ne connaissez pas les standards du Web, l'article Utilisation des standards dans vos pages Web (à traduire de {{mediawiki.interwiki('en', 'Using_Web_Standards_in_Your_Web_Pages', 'en:Using Web Standards in Your Web Pages')}}) constitue une introduction utile. Consultez également le site OpenWeb.

Gecko est un composant navigateur Web embarquable, développé dans le cadre du projet open source Mozilla. Il est basé sur les standards du W3C plutôt que sur une approche propriétaire typique des solutions du passé. Le respect des standards du Web simplifie la compatibilité inter-navigateurs lors du développement et permet de mettre en œuvre des solutions d'accessibilité (en).

De Netscape 4.x à Gecko

Depuis 1997, de nombreux sites Internet ont été conçus pour fonctionner avec Microsoft Internet Explorer 4 ou Netscape Navigator 4. Ces navigateurs ont été développés avant que les recommandations du W3C pour HTML, CSS, et le DOM n'existent.

Ces navigateurs plus anciens non basés sur les standards du Web s'opposent à Gecko sur un certain nombre de points :

  • Ces navigateurs utilisent des codes HTML, CSS et JavaScript propriétaires (non standards).
  • Internet Explorer 4 et Netscape Navigator 4 offrent tous deux un support de la plupart des standards HTML 3.2 et du JavaScript de base.
  • Bien qu'ils supportent dans une certaine mesure le standard CSS 1, son implémentation n'est pas complète et comprend des fonctionnalités non standards supplémentaires.
  • Ni Internet Explorer 4 ni Netscape Navigator 4 ne supportent le DOM du W3C. Au lieu de cela, chacun supporte sa propre API propriétaire de manipulation du contenu, du style et de la position des éléments HTML dans une page Web.
  • En outre, Internet Explorer 4 et Netscape Navigator 4 utilisent des méthodes complètement différentes pour intégrer des logiciels tiers dans leur navigateurs.

Gecko est un moteur de rendu multiplateforme, compatible avec un grand nombre de versions de systèmes d'exploitation, dont Windows XP, Mac OS et Linux. De par sa nature multiplateforme, ses fonctionnalités sont en général identiques quelle que soit la plateforme, contrairement aux versions Mac et Windows d'Internet Explorer qui sont des programmes distincts pouvant donc se comporter de façons fort différentes.

Test de compatibilité rapide

Si votre site utilise les technologies propriétaires de Netscape 4.x et de Microsoft, consultez l'article Utilisation des standards dans vos pages Web (à traduire) pour prendre rapidement connaissance des principes de bases des standards. Ce test de compatibilité sera d'autant plus bénéfique pour les sites utilisant un code simple ou ayant commencé une mise à jour pour supporter les standards.

Préparation des navigateurs pour le test

Les nombreux navigateurs utilisant Gecko ne contiennent pas tous <tt>Firefox</tt> ou <tt>Netscape</tt> dans leur chaîne user-agent. Ainsi, il est important de vérifier que vous détectez correctement des navigateurs comme AOL pour Mac OS X.

Vous pouvez télécharger un certain nombre de navigateurs Mozilla. Ou, si vous utilisez la détection d'user-agent, vous pouvez installer une extension pour Firefox ou Mozilla qui vous permettra de « simuler » les chaînes user-agent de ces navigateurs Gecko. Voici comment faire :

  1. Lancez SeaMonkey, Firefox ou l'ancienne suite Mozilla. L'avantage d'utiliser ces navigateurs est qu'en détectant uniquement les chaînes <tt>Netscape</tt> ou <tt>Netscape6</tt>, vous tomberez sur les éventuels problèmes directement.
  2. Installez l'extension User Agent Switcher (en).
  3. Après le redémarrage de votre navigateur, ajoutez les chaînes User-Agent pour lesquelles vous désirez tester la détection (<tt>Outils | User Agent Switcher | Options | Options… | User Agents | Ajouter…</tt>). Une fois la boîte de dialogue complétée (cela devrait ressembler à la capture ci-dessous), cliquez sur « OK » et fermer la fenêtre « Options ».

    Image:GeckoCompatibilityHandbook-Configure-UASwitcher.PNG
  4. Vous pouvez maintenant commencer à utiliser la chaîne User-Agent que vous venez de créer en cliquant sur <tt>Outils | User Agent Switcher | Le nom que vous avez utilisé</tt>. Vous pouvez vérifier que la chaîne à changée en regardant dans <tt>Aide | À propos</tt>.

Vous pourrez trouver les chaînes User Agent des navigateurs Gecko sur cette page. Si possible, téléchargez également les différents navigateurs pour les tester individuellement.

Examen des résultats

Tous les scénarios suivants sont en rapport avec la détection du navigateur. Pour des solutions concernant les problèmes courant veuillez lire la suite de ce manuel.

Problème : Le site respecte les standards Web mais ne s'affiche pas correctement

Essayez d'utiliser la chaîne User Agent d'Internet Explorer 6. Si cela fonctionne, paramétrez la détection pour fournir le contenu IE 6 aux visiteurs dont les chaînes User Agent contiennent <tt>Gecko</tt>. IE 6.x est en fait plus proche des navigateurs Gecko que ne l'était Netscape 4.x, de fait d'un meilleur support des standards du W3C.

Problème : Le site certifié Netscape 6.x s'affiche incorrectement dans les autres navigateurs

Si votre site est déjà compatible avec Gecko, essayez de revenir à une chaîne User Agent de Netscape 6. Si cela semble bon, vous ne détectez probablement que <tt>Netscape</tt> ou <tt>Netscape6</tt>. Détecter <tt>Gecko</tt> est le meilleur moyen de corriger cela afin de prendre en compte les utilisateurs de Mozilla, SeaMonkey, CompuServe 7, etc. (Article connexe) (À traduire de {{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}})

Problème : Le site pose problème dans tous les navigateurs Gecko

Si le problème se produit toujours, consultez la section de dépannage de ce manuel. De plus, si vous utilisez des technologies propriétaires de Netscape 4.x et de Microsoft, consultez Utilisation des standards dans vos pages Web pour un tutoriel rapide sur les différences avec Gecko.

Problèmes liés à AOL ou à CompuServe

Même si votre site s'affiche correctement dans Netscape 7.x, il est important de le tester également dans AOL pour Mac OS X et CompuServe 7 pour vérifier la détection du navigateur (à traduire de {{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}}) et les problèmes réseau.

Test d'AOL derrière un pare-feu

Si vous devez vous connecter à AOL derrière un pare-feu, AOL a ouvert les ports TCP 5190 et 11523 pour que vous puissiez communiquer avec le logiciel client d'AOL. Ainsi vous pourrez tester votre site dans un client AOL derrière votre pare-feu, à condition que votre administrateur réseau ait ouvert ces ports.

Vous devez être connecté à Internet pour tester votre site dans AOL ; il n'est pas possible d'accéder à votre site depuis un machine locale via votre réseau local, sans une connexion Internet. Pour plus d'informations, voir Webmaster@AOL (en).

Référence de résolutions des problèmes

Comme déjà vu dans l'article Using Web Standards in Your Web Pages (en), coder pour obtenir une compatibilité inter-navigateur requiert que vous écriviez du code standard que les navigateurs Gecko, Netscape 4, et IE puissent rendre correctement.

Symptôme Problème possible Solution
Le site s'affiche correctement dans Netscape 6.x mais pas dans les autres navigateurs Gecko. La détection du navigateur par JavaScript détecte Netscape 6.x mais pas les autres navigateurs Gecko.
  • Mettez à jour le JavaScript de la détection du navigateur pour qu'il détecte « Gecko » (article connexe).
Le contenu s'affiche différemment dans les navigateurs Gecko et Internet Explorer. Utilisation de balisage propriétaire ou invalide (tel que généré par les applications Microsoft Office).
  • Utilisez les validateurs HTML et CSS du W3C Outils pour valider la page Web. Corrigez les erreurs et remplacez le code propriétaire où c'est possible.
  • Mettez à jour vos outils d'édition Web avec des versions respectueuses des standards du W3 et des navigateurs Gecko.
Le contenu s'affiche différemment dans les navigateurs Gecko et Internet Explorer. La console JavaScript de Netscape 6.x et Netscape 7.x affiche des erreurs concernant document.all, document.layers, document.<property> qui ne sont pas définis à cause d'un sniffing incorrect du navigateur, ou de l'utilisation de JavaScript propriétaire.
  • Mettez à jour votre sniffing pour détecter correctement les navigateurs Gecko.
  • Mettez à jour les API pour utiliser les plus récentes versions conformes aux standards.
  • Mettez à jour vos outils d'édition Web avec des version supportant les standards du W3 et les navigateurs Gecko.
Le contenu s'affiche différemment dans les navigateurs Gecko et Internet Explorer.
  • Votre CSS repose sur les bogues d'implémentation de CSS par Internet Explorer.
  • Internet Explorer ne traite pas correctement les noms d'ID et de CLASS en tenant compte de la casse, alors que les navigateurs Gecko respectent la casse. Inconsistent case between the CSS defining the style for HTML ID's and CLASSes results in Gecko browsers not applying the styles to ID's or CLASS names that differ in case.
  • Internet Explorer ne spécifie pas correctement les hauteurs et largeurs des éléments de type en-ligne tels que SPAN.
  • Internet Explorer n'implémente par correctement le modèle de boîte (padding, margin, border).
  • N'utilisez pas les implémentations CSS invalides de Internet Explorer. N'utilisez que les fonctionnalités standards et inter-navigateurs de CSS. Use consistent case when writing HTML ID and CLASS name attributes and CSS Styles for those IDs and CLASSes. Do not specify heights or widths on inline elements such as SPANs. Use only cross-browser box specifications for margin, padding et border (CSS).
Le contenu s'affiche différemment dans les navigateurs Gecko et Internet Explorer. Mauvais mode de rendu spécifié par le DOCTYPE.
  • Si les pages doivent être affichées dans de vieilles versions des navigateurs tels que Netscape Navigator 4 ou Internet Explorer 4 et 5, vérifiez bien à spécifier le mode de rendu « Quirks » à l'aide du DOCTYPE.
Les images sont rendues sans espace dans Internet Explorer mais s'affichent avec un espace entre elles dans les navigateurs Gecko. Mauvaise spécification du mode de rendu par le DOCTYPE.
  • Le mode de rendu standard doit être spécifié par le DOCTYPE. Changez le DOCTYPE pour appeler le mode de rendu « Quirks  » à la place. Plus d'informations
Cliquer sur un lien renvoie une erreur 404-page non trouvée, mais fonctionne avec Internet Explorer. Le lien doit utiliser une forme non valide d'URL relative.
  • Changez les URL relatives de <tt>http://directory/...</tt> en <tt>directory/...</tt> ou utilisez des chemins absolus pour les URL, telles que <tt>http://example.com/directory/...</tt>
  • Vérifiez que tous les hyperliens utilisent des barres obliques (/).
Cliquer sur un lien déclenche un « téléchargement » ou affiche le code HTML plutôt que de rendre correctement la page Web, mais fonctionne comme prévu dans Internet Explorer The Web Server has incorrectly specified the MIME type for the content. Internet Explorer tries to guess the MIME type of documents while Gecko browsers relies upon the Web Server to specify the correct MIME type. Gecko does not try to 'sniff' the MIME type for a document in order to reduce the possibility of unsecure, dangerous content masquerading as as a safe MIME type.
  • Use Perl's HEAD utility to determine the actual MIME type being used by the Web Server. Correct any incorrect Server MIME types. (related article)
La feuille de style n'est pas reconnue. La présence de l'attribut title dans un élément link qui se réfère à une feuille de style externe peut entraîner the stylesheet may be causing the external stylesheet to be ignored.
  • Make sure that any stylesheet which should always be applied is persistent instead of preferred. (Article connexe)
Échec de la connexion à un site sécurisé avec un navigateurs Gecko, mais pas avec Internet Explorer. Le serveur n'implémente pas correctement la négociation retour pour SSL.
  • L'administrateur du serveur Web doit mettre à jour le logiciel SSL. Pour naviguer sur un site utilisant une implémentation défectueuse de SSL, les visiteurs doivent désactiver TLS dans Netscape 6/7 ou Mozilla jusqu'à ce que le site mettre à jour les logiciels vers des versions supportant correctement ce protocole.
Les menus DHTML implémentés à l'aide de la fonction HierMenu ont des problèmes. La version de HierMenu est obsolète. Les premières versions de HierMenu ne supportent que Netscape Navigator 4.x et Internet Explorer 4.x. Les versions les plus récentes supportent Netscape 6 ; cependant, dans Netscape 6.1 et au-dessus, le support des propriétés propriétaires offsetXXX d'Internet Explorer fait que HierMenu place des popups aux mauvaises positions. Les plus récentes versions de HierMenu supportent pleinement tous les navigateurs Gecko.
  • Mettez à jour avec la version la plus récente de HierMenu (en).

Problèmes courants liés au code et au serveur

Cette section détaille les solutions les plus courantes aux problèmes affectant les navigateurs respectant les standards ainsi que les questions spécifiques à Gecko.

HTML propriétaire

Problème : Utilisation du balisage HTML propriétaire spécifique à un navigateur (tel que <tt><LAYER></tt>).

Comme un navigateur est supposé ignorer les balises HTML qu'il ne connaît pas et rendre le contenu entre ces balises, les auteurs de pages Web ont combiné les codes HTML propriétaires afin que leurs pages s'affiche correctement dans chaque navigateur.

Les navigateurs Gecko ignoreront les balises HTML propriétaires d'Internet Explorer et Netscape Navigator 4. Ainsi, une page Web ne s'affichera pas dans les navigateurs Gecko de la même façon qu'elle le ferait dans Internet Explorer 4 ou dans Netscape Navigator 4.

L'exemple principal est l'utilisation de la balise HTML propriétaire <tt><LAYER></tt> de Netscape Navigator 4, couramment utilisée pour la navigation dans un site. Pour les alternatives respectant les standards, voir Updating DHTML Web Pages for Next Generation Browsers.

On peut rapidement vérifier l'utilisation de balisage HTML propriétaire dans une page en la soumettant au validateur HTML du W3C en utilisant le DOCTYPE HTML 4.01. Nous aborderons les DOCTYPE plus en détails dans la suite de cet article, mais en substance, le DOCTYPE doit indiquer au navigateur, la version de HTML utilisée dans la page.

La HTML Element Cross Reference fournit une liste des tous les éléments HTML supportés dans Netscape 4, les navigateurs Gecko, Internet Explorer 4 et supérieur, et peut être utilisée pour déterminer les éléments supportés par tous les navigateurs.

Détection du navigateur

Problème : Mauvaise détection du navigateur ou Sniffing (reniflage)

Alors que la détection du navigateur est utile pour permettre aux auteurs d'écrire des pages Web qui ne fonctionneront que dans certains navigateurs spécifiques, une détection erronée peut conduire à une très mauvaise expérience utilisateur.

De nombreux problèmes peuvent survenir lorsqu'une page Web utilise la détection du navigateur pour déterminer quelles fonctionnalités propriétaires utiliser dans un navigateur particulier.

Veuillez consulter l'article Détection du navigateur et support inter-navigateur pour une meilleur approche de la détection des navigateurs. (À traduire de {{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}}

Solutions spécifique à un navigateur

Problème : Le code contient des solutions de rechange pour les bogues et browser-specific quirks.

Comme une page Web est jugée sur son affichage dans les navigateurs et non sur son code HTML, les auteurs on développé de nombreuses techniques qui tirent avantage des caractéristiques particulières des navigateurs pour obtenir les effets souhaités. Ceci est particulièrement important car les toutes premières implémentations de CSS dans Internet Explorer 4 et dans Netscape Navigator 4 comportent de nombreux bogues. Afin d'obtenir les effets désirés, les auteurs ont écrit leur code HTML et des scripts JavaScript qui dépendaient de ces bogues pour fonctionner correctement.

Ceci peut provoquer des problèmes avec les navigateurs Gecko, qui implémente strictement les standards. La vieille approche « code to the bugs » ne fonctionne plus dans Mozilla, Netscape 6.x, Netscape 7.x et tous les autres navigateurs Gecko.

Exemple - Inclure des formulaires dans un tableau

HTML non valide pour éliminer les retours à la ligne dans <tt><FORM></tt>.

Dans les anciens navigateurs, cela résulte en une cellule TD enveloppant un élément input.

<table border="1">
  <tr>
    <form name="form2">
      <td>
        <input type="text">
      </td>
    </form>
  </tr>
<table>

Cette approche est communément utilisée pour contourner le fait que <tt><FORM></tt> est un élément bloc en HTML et qu'il commencera tout naturellement sur une nouvelle ligne dans la page. Malheureusement, ce code n'est pas valide et peut provoquer des erreurs lors de l'affichage et de l'application de règles de styles CSS.

Utilisation incorrecte de la notation de balise XML vide

De nombreux auteurs utilisent la notation de balise XML vide (<tt><tag /></tt>) dans leurs fichiers HTML. En XML, une balise vide n'a jamais de contenu. Les règles de compatibilité ascendante du XHTML stipulent que les éléments vides peuvent être utilisés en faisant suivre le nom de la balise par une espace puis un signe / comme dans <tt><tag /></tt>. Pour être compatible, vous devez avoir une espace avant <tt>/></tt>. De plus, vous ne devez utiliser cette notation XML que pour les éléments HTML qui sont toujours vides - et non pour les éléments HTML possédant une balise de fermeture optionnelle.

Par exemple, il est correct d'utiliser <tt><br /></tt> pour coder <tt><br></tt>, bien qu'il n'y ait aucun avantage à le faire dans des documents HTML. Mais, il est incorrect d'utiliser <tt><option /></tt> pour coder <tt><option></tt>. Pour comprendre pourquoi, considérons ce qui suit :

HTML sans balise de fermeture optionnelleÉquivalent HTML avec les balises de fermetures optionnelles
<select>
<option>OptionValue
</select>
<select>
<option>OptionValue</option>
</select>

Maintenant, regardons ce qui se passe lorsqu'on utilise la notation de balise XML vide : <tt><option /></tt>.

HTML avec notation de balise XML vide Équivalent HTML avec balise de fermeture
<select>
<option />OptionValue
</select>
<select>
<option></option>OptionValue
</select>

c'est tout simplement faux. Si vous devez utiliser la notation de balise XML vide, vous ne devez le faire que pour des éléments HTML ne possédant jamais de contenu - pas pour les éléments HTML dont la balise de fermeture est optionnelle.

Les ID CSS devraient être sensibles à la casse

Gecko implémente correctement la sensibilité à la casse des identificateurs CSS ID et affichera correctement cet exemple. Cependant Internet Explorer ne prend pas en compte la casse des identificateurs CSS ID et affichera incorrectement cet exemple.

<style type="text/css">
  #id1 { text-decoration: line-through; }
  #ID1 { text-decoration: underline; }
</style>
<div id="id1">
  Devrait être barré (line-through)
</div>
<div id="ID1">
  Devrait être souligné (underline)
</div>

-(EXEMPLE SUPPRIMÉ)-

Note : Le validateur HTML du W3C marquera les attributs des ID HTML comme dupliqués si seule la casse diffère. Il semble y avoir un manque de cohérence en la recommandation HTML 4.01 et la déclaration SGML pour le HTML dans laquelle les attributs des identificateurs ID sont sensibles à la casse. C'est d'autant plus malheureux que le validateur HTML est, pour les développeurs Web, un des principaux moyens d'apprentissage des standards.

En raison de la fréquence de cette erreur, Netscape 6.2 a également traité les attributs des ID CSS comme étant insensibles à la casse en mode de compatibilité. Si vous invoquez le mode de respect des standards, vous devriez écrire vos CSS en étant compatible avec cette sensibilité à la casse.

Les classes CSS devraient être sensibles à la casse

Gecko implémente correctement la sensibilité à la casse des classes CSS CLASS et affichera correctement cet exemple. Cependant Internet Explorer ne prend pas en compte la casse des classes CSS CLASS et affichera incorrectement cet exemple.

<style type="text/css">
  .class1 { font-size: 1em; }
  .CLASS1 { font-size: 2em; }
</style>
<div>
<div class="class1">
  devrait avoir la taille font-size: 1em;
</div>
<div class="CLASS1">
  devrait avoir la taille font-size: 2em;
</div>

-(EXEMPLE SUPPRIMÉ)-

En raison de la fréquence de cette erreur, Netscape 6.2 a également traité les attributs des CLASS CSS comme étant insensibles à la casse en mode de compatibilité. Si vous invoquez le mode de respect des standards, vous devriez écrire vos CSS en étant compatible avec cette sensibilité à la casse.

URL relatives incorrectes

Une URL relative se réfère au même serveur Web qui héberge la page. Une URL relative qui se réfère à un chemin relatif par rapport au répertoire où est stockée la page Web ressemble à <tt>path/file.html</tt>. Les URL relatives qui se réfèrent à un chemin relatif par rapport au répertoire racine du serveur ressemble à <tt>/path/file.html</tt>.

Les anciens navigateurs supportent l'utilisation non valide de <tt>http://path/</tt> pour les URL relatives au répertoire racine du serveur Web, ce qui n'est pas le cas des navigateurs Gecko. Pour spécifier correctement le lien d'un page Web relative au répertoire racine du serveur, utilisez la forme <tt>/path/file.html</tt>.

Utilisation non valide des espaces dans les noms d'attributs

De nombreux auteurs semblent avoir un penchant pour l'utilisation d'espaces dans les noms. Un attribut name ou id en HTML 4.01 ne doit pas contenir d'espace. Ceci peut poser des problèmes avec les navigateurs Gecko, spécialement dans les maps d'images. Vous devriez vérifier que les noms de vos attributs ne comportent que des caractères valides.

Mauvais code du aux vieilles API et aux outils obsolètes

Problème : Les API sont obsolètes ou les outils d'éditions génèrent un code HTML non standard.

De nombreuses versions passées des API les plus communément utilisées sur le Web, telle que DYNAPI (en), ne supportent pas Gecko pour l'une ou l'autre raison citée ci-dessus. C'est également le cas d'anciennes version des outils d'édition Web tel que Macromedia Dreamweaver 2 et 3.

Les plus récentes version de ces API et de ces outils supportent Gecko. Par exemple, DYNAPI (en) est maintenant développé sur SourceForge et offre une version compatible avec Gecko. Les récentes versions des Outils d'édition respectueux des standards supportent Gecko.

Mauvais DOCTYPE

Problème : une DOCTYPE incorrect peut complètement altérer la présentation de la page.

Gecko, Internet Explorer pour Mac OS et Internet Explorer 6 utilisent tous une technique de reniflage du DOCTYPE pour déterminer si une page doit être servi en utilisant un mode de compatibilité avec les vieux navigateurs ou , ua contraire, si elle doit être servi en conformité avec les standards W3C.

L'utilisation du DOCTYPE approprié dans un document HTML permet aux auteurs de pages Web de supporter aussi bien les vieux navigateurs, moins conformes, que les plus récents en spécifiant le mode de compatibilité spécial à l'aide du DOCTYPE. Au fil du temps, et avec la disparition progressive des navigateurs obsolètes, les auteurs de pages Web peuvent effectuer la transition vers des pages Web respectant les standards en utilisant le DOCTYPE approprié. (Article connexe)

Alors que le reniflage du DOCTYPE est un moyen utile de continuer à supporter les vieux navigateurs, il peut cependant poser problème pour les navigateurs nouvelles générations tels que Netscape 6.x et Netscape 7.x si le mode d'affichage spécifié est inapproprié.

Gecko possède également deux modes de rendus : mode de compatibilité et mode de respect strict des standards. Le mode de compatibilité imite le comporte de Netscape Navigator 4 alors que le mode de respect strict de standards suit les recommandations HTML et CSS du W3C. En particulier, le mode de respect strict des standards utilise le modèle de boîte CSS tel que défini dans le Chapitre 10 de la recommandation CSS 2. Le mode de rendu est déterminé à l'aide de la déclaration du DOCTYPE (ou de son absence) au début du document HTML.

Commentaires non valides

Gecko possède également trois modes d'analyse : mode de compatibilité, mode presque standard et respect des standards. Le mode de compatibilité permet l'utilisation de commentaires non valides contenant plus de deux tirets -- ce qui n'est pas le cas des deux autres modes.

<!---- Ceci est un commentaire HTML non valide accepté par l'analyse en mode de compatibilité des commentaires ---->
<!-- Ceci est un commentaire HTML valide accepté par l'analyse stricte des commentaires -->

Pour connaître les règles d'appel du mode de compatibilité ou les modes de respect des standards par le DOCTYPE, consultez l'article Le sniffing de DOCTYPE dans Mozilla.

Codage de plugins

Vous pourrez remarquer que certain plugins ne se comportent pas de la même façon dans Gecko et dans Netscape Navigator 4. Visitez la page Plugins pour plus d'informations à propos des langages de script dans les navigateurs Gecko, la bonne utilisation des balises, les changements dans l'architecture des plugins par rapport à la génération Netscape 4, et les suggestions sur l'utilisation des plugins.

Problèmes de configuration du serveur Web

Types MIME spécifiés incorrects

Beaucoup de serveurs Web déclarent incorrectement les types MIME des fichiers. Les navigateurs Gecko requièrent qu'ils soient correctement définis pour correspondre aux différents types de contenus :

  • HTML - text/html
  • CSS - text/css (Article connexe)
  • XML - text/xml
  • SVG - image/svg+xml

Mauvaise implémentations de HTTP

Plusieurs serveurs Web implémentent de façon incorrecte le protocole HTTP ce qui peut provoquer quelques problèmes pour Netscape 6.

Mauvaise implémentations de SSL

Les vieux navigateurs tels que Internet Explorer 4 et Netscape Navigator 4 implémentent de vielles versions du protocole SSL. De nos jours, la version la plus couramment déployée est SSL 3.0, cependant, la dernière version de TLS (SSL 3.1), intégrée aux navigateurs Gecko, n'est supportée que par très peu de serveurs Web. Malheureusement, plusieurs implémentations de SSL 3.0 implémentent de manière incorrecte la négociation du protocole SSL à utiliser et échouent lors de la connexion avec les navigateurs Gecko.

Pour plus d'informations à propos de ces problèmes, veuillez lire Notes on TLS - SSL 3.0 Intolerant Servers.

Ressources utiles

  • Les développeurs Web débutants ou intermédiaires peuvent consulter le DevEdge Web Tune Up Wizard pour mettre en évidence les contenus critiques ayant besoin d'être mis à jour pour supporter Gecko ainsi que tous les navigateurs supportant les standards du W3C.
  • AOL Webmaster.info Site - Developing for Netscape Gecko couvre les problèmes les plus couramment rencontrés par les webmestres, et les étapes de mise en conformité de votre code.
  • La boîte à outils recense plusieurs outils inestimables du W3C pour le diagnostique des pages Web tels que la validation de code, les exemples et bien plus.
  • Report Mozilla browser bugs or web site compatibility problems
  • {{mediawiki.interwiki('en', 'Mozilla_Web_Developer_Community', 'en:Mozilla Web Developer Community')}}

Références

Informations sur le document original

  • Dernière mise à jour : 16 août 2002
  • Copyright : © 2001-2003 Netscape. All rights reserved.

Interwiki Languages Links

{{ wiki.languages( { "en": "en/Gecko_Compatibility_Handbook" } ) }}

Source de la révision

<p>
{{wiki.template('Traduction_à_relire')}}
L'objectif de ce manuel est de vous aider à mettre à jour vos sites Web pour qu'ils fonctionnent dans les navigateurs respectant les standards du Web et détectent correctement <a href="fr/Gecko">Gecko</a>.
</p><p>Si vous ne connaissez pas les standards du Web, l'article <a href="fr/Utilisation_des_standards_dans_vos_pages_Web">Utilisation des standards dans vos pages Web</a> <small>(à traduire de {{mediawiki.interwiki('en', 'Using_Web_Standards_in_Your_Web_Pages', 'en:Using Web Standards in Your Web Pages')}})</small> constitue une introduction utile. Consultez également le site <a class="external" href="http://openweb.eu.org/">OpenWeb</a>.
</p><p>Gecko est un composant navigateur Web embarquable, développé dans le cadre du projet open source <a class="external" href="http://www.mozilla.org/">Mozilla</a>. Il est basé sur les <a class="external" href="http://www.w3.org/">standards du W3C</a> plutôt que sur une approche propriétaire typique des solutions du passé. Le respect des standards du Web simplifie la compatibilité inter-navigateurs lors du développement et permet de mettre en œuvre des <a class="external" href="http://www.mozilla.org/access/">solutions d'accessibilité (en)</a>.
</p>
<h3 name="De_Netscape_4.x_.C3.A0_Gecko"> De Netscape 4.x à Gecko </h3>
<p>Depuis 1997, de nombreux sites Internet ont été conçus pour fonctionner avec Microsoft Internet Explorer 4 ou Netscape Navigator 4. Ces navigateurs ont été développés avant que les recommandations du <a class="external" href="http://www.w3.org/">W3C</a> pour <a href="fr/HTML">HTML</a>, <a href="fr/CSS">CSS</a>, et le <a href="fr/DOM">DOM</a> n'existent.
</p><p>Ces navigateurs plus anciens non basés sur les standards du Web s'opposent à Gecko sur un certain nombre de points :
</p>
<ul><li> Ces navigateurs utilisent des codes <a href="fr/HTML">HTML</a>, <a href="fr/CSS">CSS</a> et <a href="fr/JavaScript">JavaScript</a> propriétaires (non standards).
</li><li> Internet Explorer 4 et Netscape Navigator 4 offrent tous deux un support de la plupart des standards HTML 3.2 et du JavaScript de base.
</li><li> Bien qu'ils supportent dans une certaine mesure le standard CSS 1, son implémentation n'est pas complète et comprend des fonctionnalités non standards supplémentaires.
</li><li> Ni Internet Explorer 4 ni Netscape Navigator 4 ne supportent le <a href="fr/DOM">DOM</a> du W3C. Au lieu de cela, chacun supporte sa propre API propriétaire de manipulation du contenu, du style et de la position des éléments HTML dans une page Web.
</li><li> En outre, Internet Explorer 4 et Netscape Navigator 4 utilisent des méthodes complètement différentes pour intégrer des logiciels tiers dans leur navigateurs.
</li></ul>
<p>Gecko est un moteur de rendu multiplateforme, compatible avec un grand nombre de versions de systèmes d'exploitation, dont Windows XP, Mac OS et Linux. De par sa nature multiplateforme, ses fonctionnalités sont en général identiques quelle que soit la plateforme, contrairement aux versions Mac et Windows d'Internet Explorer qui sont des programmes distincts pouvant donc se comporter de façons fort différentes.
</p>
<h3 name="Test_de_compatibilit.C3.A9_rapide"> Test de compatibilité rapide </h3>
<p>Si votre site utilise les technologies propriétaires de Netscape 4.x et de Microsoft, consultez l'article <a href="fr/Utilisation_des_standards_dans_vos_pages_Web">Utilisation des standards dans vos pages Web</a> <small>(à traduire)</small> pour prendre rapidement connaissance des principes de bases des standards. Ce test de compatibilité sera d'autant plus bénéfique pour les sites utilisant un code simple ou ayant commencé une mise à jour pour supporter les standards.
</p>
<h4 name="Pr.C3.A9paration_des_navigateurs_pour_le_test"> Préparation des navigateurs pour le test </h4>
<p>Les nombreux navigateurs utilisant Gecko ne contiennent pas tous <tt>Firefox</tt> ou <tt>Netscape</tt> dans leur chaîne user-agent. Ainsi, il est important de vérifier que vous détectez correctement des navigateurs comme AOL pour Mac OS X.
</p><p>Vous pouvez <a class="external" href="http://www.mozilla.org/download.html">télécharger</a> un certain nombre de navigateurs Mozilla. Ou, si vous utilisez la détection d'user-agent, vous pouvez installer une extension pour Firefox ou Mozilla qui vous permettra de « simuler » les chaînes user-agent de ces navigateurs Gecko. Voici comment faire :
</p>
<ol><li> Lancez <a class="external" href="http://www.mozilla.org/projects/seamonkey/">SeaMonkey</a>, <a class="external" href="http://www.getfirefox.com/">Firefox</a> ou l'ancienne suite <a class="external" href="http://www.mozilla.org/products/mozilla1.x/">Mozilla</a>. L'avantage d'utiliser ces navigateurs est qu'en détectant uniquement les chaînes <tt>Netscape</tt> ou <tt>Netscape6</tt>, vous tomberez sur les éventuels problèmes directement.
</li><li> Installez l'extension <a class="external" href="https://addons.mozilla.org/firefox/59/">User Agent Switcher (en)</a>.
</li><li> Après le redémarrage de votre navigateur, ajoutez les <a href="fr/Les_cha%c3%aenes_UserAgent_de_Gecko">chaînes User-Agent</a> pour lesquelles vous désirez tester la détection (<tt>Outils | User Agent Switcher | Options | Options… | User Agents | Ajouter…</tt>). Une fois la boîte de dialogue complétée (cela devrait ressembler à la capture ci-dessous), cliquez sur « OK » et fermer la fenêtre « Options ».<br><br><img alt="Image:GeckoCompatibilityHandbook-Configure-UASwitcher.PNG" src="File:fr/Media_Gallery/GeckoCompatibilityHandbook-Configure-UASwitcher.PNG">
</li><li> Vous pouvez maintenant commencer à utiliser la chaîne User-Agent que vous venez de créer en cliquant sur <tt>Outils | User Agent Switcher | <i>Le nom que vous avez utilisé</i></tt>. Vous pouvez vérifier que la chaîne à changée en regardant dans <tt>Aide | À propos</tt>.
</li></ol>
<p>Vous pourrez trouver <a href="fr/Les_cha%c3%aenes_UserAgent_de_Gecko">les chaînes User Agent</a> des navigateurs Gecko <a href="fr/Les_cha%c3%aenes_UserAgent_de_Gecko">sur cette page</a>. Si possible, téléchargez également les différents navigateurs pour les tester individuellement.
</p>
<h4 name="Examen_des_r.C3.A9sultats"> Examen des résultats </h4>
<p>Tous les scénarios suivants sont en rapport avec la détection du navigateur. Pour des solutions concernant les problèmes courant veuillez lire la suite de ce manuel.
</p>
<h5 name="Probl.C3.A8me_:_Le_site_respecte_les_standards_Web_mais_ne_s.27affiche_pas_correctement"> Problème : Le site respecte les standards Web mais ne s'affiche pas correctement </h5>
<p>Essayez d'utiliser la chaîne User Agent d'Internet Explorer 6. Si cela fonctionne, paramétrez la détection pour fournir le contenu IE 6 aux visiteurs dont les chaînes User Agent contiennent <tt>Gecko</tt>. IE 6.x est en fait plus proche des navigateurs Gecko que ne l'était Netscape 4.x, de fait d'un meilleur support des standards du W3C.
</p>
<h5 name="Probl.C3.A8me_:_Le_site_certifi.C3.A9_Netscape_6.x_s.27affiche_incorrectement_dans_les_autres_navigateurs"> Problème : Le site certifié Netscape 6.x s'affiche incorrectement dans les autres navigateurs </h5>
<p>Si votre site est déjà compatible avec Gecko, essayez de revenir à une chaîne User Agent de Netscape 6. Si cela semble bon, vous ne détectez probablement que <tt>Netscape</tt> ou <tt>Netscape6</tt>. Détecter <tt>Gecko</tt> est le meilleur moyen de corriger cela afin de prendre en compte les utilisateurs de Mozilla, SeaMonkey, CompuServe 7, etc. (<a href="fr/D%c3%a9tection_du_navigateur_et_support_inter-navigateur">Article connexe</a>) <small>(À traduire de {{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}})</small>
</p>
<h5 name="Probl.C3.A8me_:_Le_site_pose_probl.C3.A8me_dans_tous_les_navigateurs_Gecko"> Problème : Le site pose problème dans tous les navigateurs Gecko </h5>
<p>Si le problème se produit toujours, consultez la section de <a href="fr/Manuel_de_compatibilit%c3%a9_Gecko#R.C3.A9f.C3.A9rence_de_d.C3.A9pannage_rapide">dépannage</a> de ce manuel. De plus, si vous utilisez des technologies propriétaires de Netscape 4.x et de Microsoft, consultez <a href="fr/Utilisation_des_standards_dans_vos_pages_Web">Utilisation des standards dans vos pages Web</a> pour un tutoriel rapide sur les différences avec Gecko.
</p>
<h3 name="Probl.C3.A8mes_li.C3.A9s_.C3.A0_AOL_ou_.C3.A0_CompuServe"> Problèmes liés à AOL ou à CompuServe </h3>
<p>Même si votre site s'affiche correctement dans Netscape 7.x, il est important de le tester également dans <a class="external" href="http://www.aol.com/">AOL pour Mac OS X</a> et <a class="external" href="http://www.compuserve.com/">CompuServe 7</a> pour vérifier <a href="fr/D%c3%a9tection_du_navigateur_et_support_inter-navigateur">la détection du navigateur</a> <small>(à traduire de {{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}})</small> et les problèmes réseau. 
</p>
<h4 name="Test_d.27AOL_derri.C3.A8re_un_pare-feu"> Test d'AOL derrière un pare-feu </h4>
<p>Si vous devez vous connecter à AOL derrière un pare-feu, AOL a ouvert les ports TCP 5190 et 11523 pour que vous puissiez communiquer avec le logiciel client d'AOL. Ainsi vous pourrez tester votre site dans un client AOL derrière votre pare-feu, à condition que votre administrateur réseau ait ouvert ces ports.
</p><p>Vous devez être connecté à Internet pour tester votre site dans AOL ; il n'est pas possible d'accéder à votre site depuis un machine locale via votre réseau local, sans une connexion Internet. Pour plus d'informations, voir <a class="external" href="http://webmaster.aol.com/">Webmaster@AOL (en)</a>.
</p>
<h3 name="R.C3.A9f.C3.A9rence_de_r.C3.A9solutions_des_probl.C3.A8mes"> Référence de résolutions des problèmes </h3>
<p>Comme déjà vu dans l'article <a class="external" href="http://www.mozilla.org/docs/web-developer/upgrade_2.html">Using Web Standards in Your Web Pages (en)</a>, coder pour obtenir une compatibilité inter-navigateur requiert que vous écriviez du code standard que les navigateurs Gecko, Netscape 4, et IE puissent rendre correctement.
</p>
<table class="standard-table" width="100%">

<tbody><tr>
<th> Symptôme </th><th> Problème possible </th><th> Solution
</th></tr>
<tr>
<td width="25%">Le site s'affiche correctement dans Netscape 6.x mais pas dans les autres navigateurs Gecko.
</td><td width="37.5%">La détection du navigateur par JavaScript détecte Netscape 6.x mais pas les autres navigateurs Gecko.
</td><td width="37.5%">
<ul><li> Mettez à jour le JavaScript de la détection du navigateur pour qu'il détecte « Gecko » (<a href="fr/Browser_Detection_and_Cross_Browser_Support">article connexe</a>).
</li></ul>
</td></tr>
<tr>
<td>Le contenu s'affiche différemment dans les navigateurs Gecko et Internet Explorer.
</td><td>Utilisation de balisage propriétaire ou invalide (tel que généré par les applications Microsoft Office).</td><td>
<ul><li>Utilisez les validateurs HTML et CSS du W3C <a href="fr/Outils">Outils</a> pour valider la page Web. Corrigez les erreurs et remplacez le code propriétaire où c'est possible.
</li><li>Mettez à jour vos outils d'édition Web avec des versions respectueuses des standards du W3 et des navigateurs Gecko.
</li></ul>
</td></tr>
<tr>
<td>Le contenu s'affiche différemment dans les navigateurs Gecko et Internet Explorer.
</td><td>La console JavaScript de Netscape 6.x et Netscape 7.x affiche des erreurs concernant <code>document.all</code>, <code>document.layers</code>, <code>document.&lt;property&gt;</code> qui ne sont pas définis à cause d'un sniffing incorrect du navigateur, ou de l'utilisation de JavaScript propriétaire.</td><td>
<ul><li>Mettez à jour votre <a href="fr/Browser_Detection_and_Cross_Browser_Support">sniffing</a> pour détecter correctement les navigateurs Gecko.
</li><li>Mettez à jour les API pour utiliser les plus récentes versions conformes aux standards.
</li><li>Mettez à jour vos outils d'édition Web avec des version supportant les standards du W3 et les navigateurs Gecko.
</li></ul>
</td></tr>
<tr>
<td>Le contenu s'affiche différemment dans les navigateurs Gecko et Internet Explorer.
</td><td>
<ul><li>Votre CSS repose sur les bogues d'implémentation de CSS par Internet Explorer.
</li><li>Internet Explorer ne traite pas correctement les noms d'ID et de CLASS en tenant compte de la casse, alors que les navigateurs Gecko respectent la casse. <b>Inconsistent case between the CSS defining the style for HTML ID's and CLASSes results in Gecko browsers not applying the styles to ID's or CLASS names that differ in case.</b>
</li><li>Internet Explorer ne spécifie pas correctement les hauteurs et largeurs des éléments de type en-ligne tels que <code>SPAN</code>.
</li><li>Internet Explorer n'implémente par correctement le modèle de boîte (<code>padding</code>, <code>margin</code>, <code>border</code>).
</li></ul>
</td><td>
<ul><li>N'utilisez pas les implémentations CSS invalides de Internet Explorer. N'utilisez que les fonctionnalités standards et inter-navigateurs de CSS. <b>Use consistent case when writing HTML ID and CLASS name attributes and CSS Styles for those IDs and CLASSes. Do not specify heights or widths on inline elements such as SPANs. Use only cross-browser box specifications for margin, padding et border (<a href="fr/CSS">CSS</a>).</b>
</li></ul>
</td></tr>
<tr>
<td>Le contenu s'affiche différemment dans les navigateurs Gecko et Internet Explorer.
</td><td>Mauvais mode de rendu spécifié par le DOCTYPE.</td><td>
<ul><li>Si les pages doivent être affichées dans de vieilles versions des navigateurs tels que Netscape Navigator 4 ou Internet Explorer 4 et 5, vérifiez bien à spécifier le mode de rendu « Quirks » à l'aide du <a href="fr/Le_sniffing_de_DOCTYPE_dans_Mozilla">DOCTYPE</a>.
</li></ul>
</td></tr>
<tr>
<td>Les images sont rendues sans espace dans Internet Explorer mais s'affichent avec un espace entre elles dans les navigateurs Gecko.
</td><td>Mauvaise spécification du mode de rendu par le DOCTYPE.</td><td>
<ul><li>Le mode de rendu standard doit être spécifié par le DOCTYPE. Changez le DOCTYPE pour appeler le mode de rendu « Quirks  » à la place. <a href="fr/Images%2c_tableaux_et_d%c3%a9calages_myst%c3%a9rieux">Plus d'informations</a>
</li></ul>
</td></tr>
<tr>
<td>Cliquer sur un lien renvoie une erreur 404-page non trouvée, mais fonctionne avec Internet Explorer.
</td><td>Le lien doit utiliser une forme non valide d'URL relative.</td><td>
<ul><li>Changez les URL relatives de <tt>http://directory/...</tt> en <tt>directory/...</tt> ou utilisez des chemins absolus pour les URL, telles que <tt>http://example.com/directory/...</tt>
</li><li>Vérifiez que tous les hyperliens utilisent des barres obliques (/).
</li></ul>
</td></tr>
<tr>
<td>Cliquer sur un lien déclenche un « téléchargement » ou affiche le code HTML plutôt que de rendre correctement la page Web, mais fonctionne comme prévu dans Internet Explorer
</td><td><b>The Web Server has incorrectly specified the MIME type for the content. Internet Explorer tries to guess the MIME type of documents while Gecko browsers relies upon the Web Server to specify the correct MIME type. Gecko does not try to 'sniff' the MIME type for a document in order to reduce the possibility of unsecure, dangerous content masquerading as as a safe MIME type.</b></td><td>
<ul><li><b>Use Perl's HEAD utility to determine the actual MIME type being used by the Web Server. Correct any incorrect Server MIME types</b>. (<a href="fr/Incorrect_MIME_Type_for_CSS_Files">related article</a>)
</li></ul>
</td></tr>
<tr>
<td>La feuille de style n'est pas reconnue.
</td><td>La présence de l'attribut <code>title</code> dans un élément <code>link</code> qui se réfère à une feuille de style externe peut entraîner <b>the stylesheet may be causing the external stylesheet to be ignored</b>.</td><td>
<ul><li><b>Make sure that any stylesheet which should always be applied is persistent instead of preferred</b>. (<a href="fr/Utiliser_des_titres_corrects_avec_des_feuilles_de_styles_externes">Article connexe</a>)
</li></ul>
</td></tr>
<tr>
<td>Échec de la connexion à un site sécurisé avec un navigateurs Gecko, mais pas avec Internet Explorer.
</td><td>Le serveur n'implémente pas correctement la négociation retour pour SSL.</td><td>
<ul><li>L'administrateur du serveur Web doit mettre à jour le logiciel SSL. Pour naviguer sur un site utilisant une implémentation défectueuse de SSL, les visiteurs doivent désactiver TLS dans Netscape 6/7 ou Mozilla jusqu'à ce que le site mettre à jour les logiciels vers des versions supportant correctement ce protocole.
</li></ul>
</td></tr>
<tr>
<td>Les menus DHTML implémentés à l'aide de la fonction HierMenu ont des problèmes.
</td><td>La version de HierMenu est obsolète. Les premières versions de HierMenu ne supportent que Netscape Navigator 4.x et Internet Explorer 4.x. Les versions les plus récentes supportent Netscape 6 ; cependant, dans Netscape 6.1 et au-dessus, le support des propriétés propriétaires <code>offsetXXX</code> d'Internet Explorer fait que HierMenu place des <em>popups</em> aux mauvaises positions. Les plus récentes versions de <a class="external" href="http://www.webreference.com/dhtml/hiermenus/">HierMenu</a> supportent pleinement tous les navigateurs Gecko.</td><td>
<ul><li>Mettez à jour avec la version la plus récente de <a class="external" href="http://www.webreference.com/dhtml/hiermenus/">HierMenu (en)</a>.
</li></ul>
</td></tr></tbody></table>
<h3 name="Probl.C3.A8mes_courants_li.C3.A9s_au_code_et_au_serveur"> Problèmes courants liés au code et au serveur </h3>
<p>Cette section détaille les solutions les plus courantes aux problèmes affectant les navigateurs respectant les standards ainsi que les questions spécifiques à Gecko.
</p>
<h4 name="HTML_propri.C3.A9taire"> HTML propriétaire </h4>
<p><b>Problème : Utilisation du balisage HTML propriétaire spécifique à un navigateur (tel que <tt>&lt;LAYER&gt;</tt>).</b>
</p><p>Comme un navigateur est supposé ignorer les balises HTML qu'il ne connaît pas et rendre le contenu entre ces balises, les auteurs de pages Web ont combiné les codes HTML propriétaires afin que leurs pages s'affiche correctement dans chaque navigateur.
</p><p>Les navigateurs Gecko ignoreront les balises HTML propriétaires d'Internet Explorer et Netscape Navigator 4. Ainsi, une page Web ne s'affichera pas dans les navigateurs Gecko de la même façon qu'elle le ferait dans Internet Explorer 4 ou dans Netscape Navigator 4.
</p><p>L'exemple principal est l'utilisation de la balise HTML propriétaire <tt>&lt;LAYER&gt;</tt> de Netscape Navigator 4, couramment utilisée pour la navigation dans un site. Pour les alternatives respectant les standards, voir <a href="fr/Updating_DHTML_Web_Pages_for_Next_Generation_Browsers">Updating DHTML Web Pages for Next Generation Browsers</a>.
</p><p>On peut rapidement vérifier l'utilisation de balisage HTML propriétaire dans une page en la soumettant au <a class="external" href="http://validator.w3.org/">validateur HTML du W3C</a> en utilisant le DOCTYPE HTML 4.01. Nous aborderons les DOCTYPE plus en détails dans la suite de cet article, mais en substance, le DOCTYPE doit indiquer au navigateur, la version de HTML utilisée dans la page.
</p><p>La <a href="fr/HTML_Element_Cross_Reference">HTML Element Cross Reference</a> fournit une liste des tous les éléments HTML supportés dans Netscape 4, les navigateurs Gecko, Internet Explorer 4 et supérieur, et peut être utilisée pour déterminer les éléments supportés par tous les navigateurs.
</p>
<h4 name="D.C3.A9tection_du_navigateur"> Détection du navigateur </h4>
<p><b> Problème : Mauvaise détection du navigateur ou <i>Sniffing</i> (reniflage) </b>
</p><p>Alors que la détection du navigateur est utile pour permettre aux auteurs d'écrire des pages Web qui ne fonctionneront que dans certains navigateurs spécifiques, une détection erronée peut conduire à une très mauvaise expérience utilisateur.
</p><p>De nombreux problèmes peuvent survenir lorsqu'une page Web utilise la détection du navigateur pour déterminer quelles fonctionnalités propriétaires utiliser dans un navigateur particulier.
</p><p>Veuillez consulter l'article <a href="fr/D%c3%a9tection_du_navigateur_et_support_inter-navigateur">Détection du navigateur et support inter-navigateur</a> pour une meilleur approche de la détection des navigateurs. <small>(À traduire de {{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}}</small>
</p>
<h4 name="Solutions_sp.C3.A9cifique_.C3.A0_un_navigateur"> Solutions spécifique à un navigateur </h4>
<p><b> Problème : Le code contient des solutions de rechange pour les bogues et </b>browser-specific quirks<b>. </b>
</p><p>Comme une page Web est jugée sur son affichage dans les navigateurs et non sur son code HTML, les auteurs on développé de nombreuses techniques qui tirent avantage des caractéristiques particulières des navigateurs pour obtenir les effets souhaités. Ceci est particulièrement important car les toutes premières implémentations de CSS dans Internet Explorer 4 et dans Netscape Navigator 4 comportent de nombreux bogues. Afin d'obtenir les effets désirés, les auteurs ont écrit leur code HTML et des scripts JavaScript qui dépendaient de ces bogues pour fonctionner correctement.
</p><p>Ceci peut provoquer des problèmes avec les navigateurs Gecko, qui implémente strictement les standards. La vieille approche « code to the bugs » ne fonctionne plus dans Mozilla, Netscape 6.x, Netscape 7.x et tous les autres navigateurs Gecko.
</p>
<h5 name="Exemple_-_Inclure_des_formulaires_dans_un_tableau"> Exemple - Inclure des formulaires dans un tableau </h5>
<p><b>HTML non valide</b> pour éliminer les retours à la ligne dans <tt>&lt;FORM&gt;</tt>.
</p><p>Dans les anciens navigateurs, cela résulte en une cellule TD enveloppant un élément <code>input</code>.
</p>
<pre>&lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;form name="form2"&gt;
      &lt;td&gt;
        &lt;input type="text"&gt;
      &lt;/td&gt;
    &lt;/form&gt;
  &lt;/tr&gt;
&lt;table&gt;
</pre>
<p>Cette approche est communément utilisée pour contourner le fait que <tt>&lt;FORM&gt;</tt> est un élément bloc en HTML et qu'il commencera tout naturellement sur une nouvelle ligne dans la page. Malheureusement, ce code n'est pas valide et peut provoquer des erreurs lors de l'affichage et de l'application de règles de styles CSS.
</p>
<h5 name="Utilisation_incorrecte_de_la_notation_de_balise_XML_vide"> Utilisation incorrecte de la notation de balise XML vide </h5>
<p>De nombreux auteurs utilisent la notation de balise XML vide (<tt>&lt;tag /&gt;</tt>) dans leurs fichiers HTML. En XML, une balise vide n'a <b>jamais</b> de contenu. Les règles de compatibilité ascendante du XHTML stipulent que les éléments <b>vides</b> peuvent être utilisés en faisant suivre le nom de la balise par une espace puis un signe <i>/</i> comme dans <tt>&lt;tag /&gt;</tt>. Pour être compatible, vous <b>devez</b> avoir une espace avant <tt>/&gt;</tt>. De plus, vous ne devez utiliser cette notation XML que pour les éléments HTML qui sont toujours vides - et non pour les éléments HTML possédant une balise de fermeture optionnelle.
</p><p>Par exemple, il est correct d'utiliser <tt>&lt;br /&gt;</tt> pour coder <tt>&lt;br&gt;</tt>, bien qu'il n'y ait aucun avantage à le faire dans des documents HTML. Mais, il est <b>incorrect </b> d'utiliser <tt>&lt;option /&gt;</tt> pour coder <tt>&lt;option&gt;</tt>. Pour comprendre pourquoi, considérons ce qui suit :
</p>
<table class="standard-table">

<tbody><tr>
<th>HTML sans balise de fermeture optionnelle</th><th>Équivalent HTML avec les balises de fermetures optionnelles
</th></tr>
<tr>
<td width="50%"><pre>&lt;select&gt;
&lt;option&gt;OptionValue
&lt;/select&gt;</pre>
</td><td width="50%"><pre>&lt;select&gt;
&lt;option&gt;OptionValue&lt;/option&gt;
&lt;/select&gt;</pre>
</td></tr>
</tbody></table>
<p>Maintenant, regardons ce qui se passe lorsqu'on utilise la notation de balise XML vide : <tt>&lt;option /&gt;</tt>.
</p>
<table class="standard-table">

<tbody><tr>
<th> HTML avec notation de balise XML vide </th><th> Équivalent HTML avec balise de fermeture
</th></tr>
<tr>
<td width="50%"><pre>&lt;select&gt;
&lt;option /&gt;OptionValue
&lt;/select&gt;</pre>
</td><td width="50%">
<pre>&lt;select&gt;
&lt;option&gt;&lt;/option&gt;OptionValue
&lt;/select&gt;</pre>
</td></tr>
</tbody></table>
<p>c'est tout simplement faux. Si vous devez utiliser la notation de balise XML vide, vous ne devez le faire que pour des éléments HTML ne possédant jamais de contenu - <b>pas</b> pour les éléments HTML dont la balise de fermeture est optionnelle.
</p>
<h5 name="Les_ID_CSS_devraient_.C3.AAtre_sensibles_.C3.A0_la_casse"> Les ID CSS devraient être sensibles à la casse </h5>
<p>Gecko implémente correctement la sensibilité à la casse des identificateurs CSS <code>ID</code> et affichera correctement cet exemple. Cependant Internet Explorer ne prend pas en compte la casse des identificateurs CSS <code>ID</code> et affichera incorrectement cet exemple.
</p>
<pre>&lt;style type="text/css"&gt;
  #id1 { text-decoration: line-through; }
  #ID1 { text-decoration: underline; }
&lt;/style&gt;
&lt;div id="id1"&gt;
  Devrait être barré (line-through)
&lt;/div&gt;
&lt;div id="ID1"&gt;
  Devrait être souligné (underline)
&lt;/div&gt;</pre>
<p>-(EXEMPLE SUPPRIMÉ)-
</p><p>Note : Le <a class="external" href="http://validator.w3.org/">validateur HTML du W3C</a> marquera les attributs des <code>ID</code> HTML comme dupliqués si seule la casse diffère. Il semble y avoir un manque de cohérence en la recommandation HTML 4.01 et la déclaration SGML pour le HTML dans laquelle les attributs des identificateurs <code>ID</code> sont sensibles à la casse. C'est d'autant plus malheureux que le <a class="external" href="http://validator.w3.org/">validateur HTML</a> est, pour les développeurs Web, un des principaux moyens d'apprentissage des standards.
</p><p>En raison de la fréquence de cette erreur, Netscape 6.2 a également traité les attributs des <code>ID</code> CSS comme étant insensibles à la casse en <i>mode de compatibilité</i>. Si vous invoquez le <i>mode de respect des standards</i>, vous devriez écrire vos CSS en étant compatible avec cette sensibilité à la casse.
</p>
<h5 name="Les_classes_CSS_devraient_.C3.AAtre_sensibles_.C3.A0_la_casse">  Les classes CSS devraient être sensibles à la casse </h5>
<p>Gecko implémente correctement la sensibilité à la casse des classes CSS <code>CLASS</code> et affichera correctement cet exemple. Cependant Internet Explorer ne prend pas en compte la casse des classes CSS <code>CLASS</code> et affichera incorrectement cet exemple.
</p>
<pre>&lt;style type="text/css"&gt;
  .class1 { font-size: 1em; }
  .CLASS1 { font-size: 2em; }
&lt;/style&gt;
&lt;div&gt;
&lt;div class="class1"&gt;
  devrait avoir la taille font-size: 1em;
&lt;/div&gt;
&lt;div class="CLASS1"&gt;
  devrait avoir la taille font-size: 2em;
&lt;/div&gt;</pre>
<p>-(EXEMPLE SUPPRIMÉ)-
</p><p>En raison de la fréquence de cette erreur, Netscape 6.2 a également traité les attributs des <code>CLASS</code> CSS comme étant insensibles à la casse en <i>mode de compatibilité</i>. Si vous invoquez le <i>mode de respect des standards</i>, vous devriez écrire vos CSS en étant compatible avec cette sensibilité à la casse.
</p>
<h5 name="URL_relatives_incorrectes"> URL relatives incorrectes </h5>
<p>Une URL relative se réfère au même serveur Web qui héberge la page. Une URL relative qui se réfère à un chemin relatif par rapport au répertoire où est stockée la page Web ressemble à <tt>path/file.html</tt>. Les URL relatives qui se réfèrent à un chemin relatif par rapport au répertoire racine du serveur ressemble à <tt>/path/file.html</tt>.
</p><p>Les anciens navigateurs supportent l'utilisation non valide de <tt><span class="plain">http://path/</span></tt> pour les URL relatives au répertoire racine du serveur Web, ce qui n'est pas le cas des navigateurs Gecko. Pour spécifier correctement   le lien d'un page Web relative au répertoire racine du serveur, utilisez la forme <tt>/path/file.html</tt>.
</p>
<h5 name="Utilisation_non_valide_des_espaces_dans_les_noms_d.27attributs"> Utilisation non valide des espaces dans les noms d'attributs </h5>
<p>De nombreux auteurs semblent avoir un penchant pour l'utilisation d'espaces dans les noms. Un attribut  <a class="external" href="http://www.w3.org/TR/html401/types.html#h-6.2"><code>name</code> ou <code>id</code></a> en HTML 4.01 ne doit pas contenir d'espace. Ceci peut poser des problèmes avec les navigateurs Gecko, spécialement dans les <i>maps</i> d'images. Vous devriez vérifier que les noms de vos attributs ne comportent que des caractères valides.
</p>
<h4 name="Mauvais_code_du_aux_vieilles_API_et_aux_outils_obsol.C3.A8tes"> Mauvais code du aux vieilles API et aux outils obsolètes </h4>
<p><b>Problème : Les API sont obsolètes ou les outils d'éditions génèrent un code HTML non standard.</b>
</p><p>De nombreuses versions passées des API les plus communément utilisées sur le Web, telle que <a class="external" href="http://dynapi.sourceforge.net/">DYNAPI (en)</a>, ne supportent pas Gecko pour l'une ou l'autre raison citée ci-dessus. C'est également le cas d'anciennes version des outils d'édition Web tel que Macromedia Dreamweaver 2 et 3.
</p><p>Les plus récentes version de ces API et de ces outils supportent Gecko. Par exemple, <a class="external" href="http://dynapi.sourceforge.net/">DYNAPI (en)</a> est maintenant développé sur SourceForge et offre une version compatible avec Gecko. Les récentes versions des <a href="fr/Outils_d'%c3%a9dition_respectueux_des_standards">Outils d'édition respectueux des standards</a> supportent Gecko.
</p>
<h4 name="Mauvais_DOCTYPE"> Mauvais DOCTYPE </h4>
<p><b> Problème : une DOCTYPE incorrect peut complètement altérer la présentation de la page. </b>
</p><p>Gecko, Internet Explorer pour Mac OS et Internet Explorer 6 utilisent tous une technique de reniflage du DOCTYPE pour déterminer si une page doit être servi en utilisant un mode de compatibilité avec les vieux navigateurs ou , ua contraire, si elle doit être servi en conformité avec les standards W3C.
</p><p>L'utilisation du DOCTYPE approprié dans un document HTML permet aux auteurs de pages Web de supporter aussi bien les vieux navigateurs, moins conformes, que les plus récents en spécifiant le mode de compatibilité spécial à l'aide du  DOCTYPE. Au fil du temps, et avec la disparition progressive des navigateurs obsolètes, les auteurs de pages Web peuvent effectuer la transition vers des pages Web respectant les standards en utilisant le DOCTYPE approprié. (<a href="fr/Liberty!_Equality!_Validity!">Article connexe</a>)
</p><p>Alors que le reniflage du DOCTYPE est un moyen utile de continuer à supporter les vieux navigateurs, il peut cependant poser problème pour les navigateurs nouvelles générations tels que Netscape 6.x et Netscape 7.x si le mode d'affichage spécifié est inapproprié.
</p><p>Gecko possède également deux modes de rendus : mode de compatibilité et mode de respect strict des standards. Le mode de compatibilité imite le comporte de Netscape Navigator 4 alors que le mode de respect strict de standards suit les recommandations HTML et CSS du W3C. En particulier, le mode de respect strict des standards utilise le modèle de boîte CSS tel que défini dans le <a class="external" href="http://www.w3.org/TR/REC-CSS2/visudet.html">Chapitre 10</a> de la recommandation CSS 2. Le mode de rendu est déterminé à l'aide de la déclaration du DOCTYPE (ou de son absence) au début du document HTML.
</p>
<h4 name="Commentaires_non_valides"> Commentaires non valides </h4>
<p>Gecko possède également trois modes d'analyse : mode de compatibilité, <a href="fr/Gecko's_Almost_Standards_Mode">mode presque standard</a> et respect des standards. Le mode de compatibilité permet l'utilisation de commentaires non valides contenant plus de deux tirets -- ce qui n'est pas le cas des deux autres modes.
</p>
<pre>&lt;!---- Ceci est un commentaire HTML non valide accepté par l'analyse en mode de compatibilité des commentaires ----&gt;
&lt;!-- Ceci est un commentaire HTML valide accepté par l'analyse stricte des commentaires --&gt;</pre>
<p>Pour connaître les règles d'appel du mode de compatibilité ou les modes de respect des standards par le DOCTYPE, consultez l'article <a href="fr/Le_sniffing_de_DOCTYPE_dans_Mozilla">Le sniffing de DOCTYPE dans Mozilla</a>.
</p>
<h3 name="Codage_de_plugins"> Codage de plugins </h3>
<p>Vous pourrez remarquer que certain plugins ne se comportent pas de la même façon dans Gecko et dans Netscape Navigator 4. Visitez la page <a href="fr/Plugins">Plugins</a> pour plus d'informations à propos des langages de script dans les navigateurs Gecko, la bonne utilisation des balises, les changements dans l'architecture des plugins par rapport à la génération Netscape 4, et les suggestions sur l'utilisation des plugins.
</p>
<h3 name="Probl.C3.A8mes_de_configuration_du_serveur_Web"> Problèmes de configuration du serveur Web </h3>
<h4 name="Types_MIME_sp.C3.A9cifi.C3.A9s_incorrects">Types MIME spécifiés incorrects</h4>
<p>Beaucoup de serveurs Web déclarent incorrectement les types MIME des fichiers. Les navigateurs Gecko requièrent qu'ils soient correctement définis pour correspondre aux différents types de contenus :
</p>
<ul><li> HTML - text/html
</li><li> CSS - text/css (<a href="fr/Incorrect_MIME_Type_for_CSS_Files">Article connexe</a>)
</li><li> XML - text/xml
</li><li> SVG - image/svg+xml
</li></ul>
<h4 name="Mauvaise_impl.C3.A9mentations_de_HTTP">Mauvaise implémentations de HTTP</h4>
<p>Plusieurs serveurs Web implémentent de façon incorrecte le protocole HTTP ce qui peut provoquer quelques problèmes pour  Netscape 6.
</p>
<h4 name="Mauvaise_impl.C3.A9mentations_de_SSL">Mauvaise implémentations de SSL</h4>
<p>Les vieux navigateurs tels que Internet Explorer 4 et Netscape Navigator 4 implémentent de vielles versions du <a href="fr/Introduction_%c3%a0_SSL">protocole SSL</a>. De nos jours, la version la plus couramment déployée est SSL 3.0, cependant, la dernière version de TLS (SSL 3.1), intégrée aux navigateurs Gecko, n'est supportée que par très peu de serveurs Web. Malheureusement, plusieurs implémentations de SSL 3.0 implémentent de manière incorrecte la négociation du protocole SSL à utiliser et échouent lors de la connexion avec les navigateurs Gecko.
</p><p>Pour plus d'informations à propos de ces problèmes, veuillez lire <a href="fr/Notes_on_TLS_-_SSL_3.0_Intolerant_Servers">Notes on TLS - SSL 3.0 Intolerant Servers</a>.
</p>
<h3 name="Ressources_utiles"> Ressources utiles </h3>
<ul><li> Les développeurs Web débutants ou intermédiaires peuvent consulter le <i>DevEdge Web Tune Up Wizard</i> pour mettre en évidence les contenus critiques ayant besoin d'être mis à jour pour supporter Gecko ainsi que tous les navigateurs supportant les standards du W3C.
</li><li> <a class="external" href="http://webmaster.info.aol.com/">AOL Webmaster.info Site - Developing for Netscape Gecko</a> couvre les problèmes les plus couramment rencontrés par les webmestres, et les étapes de mise en conformité de votre code.
</li><li> La <a href="fr/Outils">boîte à outils</a> recense plusieurs outils inestimables du W3C pour le diagnostique des pages Web tels que la validation de code, les exemples et bien plus.
</li><li> <a class="external" href="http://bugzilla.mozilla.org/enter_bug.cgi?format=guided">Report Mozilla browser bugs or web site compatibility problems</a>
</li><li> {{mediawiki.interwiki('en', 'Mozilla_Web_Developer_Community', 'en:Mozilla Web Developer Community')}}
</li></ul>
<h3 name="R.C3.A9f.C3.A9rences"> Références </h3>
<ul><li> <a class="external" href="http://www.mozilla.org/docs/web-developer/upgrade_2.html">Using Web Standards in Your Web Pages</a>
</li><li> {{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}}
</li><li> {{mediawiki.interwiki('en', 'Updating_DHTML_Web_Pages', 'en:Updating DHTML Web Pages')}}
</li><li> {{mediawiki.interwiki('en', 'HTML_Element_Cross_Reference', 'en:HTML Element Cross Reference')}}
</li><li> {{mediawiki.interwiki('en', 'DOM_Client_Object_Cross-Reference', 'en:DOM Client Object Cross-Reference')}}
</li><li> <a class="external" href="http://www.mozilla.org/docs/web-developer/xbdhtml/xbdhtml.html">Introduction to Cross-Browser JavaScript and Dynamic HTML</a>
</li><li> <a href="fr/Les_cha%c3%aenes_UserAgent_de_Gecko">Les chaînes UserAgent de Gecko</a>
</li><li> {{mediawiki.interwiki('en', 'Tools', 'Developer Tools')}}
</li><li> <a href="fr/Le_sniffing_de_DOCTYPE_dans_Mozilla">Le sniffing de DOCTYPE dans Mozilla</a>
</li><li> La <a href="fr">page d'accueil</a> pointent vers de nombreuses ressources.
</li></ul>
<div class="originaldocinfo">
<h3 name="Informations_sur_le_document_original"> Informations sur le document original </h3>
<ul><li> Dernière mise à jour : 16 août 2002
</li><li> Copyright : © 2001-2003 Netscape. All rights reserved.
</li></ul>
</div>
<p><span class="comment">Interwiki Languages Links</span>
</p>{{ wiki.languages( { "en": "en/Gecko_Compatibility_Handbook" } ) }}
Revenir à cette révision