> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> HTML / CSS

> Faire un site compatible IE et FF

> Introduction

> Lecture du tutoriel

Introduction

Par

Sébastien de la Marck (Thunderseb)

Mise à jour : 25/01/2009

1 531 visites depuis 7 jours, dont 287 sur ce chapitre classé 85/786

Nous allons parler ici de la façon de coder, ainsi que des problèmes fondamentaux que rencontre Trident, le moteur de rendu d'Internet Explorer 6, face à Gecko, le moteur de rendu des navigateurs du projet Mozilla (Firefox, Flock, Netscape, SeaMonkey et Mozilla).

Retour en haut

Sommaire du chapitre :

Comment bien coder
Attention au Model Box
Le Doctype Switching

Retour en haut

Comment bien coder

Le principal problème n'est pas IE, mais la manière qu'ont certains zéros dans la façon de coder un site Web. En effet, il est d'usage de coder son site, et de visualiser sa création au moyen de Firefox qui, dit-on, respecte très bien les standards (ça, ça reste une façon de voir

). Une fois le site fini, on teste sous IE. Et c'est là qu'apparaît un problème : c'est souvent n'importe quoi (portenawak pour les CSeurs). Et comme le site est fini, il n'est généralement pas facile de cibler la ou les erreurs et ainsi de pouvoir y remédier.

Ce que je conseille fortement, c'est de toujours prendre, pour commencer, un modèle de mise en page de base, provenant du site bien connu qu'est Alsacréations, ici. Ces modèles sont compatibles IE et FF et bien codés. A partir de ces modèles, vous allez pouvoir créer votre site Web sans avoir de réels problèmes.

Pour rende son site compatible IE et FF, il est important de visualiser très régulièrement son site avec chacun des deux navigateurs. Généralement, avec Firefox, vous n'aurez pas de problèmes. Mais avec Internet Explorer, c'est une autre histoire ! Grâce à cette technique de visualisation fréquente, vous allez pouvoir cerner les problèmes, et ainsi les résoudre efficacement, avec les méthodes que je reprends ci-dessous :

les instructions conditionnelles IE pour le code HTML
la technique des !important pour le code CSS
les hacks CSS
la gestion de la pseudo-classe hover
la gestion des images PNG 24 bits
d'autres trucs plus secondaires

Gabarits XHTML

Un bon petit truc

Je viens de découvrir récemment une extension bien pratique pour Firefox : IE Tab.

Cette extension permet d'afficher une page Web dans un onglet de Firefox, en utilisant le moteur de rendu d'Internet Explorer. L'utilité de cette extension est que vous ne devez ouvrir qu'un navigateur, tout en testant votre page avec 2 navigateurs

Mon but n'est pas de vous expliquer comment l'utiliser, je vous dis juste que cela existe, et que ça marche assez bien. Cela dit, vous n'êtes pas obligé de l'utiliser.

Faites attention que cette extension ne fait pas qu'utiliser le moteur de rendu d'IE, elle utilise complètement IE, avec les petits problèmes de sécurité que cela entraîne ! Mais en contre partie, vous pouvez aller sur Win Update avec Firefox :lol:

Voici la page de l'auteur, sur Mozdev.org, en anglais (mais l'extension est disponible en Français) : Ici

Retour en haut

Attention au Model Box

En fait, le principal problème d'IE vient de son calcul des dimensions. Le calcul des dimensions s'appelle le Box Model (ou Model Box, ou encore Modèle de boîte). Actuellement, il existe 2 Box Model : le modèle dit Standard, recommandé par le W3C et le modèle de Microsoft.

Ces 2 modèles diffèrent dans le calcul des dimensions des éléments. Pour rappel voici une représentation d'un élément :

Explication des 2 Box Model

Si nous nous basons sur le modèle W3C, la largeur totale d'un élément est égale à :

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

En ce qui concerne le modèle de Microsoft, la largeur totale est égale au contenu du bloc (width). Ce qui veut dire que les margin et les padding sont inclus à l'intérieur même de l'espace réservé au contenu.

