Manual de Compatibilidad de Gecko

  • Enlace amigable (slug) de la revisión: Manual_de_Compatibilidad_de_Gecko
  • Título de la revisión: Manual de Compatibilidad de Gecko
  • Id de la revisión: 122365
  • Creada:
  • Creador: Nathymig
  • ¿Es la revisión actual? No
  • Comentario un poco más

Contenido de la revisión

{{wiki.template('Traducción', [ "inglés", "http://developer.mozilla.org/en/docs/Gecko_Compatibility_Handbook" ])}}


El objetivo de este manual es ayudaros a poner al día vuestros sitios web para que funcionen en los navegadores respetando los estándares del Web y que detecten correctamente a Gecko.

Si desconocéis los estándares del Web, el artículo Utilización de estándares en vuestras páginas web {{mediawiki.interwiki('en', 'Using_Web_Standards_in_Your_Web_Pages', ' en inglés')}} constituye una introducción útil.

Gecko es un navegador ajustable, desarrollado como parte del proyecto de código abierto Mozilla y basado más bien en los estándares del W3C que en los acercamientos propietarios típicos del pasado. Respetar los estándares del Web simplifica la interacción de los navegadores en el desarrollo y permite la accesibilidad .

4.x contra Gecko

Desde 1997, numerosos sitios Internet se han concebido para funcionar con Microsoft Internet Explorer 4 o con Netscape Navigator 4. Éstos navegadores fueron desarrollados antes de existir las recomendaciones del W3C para HTML, CSS y DOM.

Éstos navegadores más antiguos, sin estándares del Web, se diferencian a Gecko en numerosos puntos:

Los navegadores antiguos

  • Utilizan códigos HTML, CSS y JavaScript propietarios (no estándares).
  • Internet Explorer 4 y Netscape Navigator 4 ofrecen los dos una ayuda para la mayoría de estándar HTML 3.2 y del JavaScript de base.
  • Aún que soportan en cierta medida el estándar CSS 1, su puesta en marcha no se completa y tienen funcionalidades adicionales no estándares.
  • Ni Internet Explorer 4 ni Netscape Navigator 4 aguantan el DOM del W3C. En lugar de eso, cada uno tiene su propia "API" propietaria de manipulación del contenido, del estilo y de la posición de los elementos HTML en una página web.
  • Además, usan métodos completamente diferentes para integrar programas de terceros en sus navegadores.

Gecko es un motor de presentación "multiplataforma" compatible con un gran número de versiones de Windows, como Windows XP, Mac OS y Linux. Por esta pluralidad, sus funcionalidades son en general idénticas sea cual sea el soporte usado, al contrario de las versiones de Internet Explorer para Mac e Internet Explorer para Windows que son programas distintos y pueden entonces comportarse de maneras muy diferentes.

Test de compatibilidad rápida

Si vuestro sitio utiliza las tecnologías propietarias de Netscape 4.x y de Microsoft, consulten el artículo Utilización de estándares en vuestras páginas web para conocer rápidamente los principios generales de estas normas. Éste test de compatibilidad será mucho más benéfico para los sitios que utilicen un código simple o que estén en fase de modificación para soportar los estándares.

Preparación de los navegadores para el test

No todos los navegadores que utilizan Gecko contienen <tt>Firefox</tt> ou <tt>Netscape</tt> en su cadena "user-agent". Es importante, entonces, verificar que se detecta correctamente navegadores como AOL para Mac OS X.

Es posible descargar varios navegadores de Mozilla. O, si se utiliza la detección de "user-agent", se puede instalar una extensión para Firefox o Mozilla que permitirá «simular» las cadenas "user-agent" de éstos navegadores Gecko. Aquí tienen como hacerlo:

  1. Abrir SeaMonkey, Firefox o la antigua suite Mozilla. La ventaja de utilizar estos navegadores es que detectando únicamente las cadenas <tt>Netscape</tt> o <tt>Netscape6</tt>, se llega directamente a los eventuales problemas.
  2. Instalar la extensión User Agent Switcher (en). '
  3. Después de arrancar de nuevo el navegador hay que poner las cadenas "User-Agent" de las cuales se desea probar la detección. Nota: lo he dejado en inglés porque la extensión lo saca así, si lo ponemos en español habrá gente que sepreguntarán: donde es que tengo que picar? (<tt>Herramientas --> User Agent Switcher --> Options --> Options… --> User Agents --> Add…</tt>). Una vez completado el cuadro de diálogo (debería parecerse a lo de abajo), Aceptar y cerrar la ventana «Options». Parece que el enlace no funciona, se puede mirar en el original

    {{mediawiki.external('Image:GeckoCompatibilityHandbook-Configure-UASwitcher.PNG')}}
  4. Ya podéis empezar a utilizar la cadena "User-Agent" que acabáis de crear: <tt>Herramientas --> User Agent Switcher --> El nombre que habéis elegido</tt>. Podéis verificar que la cadena a cambiado en: <tt>Help --> About</tt>.

