[Linux-bruxelles] mozilla.tlk.fr : Cr�er votre page web compatible avec Mozilla.
Osvaldo La Rosa
blinuxman at tuxfamily.org
Mer 11 Sep 11:49:01 CEST 2002
dernière mise à jour
Lundi 9 septembre 2002
Créer votre page web compatible avec Mozilla
[1]http://mazinger.technisys.com.ar/pruebas-nick/mozilla/docs/compat.h
tml.en
[2]Nicolás Lichtmaier
Ce qui suit est une liste de choses à examiner de sorte qu'une page
web soit compatible, non seulement avec Mozilla, mais avec n'importe
quel navigateur qui implémente les dernières normes.
Certains pourraient dire que créer une page compatible exige de faire
le double d'effort, et que ce n'en vaut pas la peine puisque "tout le
monde utilise Explorer". Par cet article je veux prouver que ce n'est
pas vrai. C'est pratiquement le même effort de faire une page
compatible avec Mozilla qu'une qui ne l'est pas.
Je tiens à préciser que ce texte n'a pas l'intention de vous dire
comment faire des pages compatibles avec le désuet Netscape 4. Ce
serait certainement une tâche beaucoup plus grande . Cet article
aspire à vous guider à supporter des navigateurs qui sont très
semblables dans le support de choses comme le dynamique HTML, car ce
n'est pas nécessaire d'avoir une page pour chaque sorte de navigateur,
il est préférable de partager le code en tenant compte des petites
différences. Les détails énumérés ici seront utilisés pour les
navigateurs tel que [3]Mozilla, [4]Netscape 6/7, [5]Konqueror,
[6]Opera, etc.
L'écriture de scripts. La grande majorité des problèmes de
compatibilité tombe dans cette catégorie. Et ce ne sont pas
généralement des problèmes avec le langage JavaScript lui-même, mais
avec le fait que les navigateurs représentent la page dans des objets
différents Une API différente, en quelque sorte.
Voyons maintenant quels sont les problèmes les plus communs...
Détections
Une manière commune de faire face aux différentes versions des
navigateurs est de détecter celui utilisé. C'est généralement une
mauvaise idée. Il est beaucoup plus recommandé, maintenable et facile
de juste détecter chaque fonctionnalité; désirée quand vous vous en
servez. De cette façon vous supporterez automatiquement tous les
navigateurs implémentant cette fonctionnalité, et limiterez les
chances de ne pas supporter un navigateur. Le Javascript est un
langage très dynamique qui permet de demander si un objet a une
certaine méthode ou propriété, ainsi il est simple de détecter les
choses correctement. Pour vérifier l'existence d'une méthode ou d'une
propriété dans d'un objet évaluer simplement l'expression dans un
contexte booléen. Par exemple, pour demander si la propriété prop
existe dans l'objet o on un peut écrire : if(o.prop) {.
Une autre erreur commune est de vérifier si le navigateur a quelque
chose et s'il ne l'a pas supposer qu'il a une autre chose. Le cas
typique implique document.layers (les désuets et épouvantables layers
de l'API inclut à Netscape 4). Beaucoup de pages supposent que si un
navigateur n'a pas document.all il est sûr de supposer qu'il supporte
l'autre interface. On ne peut pas compter dessus. C'est mieux de
directement tester ce que l'on va utiliser.
Localiser les objets
Explorer 4 a introduit ce qui s'appelle le dynamique HTML. Il est
utilisé pour modifier la structure de la page à partir du Javascript.
Comme dans cette API il y avait déjà beaucoup de choses dépendant du
document (tel que document.forms document.images etc. ), quelqu'un de
Microsoft a dit :
- Où mettons-nous TOUS LES AUTRES ?
- Je sais ! Dans document.all
Plus tard, [7]le W3C a créé une fonction pour cela :
document.getElementById(id). Elle est supporté dans Explorer depuis la
version 5. Si on veut continuer de supporter Explorer 4, il est alors
nécessaire de créer une petite fonction d'aide :
function findObject(id)
{
// si la fonction standard est disponible nous l'utiliserons
if(document.getElementById)
return document.getElementById(id);
// Explorer 4 ?
if(document.all)
return document.all[id];
// Très vieux navigateur. Nous faisons cela pour que object.style continue
// à fonctionner (mais sans faire n'importe quoi)
return { style: {} };
}
Maintenant la chose à faire est juste de remplacer partout de la
manière suivante : Là où vous voyez
document.all.theMenu.style.color="black " changez le par
findObject("theMenu").style.color="black" .
Parenthèses rondes ou carrées
Dans la représentation JavaScript d'une page web il y a plusieurs
tableaux. Et les tableaux sont censés être accédés avec[ ]. Microsoft
a le concept de collections dans ses langages de script, qui est une
variation du même sujet, mais ces collections sont consultée avec ().
Ils ont eu l'idée terrible de transférer ceci dans leur implémentation
de Javascript, ainsi document.forms(0) fonctionne dans Explorer, mais
pas dans les autres navigateurs. On doit toujours utiliser [],
c'est-à-dire : documents.forms[0].field.value et document.images[0].
Événements
Accès à l'objet événement
Au début, le traitement d'un événement était juste mettre un petit peu
de code quelque part dans l'attribut onclick . Netscape a étendu cela
pour que l'on puisse dans ce petit morceau de code, avoir accès à une
variable event. Dans un telle variable on peut trouver la plupart des
détails intéressants comme quelle clef a été pressée et d'autres
choses.
Quand Microsoft est entré en scène ils ont pensé :
- Dans quel objet cette variable event doit-elle être pour qu'elle
soit disponible dans le petit bout de code ?
- Mettons-la dans window, puisque tout ce qui est dans
l'omniprésent objet window est toujours dans la portée.
Et l'horrible window.event est née, qui allait devenir une sorte de
variable globale.
Ce window.event, en plus d'être une idée épouvantable, ne fait pas
partie du standard (heureusement). Donc le seul endroit fiable dont on
est certain d'avoir accès à l'événement est dans l'attribut on event.
À cette endroit il y a une variable appelé event. Si une fonction est
appelée, event doit être passé comme un paramètre. Exemple : <a
onmouseover="mouseOver(event) "...
Une utilisation légèrement plus avancée des événements consiste à
assigner des fonctions à certaines propriétés des objets que vous
voudriez surveiller, par exemple :
findObject("monLien").onmouseover=maFonction;. Dans ce cas le
mécanisme expliqué dans le paragraphe précédent n'est pas appliqué. À
la place, les navigateurs compatibles avec [8]les standards
d'événement du DOM passeront l'événement comme paramétre à la fonction
myFunction qui pourrait être défini de la manière suivante :
function myFunction(e)
{
// n'oublions pas le pauvre Explorer
// qui ne passe pas l'événement comme paramètre
if(!e)
e=window.event;
// reste du code
// ...
}
Employer l'objet événement
La section précédente a couvert les mécanismes nécessaires pour
obtenir l'objet qui représente un événement. Mais la question ne finit
pas là, puisque les propriétés définies dans Explorer ne sont pas les
mêmes que [9]les propriétés que les standards prescrivent
(c'est-à-dire [10]ceux implémentées par Mozilla ).
CAPTION: Différences dans les propriétés/méthodes de l'objet
événement.
dans Explorer Description Dans Mozilla (DOM standard)
srcElement L'élément qui a renvoyé l'événement. Le même, mais dans
Mozilla les noeuds de type texte peuvent également renvoyer des
événements, ainsi pour garder quelque chose qui fonctionne vous devrez
remonter dans l'arbre jusqu'à ce que vous trouviez le noeud (la
balise): d'un élément.
var node = e.srcElement;
while(node.nodeType != node.ELEMENT_NODE)
node = node.parentNode;
fromElement L'élément sur lequel la souris était avant. target si
l'élément est onmouseout, relatedTarget si l'élément est onmouseover.
toElement L'élément sur lequel la souris a été déplacé. relatedTarget
si l'élément est onmouseout, target si l'élément est onmouseover.
cancelBubble Assigner cette propriété à vrai empêche l'événement de
continuer à se propager vers le haut dans l'arbre du DOM. La méthode
stopPropagation() de l'événement doit être appelé.
returnValue Si cette propriété est assigné à faux on demande à
Explorer de ne pas exécuter l'action par défaut de l'événement (comme
suivre un lien). La méthode preventDefault() doit être appelée.
offsetX, offsetY Position de l'événement en rapport avec l'élément qui
l'a produit. layerX, layerY
Assortiment de différences dans l'arbre du DOM
Par l'arbre du DOM je veux parler de la structure hiérarchique des
objets que le navigateur utilise pour représenter les balises qui
composent la page. Il y a de petites différences qui peuvent affecter
la compatibilité d'une page.
CAPTION: Differences entre plusieurs propriétés et méthodes
Dans Explorer Description Dans Mozilla
window.screenLeft,window.screenTop Position de la fenêtre du
navigateur relativement à l'écran. window.screenX, window.screenY
contains(node) Cette méthode est disponible dans chaque élément, et
permet de demander si un autre noeud est un descendant de celui-ci.
Mozilla n'a pas de méthode équivalente, mais une méthode très simple
comme celle montrée ci-dessous peut être utilisée (cela fonctionne
dans Mozilla et Explorer) :
// Découvre si a est un ancêtre de b
function contains(a,b)
{
// remonte par les parents de b
// jusqu'à ce qeu nous en trouvions un
while(b && (a!=b) && (b!=null))
b = b.parentNode;
return a == b;
}
document.parentWindow Cela donne la fenêtre dans laquelle se trouve le
document. C'est une fonction la plupart du temps non pertinente qui
n'existe pas dans Mozilla. Elle est non pertinente parce que l'objet
window est disponible partout. Elle pourrait présenter un interêts
dans des pages utilisant des cadres, mais je ne pense pas que
l'abscence de cette propriété rende quoi que ce soit d'imposible.
myForm Accéde à un formulaire défini par <form name="myForm"> Vous
devez employer document.myForm
innerText Remplace le contenu de l'élément avec le texte indiqué. Il
n'y a aucun équivalent dans Mozilla, mais vous pouvez utiliser
innerHTML à la place (soyez sûr que tous les '<' du texte soit
remplacés par le '<'). Ni l'un ni l'autre ne sont des propriétés
standards du DOM. La manière standard est de créer manuellement les
noeuds avec document.createTextNode().
Bibliographie
* [11]Specifications du DOM "niveau 2"
* [12]Emulation d'IE dans Mozilla
* [13]Référence du DOM de Gecko (Mozilla)
* [14]MSDN
[15]Accueil
[16]Organisation
[17]Projets
[18]FAQ
[19]Articles
[20]Documentations
[21]Photos d'écran
[22]DHTML
[23]Liens
[24]Splash
[25]Contact
[26]Mozilla
[27]Galeon
[28]TLK Logo
References
Visible links
1. http://mazinger.technisys.com.ar/pruebas-nick/mozilla/docs/compat.html.en
2. mailto:nick at technisys.com.ar
3. http://www.mozilla.org/
4. http://www.netscape.fr/telechargement/
5. http://www.konqueror.org/konq-browser.html
6. http://www.opera.com/
7. http://www.w3.org/
8. http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/
9. http://www.w3.org/TR/DOM-Level-2-Events/events.html
10. http://www.mozilla.org/docs/dom/domref/dom_event_ref.html
11. http://www.w3.org/DOM/DOMTR#dom2
12. http://webfx.nu/dhtml/ieemu/
13. http://www.mozilla.org/docs/dom/domref/
14. http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp
15. http://mozilla.tlk.fr/
16. http://mozilla.tlk.fr/organisation.php
17. http://mozilla.tlk.fr/projets.php
18. http://mozilla.tlk.fr/faq.php
19. http://mozilla.tlk.fr/articles.php
20. http://mozilla.tlk.fr/doc.php
21. http://mozilla.tlk.fr/photos.php
22. http://mozilla.tlk.fr/dhtml.php
23. http://mozilla.tlk.fr/liens.php
24. http://mozilla.tlk.fr/splash.php
25. http://mozilla.tlk.fr/contact.php
26. http://mozilla.org/releases
27. http://galeon.sourceforge.net/
28. http://www.tlk.fr/
Hidden links:
29. http://mozilla.tlk.fr/
Plus d'informations sur la liste de diffusion Linux-bruxelles