Par exemple, un DIV se voit attribuer les propriétés suivantes :

Code : CSS

margin: 10px;
border: 1px; 
padding: 5px;
width: 200px;

D'après le Model Box du W3C, la largeur totale du bloc sera : 10+1+5+200+5+1+10 = 232 pixels.
Et d'après le modèle de Microsoft, la largeur totale sera : 1+200+1 = 202. Les largeurs des margin et padding ne sont donc pas prises en compte. Un décalage de 30 pixels sera donc visible.

Les versions d'Internet Explorer

Internet Explorer 5.x (5.1 et 5.5) ne connaît que le modèle de boîte de Microsoft. IE 6, quand à lui intègre les 2 modèles. En présence d'un Doctype valide, il appliquera le modèle du W3C. S'il n'y a pas de Doctype, le modèle Microsoft sera utilisé, pour permettre la compatibilité avec les sites ayant été construit à l'époque d'Internet Explorer 5.x. C'est le Doctype Switching (voir partie suivante).

Si un élément (un commentaire HTML ou un prologue XML) est présent avant le Doctype, Internet Explorer utilisera le Model Box de Microsoft. Ce problème est corrigé dans la version 7.

La version 7 d'IE passe toujours en Model Box Microsoft si aucun doctype n'est présent, toujours pour maximiser la rétrocompatibilité.

Voici un exemple en code. Celui-ci est tiré de l'article d'Openweb.

Code : CSS

.jaune {
        background-color: #ffff00;
        width: 300px;
        padding: 0;
        border: 0;
}
.vert {
        background-color: #00ff00;
        width: 250px;
        padding: 0 20px;
        border-left: 5px solid #00ff00;
        border-right: 5px solid #00ff00; 
}

Code : HTML

1 2	<div class="jaune">Box 1</div> <div class="vert">Box 2</div>

Avec un navigateur non-IE, les 2 DIV sont de taille identique (300px). Avec Internet Explorer, s'il passe en mode modèle boîte Microsoft, le DIV vert sera plus petit que le jaune.

Test du code :

Mais, même en respectant tout cela, et en passant en modèle Standard, il y a encore quelques différences. Pourquoi ?

Le modèle box standard est bien appliqué, mais Internet Explorer a tendance à interpréter bizarrement les marges, les paddings et autres, et c'est pour cela qu'il subsiste parfois quelques petits décalages pas bien graves.

Pour régler ce problème, nous utiliserons les instructions conditionnelles ou la règle des !important.

Retour en haut

Le Doctype Switching

Netscape et IE 4... C´est vieux tout cela. Le Doctype n´existait pas encore (enfin si, mais il n'était pas utilisé) et on n´entendait pas parler de CSS (oui, on sait mettre en page sans CSS :lol:

). Les standards du W3C n´étaient alors que moyennement suivi pas les 2 navigateurs leaders. Puis un jour, IE Mac apparu. Ce fut une version d´Internet Explorer pour Mac, mais celui-ci n´exploitait pas le même moteur de rendu que l´IE pour Windows (je parle à l´imparfait, mais actuellement, ces 2 moteurs sont toujours différents : Tasman pour IE Mac et Trident pour IE Windows). En effet, c´était un moteur de rendu respectant beaucoup mieux les standards (de l'époque). Mais, les sites n´étaient pas compatibles avec ces standards. Alors, que faire ?

C´est pour cela que le mode Quirks a été développé. Globalement, en la non présence d´un Doctype, le navigateur passe en mode Quirks. Ce mode a pour but d´interpréter au mieux les anciennes pages Web afin de bien les afficher. Tous les navigateurs possèdent ce mode, mais il ne s´active pas de la même façon, et en particulier avec IE6.

Par exemple, Voici une page :

Code : HTML

<html>
<head>
<title>Test</title>
</head>
<body>
<p>Ceci est un test !</p>
</body>
</html>

Il n´y a pas de Doctype. Mais en quelle langue est donc rédigée cette page ?

Le navigateur ne le sait pas non plus. Il va donc passer en mode Quirks.

Schéma basique : pas de DTD (ou DTD incomplète) -> Mode Quirks.

Et le problème d´IE, c'est quoi ?

Normalement on ne peut rien mettre avant le Doctype. Mais en XHTML, on peut mettre ce que l'on appelle un prologue XML. Comme ceci :

Code : HTML

<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Test</title>
</head>
<body>
</body>
</html>

Dans ce cas, seul IE passe en mode Quirks (certaines anciennes versions d'Opera aussi il me semble, mais c'est à vérifier). De même si l'on met un commentaire HTML (on ne dois pas ce de toutes façons

), le mode Quirks est déclenché.