Podéis encontrar las cadenas User Agent de los navegadores basados en Gecko aquí. Si es posible, descargaros también los diferentes navegadores para probarlos individualmente.

Repasando los resultados

Los siguientes temas tienen relación con la detección de los navegadores. Para más soluciones de problemas corrientes, siga leyendo.

Problema: El sitio respeta los estándares Web pero no se muestra correctamente
  • Prueban de utilizar la cadena user-agent de Internet Explorer 6.
  • Si funciona, usen los parámetro de la detección para dar el contenido IE 6 a los visitantes que tienen <tt>Gecko</tt> en sus cadenas user-agent. IE 6.x es actualmente mucho más parecido a los navegadores Gecko que Netscape 4.x, debido a una mejor ayuda de los estándares del W3C.
Problema: El sitio certificado Netscape 6.x se muestra incorrectamente en los otros navegadores
  • Si vuestro sitio ya es compatible con Gecko, prueben de volver a una cadena "user-agent" de Netscape 6. Si es más o menos aceptable, probablemente sólo detectareis <tt>Netscape</tt> ou <tt>Netscape6</tt>.
  • Detectar <tt>Gecko</tt> en su lugar es la vía más facil para mejorar la comodidad de los usadores de Mozilla, SeaMonkey, CompuServe 7, etc. (Artículo relacionado) {{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}})
Problema: El sitio no funciona bien en todos los navegadores Gecko

Si todavía tenéis problemas, podéis consultar la sección de ayuda rápida de problemas de este manual. Además, si usáis tecnologías propietarias de Netscape 4.x y/o de Microsoft, podéis leer Utilización de estándares en vuestras páginas web para saber rápidamente qué diferencias hay en Gecko.

Problemas con AOL o CompuServe

Aunque vuestro sitio se muestre correctamente en Netscape 7.x, es importante que lo probéis también en AOL pour Mac OS X y en CompuServe 7 para verificar la detección del navegador ({{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}}) y los posibles problemas de red.

Prueba de AOL detrás de un corta-fuego

Si debéis conectaros a AOL detrás de un corta-fuego, América Online ha abierto los puertos TCP/IP 5.190 y 11.523 para que podáis comunicaros con el servidor de AOL. De esta forma podréis probar vuestro sitio detrás de un corta-fuego, siempre y cuando vuestro administrador de redes haya abierto estos puertos.

Tenéis que estar conectado a Internet para hacer el test de vuestro sitio en AOL; es imposible acceder a vuestro sitio en una máquina local vía vuestra red local (LAN) sin una conexión Internet. Para más información, ver: Webmaster@AOL (en).

Referencias en caso de problemas

Como se explica en Utilización de estándares en vuestras páginas web, la codificación para obtener una compatibilidad entre navegadores necesita que se escriban los estándares para permitir que los navegadores Gecko, Netscape 4 y IE trabajen correctamente

Síntoma Posible problema Solución
El sitio se muestra correctamente en Netscape 6.x pero no en Netscape 7.x u otros navegadores Gecko. La detección del navegador por JavaScript encuentra a Netscape 6.x pero no a los otros navegadores Gecko.
  • Actualice el detector de navegador de JavaScript para que detecte a «Gecko» (Artículo relacionado) {{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}})).
El contenido es diferente en los navegadores Gecko y Internet Explorer. Utilización de códigos propietarios o inválidos (como los generados por varias aplicaciones de Microsoft Office).
  • Usen las Herramientas de validación HTML y CSS del W3C para convalidar la página web. Corrijan los errores y reemplacen los códigos propietarios donde sea posible.
  • Actualice las herramientas de edición web con versiones respetuosas de las normas W3C y de los navegadores Gecko.
El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer. La consola JavaScript en Netscape, Mozilla o Firefox muestra errores relacionados con: document.all (todo el documento), document.layers (capas del documento), document.<propiedades> que no son definidos a causa de una mala detección del navegador o por la utilización de JavaScript propietario.
  • Mettez à jour votre détection de navigateur pour détecter correctement les navigateurs Gecko.
  • Mettez à jour les API pour utiliser des versions plus récentes conformes aux standards.
  • Mettez à jour vos outils d'édition Web avec des version supportant les standards du W3C 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 classes en en ignorant la casse, alors que les navigateurs Gecko respectent la casse. Une utilisation inconsistante de la casse entre la feuille de styles CSS et les éléments HTML en ce qui concerne les ID et noms de classe provoquera la non application des styles dans les navigateurs Gecko.
  • 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îtes CSS (padding, margin, border).
  • N'utilisez pas les implémentations CSS invalides de Internet Explorer. N'utilisez que les fonctionnalités standard et inter-navigateurs de CSS. Soyez consistant en spécifiant des noms de classes et d'ID entre vos documents HTML et vos feuilles de style CSS. Ne spécifiez pas de hauteurs ou de largeurs sur les éléments en-ligne comme les span. Utilisez les spécifications de modèle de boîtes standard 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 telles que Netscape Navigator 4 ou Internet Explorer 4 et 5, veillez à 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 a été déclenché par le DOCTYPE spécifié. 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 utilise peut-être 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, comme <tt>http://example.com/directory/...</tt>
  • Vérifiez que tous les hyperliens utilisent des barres obliques dans le sens correct (/).
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 Le serveur Web a spécifié incorrectement le type MIME du contenu. Internet Explorer essaie de deviner le type MIME des documents tandis que les navigateurs Gecko font confiance au serveur Web pour connaitre le bon type MIME. Gecko n'essaie pas de « sniffer » le type MIME pour un document afin de réduire les possibilités de traiter des contenus non sûrs ou dangereux déguisés en un type MIME sûr.
  • Utilisez l'utilitaire HEAD de Perl ou PHP pour déterminer le type MIME réel utilisé par le serveur Web. Corrigez tous les types incorrects sur le serveur (article connexe).
La feuille de style n'est pas reconnue. La présence d'un attribut title dans un élément link qui se réfère à une feuille de style externe peut faire que celle-ci soit ignorée.
  • Assurez-vous que toute feuille de style devant toujours appliquée est persistante et non simplement préférée (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 de secours 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. Des versions un peu 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 dernières 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 peut ne pas s'afficher 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 {{mediawiki.internal('Updating DHTML Web Pages for Next Generation Browsers', "es")}}.

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étail 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 Référence croisée des éléments HTML fournit une liste des tous les éléments HTML supportés dans Netscape 4, les navigateurs Gecko, Internet Explorer 4 et supérieurs, 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)

Même si 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.

Consultez l'article Détection du navigateur et support inter-navigateur pour une meilleure 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écifiques à un navigateur

Problème : Le code contient des solutions de rechange pour les bogues et comportements spéciaux de certains navigateurs (quirks).

Comme une page Web n'est pas jugée selon la façon dont elle est codée mais sur son affichage dans les navigateurs, 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 revêt une importance particulière étant donné que 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.

Cela peut provoquer des problèmes avec les navigateurs Gecko, qui implémentent strictement les standards. La vieille approche de « coder pour les bugs » ne fonctionne plus dans Mozilla, Netscape 6.x et 7.x et tous les autres navigateurs Gecko.

Exemple — Inclusion de formulaires dans un tableau

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

Dans les anciens navigateurs, cela permettait à la cellule TD d'envelopper un élément input au plus près.

<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 suivie d'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é (mode quirks). Si vous invoquez le mode de respect des standards, vous devriez écrire vos CSS en respectant 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é (mode quirks). Si vous invoquez le mode de respect des standards, vous devriez écrire vos CSS en respectant 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>chemin/fichier.html</tt>. Les URL relatives qui se réfèrent à un chemin relatif par rapport au répertoire racine du serveur ressemblent à <tt>/chemin/fichier.html</tt>.

Les anciens navigateurs acceptaient l'utilisation non valide de <tt>http://chemin/</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>/chemin/fichier.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 versions les plus récentes 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 déclaration DOCTYPE incorrecte 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 détection du DOCTYPE pour déterminer si une page doit être servie en utilisant un mode de compatibilité avec les anciens navigateurs ou, au 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 la détection du DOCTYPE est un moyen utile de continuer à supporter les vieux navigateurs, il peut cependant poser problème pour les navigateurs de 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 comportement 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 certains 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 incorrectement

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émentation de HTTP

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

Mauvaise implémentation de SSL