Bien évidemment, on peut y placer du code coté serveur (PHP, ASP, CFM, tout ce que vous voulez :lol:

), comme ceci :

Code : HTML

<? header("Content-Type: text/html; charset= iso-8859-1"); ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Test</title>
</head>
<body>
</body>
</html>

Donc, au final, IE va afficher une belle page XHTML en mode Netscape 4, ce qui peut générer de beaux bogues !

Voici un exemple : un design est réalisé avec un commentaire avant le Doctype. Le site est compatible IE/FF, mais passe évidemment IE en mode Quirks :

Voilà ce qui se passe si on enlève le commentaire avant le Doctype (IE repasse donc en mode de rendu Standard) :

On ne sait rien y faire. Il suffit de ne rien mettre avant la DTD.

Rien que pour vous, voici quelques liens :

Doctype switching de Mozilla : http://developer.mozilla.org/en/docs/M [...] TYPE_sniffing
Doctype switching d'IE : http://msdn.microsoft.com/library/defa [...] ancements.asp
Doctype switching d'Opera : http://www.opera.com/docs/specs/doctype/
Un tableau général (vers le milieu de la page) : http://hsivonen.iki.fi/doctype/
Article d'Alsacréation : http://www.alsacreations.com/article/l [...] our-nous.html
Article de DarkMag : http://darkmag.net/darkBlog/index.php? [...] is-not-enough

Retour en haut

Voilà, vous savez tout ! On peut passer à la suite.

Retour en haut

Retour en haut

11 commentaires pour "Introduction"

Note moyenne : 3.58 / 4 (26 votes)

Pseudo	Commentaire
darko	# Posté le 24/07/2007 à 10:54:41
	merci pour le temps que tu y a passé , ça valalit le coup serieux!! bravo, merci! tu es dans me favoris pour mes différentes réalisations! encore barvo, un tuto claire, relativement abordable, bravo darko
[Toxik]	# Posté le 22/09/2007 à 11:38:41
Peace & bouffe Ville : Pré st gervais Pays : France métropolitaine	Merci, ça aide vraiment, surtout que c'est vraiment galère ces histoires des navigateurs qui interprêtent différements... On devrait laisser qu'un seul navigateur (qui-plus-est : FF ) Arêretz de corie qu'éricre snas fatue est iislilbe ! C'ets tuot à fiat posislbe ed se crmprendoe n'ets-ce psa.
smilz	# Posté le 03/09/2008 à 21:52:39
La vie est une blague Blog Twitter close	Je ne comprends pas quelque chose : Si le xHTML est du XML, pourquoi est-il interdit de mettre des commentaires avant le <html> mais après le prologue ? les commentaires doivent se situés dans la racine ???
pong123	# Posté le 12/08/2010 à 09:23:04
	Merci pour toutes ces explications.
claude101141	# Posté le 18/06/2011 à 06:45:45
Ville : Paris Pays : France métropolitaine	Bonjour, merci pour cet aide précieuse en particulier pour un débutant; c'est comme apprendre à marcher en tenant bien sur ses 2 jambes. Juste un petit problème les liens donnés vers Alsacreations au début du 1er chapitre 'comment bien coder' ne marchent pas! snif! as-tu une idée où les trouver, je vais de toute façons faire une recherche de mon coté sur google et si je trouve je te les refilerai.Claide