Les vieux navigateurs tels que Internet Explorer 4 et Netscape Navigator 4 implémentaient 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 sur TLS - Serveurs SSL 3.0 intolérants.

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 diagnostic des pages Web tels que la validation du code, des 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.

Catégorie:Gecko Catégorie:Développement inter-navigateur Catégorie:Développement Web

Interwiki Languages Links

{{ wiki.languages( { "en": "en/Gecko_Compatibility_Handbook", "fr": "fr/Manuel_de_compatibilit\u00e9_Gecko" } ) }}

Fuente de la revisión

<p>
{{wiki.template('Traducción', [ "inglés", "http://developer.mozilla.org/en/docs/Gecko_Compatibility_Handbook" ])}}
</p><p><br>
El objetivo de este manual es ayudaros a poner al día vuestros sitios web para que funcionen en los navegadores respetando los estándares del Web y que detecten correctamente a <a href="es/Gecko">Gecko</a>.
</p><p>Si desconocéis los estándares del Web, el artículo <a href="es/Utilizaci%c3%b3n_de_est%c3%a1ndares_en_vuestras_p%c3%a1ginas_web">Utilización de estándares en vuestras páginas web</a>  {{mediawiki.interwiki('en', 'Using_Web_Standards_in_Your_Web_Pages', ' en inglés')}} constituye una introducción útil.
</p><p>Gecko es un navegador ajustable, desarrollado como parte del proyecto de código abierto  <a class="external" href="http://www.mozilla.org/">Mozilla</a> y basado más bien en los  <a class="external" href="http://www.w3.org/">estándares del W3C</a> que en los acercamientos propietarios típicos del pasado. Respetar los estándares del Web simplifica la interacción de los navegadores en el desarrollo y permite la accesibilidad <a class="external" href="http://www.mozilla.org/access/(en)">.
</a></p><a class="external" href="http://www.mozilla.org/access/(en)">
<h3 name="4.x_contra_Gecko"> 4.x contra Gecko </h3>
</a><p><a class="external" href="http://www.mozilla.org/access/(en)">Desde 1997, numerosos sitios Internet se han concebido para funcionar con Microsoft Internet Explorer 4 o con Netscape Navigator 4. Éstos navegadores fueron desarrollados antes de existir las recomendaciones del </a><a class="external" href="http://www.w3.org/">W3C</a> para <a href="es/HTML">HTML</a>, <a href="es/CSS">CSS</a> y <a href="es/DOM">DOM</a>.
</p><p>Éstos navegadores más antiguos, sin estándares del Web, se diferencian a Gecko en numerosos puntos:
</p><p><b>Los navegadores antiguos</b>
</p>
<ul><li> Utilizan códigos <a href="es/HTML">HTML</a>, <a href="es/CSS">CSS</a> y <a href="es/JavaScript">JavaScript</a> propietarios (no estándares).
</li><li> Internet Explorer 4 y Netscape Navigator 4 ofrecen los dos una ayuda para la mayoría de estándar HTML 3.2 y del JavaScript de base.
</li><li> Aún que soportan en cierta medida el estándar CSS 1, su puesta en marcha no se completa y tienen funcionalidades adicionales no estándares.
</li><li> Ni Internet Explorer 4 ni Netscape Navigator 4 aguantan el <a href="es/DOM">DOM</a> del W3C. En lugar de eso, cada uno tiene su propia "API" propietaria de manipulación del contenido, del estilo y de la posición de los elementos HTML en una página web.
</li><li> Además, usan métodos completamente diferentes para integrar programas de terceros en sus navegadores.
</li></ul>
<p><b>Gecko</b> es un motor de presentación "multiplataforma" compatible con un gran número de versiones de Windows, como Windows XP, Mac OS y Linux. Por esta pluralidad, sus funcionalidades son en general idénticas sea cual sea el soporte usado, al contrario de las versiones de Internet Explorer para Mac e Internet Explorer para Windows que son  programas distintos y pueden entonces comportarse de maneras muy diferentes.
</p>
<h3 name="Test_de_compatibilidad_r.C3.A1pida"> Test de compatibilidad rápida </h3>
<p>Si vuestro sitio utiliza las tecnologías propietarias de Netscape 4.x y de Microsoft, consulten el artículo <a href="es/Utilizaci%c3%b3n_de_est%c3%a1ndares_en_vuestras_p%c3%a1ginas_web">Utilización de estándares en vuestras páginas web</a> para conocer rápidamente los principios generales de estas normas. Éste test de compatibilidad será mucho más benéfico para los sitios que utilicen un código simple o que estén en fase de modificación para soportar los estándares.
</p>
<h4 name="Preparaci.C3.B3n_de_los_navegadores_para_el_test"> Preparación de los navegadores para el test </h4>
<p>No todos los navegadores que utilizan Gecko contienen <tt>Firefox</tt> ou <tt>Netscape</tt> en su cadena "user-agent". Es importante, entonces, verificar que se detecta correctamente navegadores como AOL para Mac OS X.
</p><p>Es posible <a class="external" href="http://www.mozilla.org/download.html">descargar</a> varios navegadores de Mozilla. O, si se utiliza la detección de "user-agent", se puede instalar una extensión para Firefox o Mozilla que permitirá «simular» las cadenas "user-agent" de éstos navegadores Gecko. Aquí tienen como hacerlo:
</p>
<ol><li> Abrir <a class="external" href="http://www.mozilla.org/projects/seamonkey/">SeaMonkey</a>, <a class="external" href="http://www.getfirefox.com/">Firefox</a> o la antigua suite <a class="external" href="http://www.mozilla.org/products/mozilla1.x/">Mozilla</a>. La ventaja de utilizar estos navegadores es que detectando únicamente las cadenas <tt>Netscape</tt> o <tt>Netscape6</tt>, se llega directamente a los eventuales problemas.
</li><li> Instalar la extensión <a class="external" href="https://addons.mozilla.org/firefox/59/">User Agent Switcher (en)</a>. '
</li><li> Después de arrancar de nuevo el navegador hay que poner las cadenas <a href="es/Las_cadenas_UserAgent_de_Gecko">"User-Agent"</a> de las cuales se desea probar la detección. <small>Nota: lo he dejado en inglés porque la extensión lo saca así, si lo ponemos en español habrá gente que sepreguntarán: donde es que tengo que picar?</small> (<tt>Herramientas --&gt; User Agent Switcher --&gt; Options --&gt; Options… --&gt; User Agents --&gt; Add…</tt>). Una vez completado el cuadro de diálogo (debería parecerse a lo de abajo), Aceptar y cerrar la ventana «Options». Parece que el enlace no funciona, se puede mirar en <a class="external" href="http://developer.mozilla.org/en/docs/Gecko_Compatibility_Handbook">el original</a><br><br>{{mediawiki.external('Image:GeckoCompatibilityHandbook-Configure-UASwitcher.PNG')}} <br>
</li><li> Ya podéis empezar a utilizar la cadena "User-Agent" que acabáis de crear: <tt>Herramientas --&gt; User Agent Switcher --&gt; <i>El nombre que habéis elegido</i></tt>. Podéis verificar que la cadena a cambiado en: <tt>Help --&gt; About</tt>.
</li></ol>
<p>Podéis encontrar <a href="es/Las_cadenas_UserAgent_de_Gecko">las cadenas User Agent</a> de los navegadores basados en Gecko <a href="es/Las_cadenas_UserAgent_de_Gecko">aquí</a>. Si es posible, descargaros también los diferentes navegadores para probarlos individualmente.
</p>
<h4 name="Repasando_los_resultados"> Repasando los resultados </h4>
<p>Los siguientes temas tienen relación con la detección de los navegadores. Para más soluciones de problemas corrientes, <b>siga leyendo</b>.
</p>
<h5 name="Problema:_El_sitio_respeta_los_est.C3.A1ndares_Web_pero_no_se_muestra_correctamente"> <b>Problema</b>: <i>El sitio respeta los estándares Web pero no se muestra correctamente</i> </h5>
<ul><li>Prueban de utilizar la cadena user-agent de Internet Explorer 6. 
</li><li>Si funciona, usen los parámetro de la detección para dar el contenido IE 6 a los visitantes que tienen <tt>Gecko</tt> en sus cadenas user-agent. IE 6.x es actualmente mucho más parecido a los navegadores Gecko que  Netscape 4.x, debido a una mejor ayuda de los estándares del W3C.
</li></ul>
<h5 name="Problema:_El_sitio_certificado_Netscape_6.x_se_muestra_incorrectamente_en_los_otros_navegadores"> <b>Problema</b>: <i>El sitio certificado Netscape 6.x se muestra incorrectamente en los otros navegadores</i> </h5>
<ul><li>Si vuestro sitio ya es compatible con Gecko, prueben de volver a una cadena "user-agent" de Netscape 6. Si es más o menos aceptable, probablemente sólo detectareis <tt>Netscape</tt> ou <tt>Netscape6</tt>.
</li><li>Detectar <tt>Gecko</tt> en su lugar es la vía más facil para mejorar la comodidad de los usadores de Mozilla, SeaMonkey, CompuServe 7, etc. (<a href="es/Detecci%c3%b3n_de_navegador_y_soporte_entre_ellos">Artículo relacionado</a>) <small>{{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}})</small>
</li></ul>
<h5 name="Problema:_El_sitio_no_funciona_bien_en_todos_los_navegadores_Gecko"> <b>Problema</b>: <i>El sitio no funciona bien en todos los navegadores Gecko</i> </h5>
<p>Si todavía tenéis problemas, podéis consultar la sección de ayuda rápida de <a href="es/Manual_de_compatibilidad_Gecko#Referencias_en_caso_de_problemas">problemas</a> de este manual. Además, si usáis tecnologías propietarias de Netscape 4.x y/o de Microsoft, podéis leer <a href="es/Utilizaci%c3%b3n_de_est%c3%a1ndares_en_vuestras_p%c3%a1ginas_web">Utilización de estándares en vuestras páginas web</a> para saber rápidamente qué diferencias hay en Gecko.
</p>
<h3 name="Problemas_con_AOL_o_CompuServe"> Problemas con AOL o CompuServe </h3>
<p>Aunque vuestro sitio se muestre correctamente en Netscape 7.x, es <b>importante</b> que lo probéis también en  <a class="external" href="http://www.aol.com/">AOL pour Mac OS X</a> y en <a class="external" href="http://www.compuserve.com/">CompuServe 7</a> para verificar la <a href="es/Detecci%c3%b3n_de_navegador_y_soporte_entre_ellos">detección del navegador</a> <small>({{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}})</small> y los posibles problemas de red.
</p>
<h4 name="Prueba_de_AOL_detr.C3.A1s_de_un_corta-fuego"> Prueba de AOL detrás de un corta-fuego </h4>
<p>Si debéis conectaros a AOL detrás de un corta-fuego, América Online ha abierto los puertos TCP/IP 5.190 y 11.523 para que podáis comunicaros con el servidor de AOL. De esta forma podréis probar vuestro sitio detrás de un corta-fuego, siempre y cuando vuestro administrador de redes haya abierto estos puertos.
</p><p>Tenéis que estar conectado a Internet para hacer el test de vuestro sitio en AOL; es imposible acceder a vuestro sitio en una máquina local vía vuestra red local (LAN) sin una conexión Internet. Para más información, ver: <a class="external" href="http://webmaster.aol.com/">Webmaster@AOL (en)</a>.
</p>
<h3 name="Referencias_en_caso_de_problemas"> Referencias en caso de problemas </h3>
<p>Como se explica en <a href="es/Utilizaci%c3%b3n_de_est%c3%a1ndares_en_vuestras_p%c3%a1ginas_web">Utilización de estándares en vuestras páginas web</a>, la codificación para obtener una compatibilidad entre navegadores necesita que se escriban los estándares para permitir que los navegadores Gecko, Netscape 4 y IE trabajen correctamente
</p>
<table class="standard-table" width="100%">

<tbody><tr>
<th> Síntoma </th><th> Posible problema </th><th> Solución
</th></tr>
<tr>
<td width="25%">El sitio se muestra correctamente en Netscape 6.x pero no en Netscape 7.x u otros navegadores Gecko.
</td><td width="37.5%">La detección del navegador por JavaScript encuentra a Netscape 6.x pero no a los otros navegadores Gecko.
</td><td width="37.5%">
<ul><li> Actualice el detector de navegador de JavaScript para que detecte a «Gecko» (<a href="es/Detecci%c3%b3n_de_navegador_y_soporte_entre_ellos">Artículo relacionado</a>) <small>{{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}})</small>).
</li></ul>
</td></tr>
<tr>
<td>El contenido es diferente en los navegadores Gecko y Internet Explorer.
</td><td>Utilización de códigos propietarios o inválidos (como los generados por varias aplicaciones de Microsoft Office).</td><td>
<ul><li> Usen las <a href="es/Herramientas">Herramientas</a> de validación HTML y CSS del W3C para convalidar la página web. Corrijan los errores y reemplacen los códigos propietarios donde sea posible.
</li><li> Actualice las herramientas de edición web con versiones respetuosas de las normas W3C y de los navegadores Gecko.
</li></ul>
</td></tr>
<tr>
<td>El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer.
</td><td>La consola JavaScript en Netscape, Mozilla o Firefox muestra errores relacionados con:  <code>document.all</code> (todo el documento), <code>document.layers</code> (capas del documento), <code>document.<i>&lt;propiedades&gt;</i></code> que no son definidos a causa de una mala detección del navegador o por la utilización de JavaScript propietario.</td><td>
<ul><li> Mettez à jour votre <a href="es/D%c3%a9tection_du_navigateur_et_support_inter-navigateur">détection de navigateur</a> pour détecter correctement les navigateurs Gecko.
</li><li> Mettez à jour les API pour utiliser des versions plus récentes conformes aux standards.
</li><li> Mettez à jour vos outils d'édition Web avec des version supportant les standards du W3C 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 classes en en ignorant la casse, alors que les navigateurs Gecko respectent la casse. Une utilisation inconsistante de la casse entre la feuille de styles CSS et les éléments HTML en ce qui concerne les ID et noms de classe provoquera la non application des styles dans les navigateurs Gecko.
</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îtes CSS (<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 standard et inter-navigateurs de CSS. Soyez consistant en spécifiant des noms de classes et d'ID entre vos documents HTML et vos feuilles de style CSS. Ne spécifiez pas de  hauteurs ou de largeurs sur les éléments en-ligne comme les <code>span</code>. Utilisez les spécifications de modèle de boîtes standard <a href="es/CSS">CSS</a>.
</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 telles que Netscape Navigator 4 ou Internet Explorer 4 et 5, veillez à bien spécifier le mode de rendu « Quirks » à l'aide du <a href="es/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 a été déclenché par le DOCTYPE spécifié. Changez le DOCTYPE pour appeler le mode de rendu « Quirks  » à la place. <a href="es/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 utilise peut-être une forme non valide d'URL relative.</td><td>
<ul><li> Changez les URL relatives de <tt><span class="plain">http://directory/...</span></tt> en <tt><span class="plain">directory/...</span></tt> ou utilisez des chemins absolus pour les URL, comme <tt><span class="plain">http://example.com/directory/...</span></tt>
</li><li> Vérifiez que tous les hyperliens utilisent des barres obliques dans le sens correct (/).
</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>Le serveur Web a spécifié incorrectement le type MIME du contenu. Internet Explorer essaie de deviner le type MIME des documents tandis que les navigateurs Gecko font confiance au serveur Web pour connaitre le bon type MIME. Gecko n'essaie pas de « sniffer » le type MIME pour un document afin de réduire les possibilités de traiter des contenus non sûrs ou dangereux déguisés en un type MIME sûr.</td><td>
<ul><li> Utilisez l'utilitaire HEAD de Perl ou PHP pour déterminer le type MIME réel utilisé par le serveur Web. Corrigez tous les types incorrects sur le serveur (<a href="es/Type_MIME_incorrect_pour_les_fichiers_CSS">article connexe</a>).
</li></ul>
</td></tr>
<tr>
<td>La feuille de style n'est pas reconnue.
</td><td>La présence d'un attribut <code>title</code> dans un élément <code>link</code> qui se réfère à une feuille de style externe peut faire que celle-ci soit ignorée.</td><td>
<ul><li> Assurez-vous que toute feuille de style devant toujours appliquée est persistante et non simplement préférée (<a href="es/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 de secours 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. Des versions un peu 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 dernières 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 peut ne pas s'afficher 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. <span class="comment">Pour les alternatives respectant les standards, voir {{mediawiki.internal('Updating DHTML Web Pages for Next Generation Browsers', "es")}}.</span>
</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étail 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="es/R%c3%a9f%c3%a9rence_crois%c3%a9e_des_%c3%a9l%c3%a9ments_HTML">Référence croisée des éléments HTML</a> fournit une liste des tous les éléments HTML supportés dans Netscape 4, les navigateurs Gecko, Internet Explorer 4 et supérieurs, 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>Même si 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>Consultez l'article <a href="es/D%c3%a9tection_du_navigateur_et_support_inter-navigateur">Détection du navigateur et support inter-navigateur</a> pour une meilleure 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.A9cifiques_.C3.A0_un_navigateur"> Solutions spécifiques à un navigateur </h4>
<p><b> Problème : Le code contient des solutions de rechange pour les bogues et comportements spéciaux de certains navigateurs (<i>quirks</i>). </b>
</p><p>Comme une page Web n'est pas jugée selon la façon dont elle est codée mais sur son affichage dans les navigateurs, 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 revêt une importance particulière étant donné que 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>Cela peut provoquer des problèmes avec les navigateurs Gecko, qui implémentent strictement les standards. La vieille approche de « coder pour les bugs » ne fonctionne plus dans Mozilla, Netscape 6.x et 7.x et tous les autres navigateurs Gecko.
</p>
<h5 name="Exemple_.E2.80.94_Inclusion_de_formulaires_dans_un_tableau"> Exemple — Inclusion de 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 permettait à la cellule TD d'envelopper un élément <code>input</code> au plus près.
</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 suivie d'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> (mode <i>quirks</i>). Si vous invoquez le <i>mode de respect des standards</i>, vous devriez écrire vos CSS en respectant 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> (mode <i>quirks</i>). Si vous invoquez le <i>mode de respect des standards</i>, vous devriez écrire vos CSS en respectant 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>chemin/fichier.html</tt>. Les URL relatives qui se réfèrent à un chemin relatif par rapport au répertoire racine du serveur ressemblent à <tt>/chemin/fichier.html</tt>.
</p><p>Les anciens navigateurs acceptaient l'utilisation non valide de <tt><span class="plain">http://chemin/</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>/chemin/fichier.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 versions les plus récentes 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="es/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 déclaration DOCTYPE incorrecte 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 détection du DOCTYPE pour déterminer si une page doit être servie en utilisant un mode de compatibilité avec les anciens navigateurs ou, au 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="es/Libert%c3%a9_!_%c3%89galit%c3%a9_!_Validit%c3%a9_!">article connexe</a>).
</p><p>Alors que la détection du DOCTYPE est un moyen utile de continuer à supporter les vieux navigateurs, il peut cependant poser problème pour les navigateurs de 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 comportement 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="es/Mode_presque_standard_de_Gecko">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="es/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 certains plugins ne se comportent pas de la même façon dans Gecko et dans Netscape Navigator 4. Visitez la page <a href="es/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_incorrectement"> Types MIME spécifiés incorrectement </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 — <code>text/html</code>
</li><li> CSS — <code>text/css</code> (<a href="es/Type_MIME_incorrect_pour_les_fichiers_CSS">Article connexe</a>)
</li><li> XML — <code>text/xml</code>
</li><li> SVG — <code>image/svg+xml</code>
</li></ul>
<h4 name="Mauvaise_impl.C3.A9mentation_de_HTTP"> Mauvaise implémentation de HTTP </h4>
<p>Plusieurs serveurs Web implémentent de façon incorrecte le protocole HTTP ce qui peut provoquer quelques problèmes pour Mozilla.
</p>
<h4 name="Mauvaise_impl.C3.A9mentation_de_SSL"> Mauvaise implémentation de SSL </h4>
<p>Les vieux navigateurs tels que Internet Explorer 4 et Netscape Navigator 4 implémentaient de vielles versions du <a href="es/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="es/Notes_sur_TLS_-_Serveurs_SSL_3.0_intol%c3%a9rants">Notes sur TLS - Serveurs SSL 3.0 intolérants</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="es/Outils">boîte à outils</a> recense plusieurs outils inestimables du W3C pour le diagnostic des pages Web tels que la validation du code, des 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> {{mediawiki.interwiki('en', 'Using_Web_Standards_in_your_Web_Pages', 'en:Using Web Standards in your Web Pages')}}
</li><li> {{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en:Browser Detection and Cross Browser Support')}}
</li><li> <strike>{{mediawiki.interwiki('en', 'Updating_DHTML_Web_Pages', 'en:Updating DHTML Web Pages')}}</strike> (article inexistant)
</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="es/Les_cha%c3%aenes_UserAgent_de_Gecko">Les chaînes UserAgent de Gecko</a>
</li><li> <a href="es/Outils">Outils de développement</a>
</li><li> <a href="es/Le_sniffing_de_DOCTYPE_dans_Mozilla">Le sniffing de DOCTYPE dans Mozilla</a>
</li><li> La <a href="es/Accueil">page d'accueil</a> pointe 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><a href="es/Cat%c3%a9gorie/Gecko">Catégorie:Gecko</a>
<a href="es/Cat%c3%a9gorie/D%c3%a9veloppement_inter-navigateur">Catégorie:Développement inter-navigateur</a>
<a href="es/Cat%c3%a9gorie/D%c3%a9veloppement_Web">Catégorie:Développement Web</a>
</p><p><span class="comment">Interwiki Languages Links</span>
</p>{{ wiki.languages( { "en": "en/Gecko_Compatibility_Handbook", "fr": "fr/Manuel_de_compatibilit\u00e9_Gecko" } ) }}
Revertir a esta revisión