Doctype et ASP.net Ajax Extensions - attention au mode de rendu !
Saviez vous que les navigateurs possèdent deux modes de rendu ? le mode "strict" et le mode "quirks" ? Suivant le mode que le navigateur utilise, les styles CSS n'auront pas les mêmes effets. Comment les navigateurs choisissent leur mode de rendu ? C'est principalement en fonction du DOCTYPE du document, c'est à dire la norme HTML utilisé pour ce document.
Mais qu'est-ce qu'un DOCTYPE ? tout d'abord c'est la contraction de "Document Type Declaration" qu'on appelle aussi DTD, c'est une ligne à mettre en en-tête de toute vos pages HTML qui permet d'indiquer la norme HTML utilisée pour ce document.
D'ailleurs quelles sont les normes HTML disponibles ? En gros il existe deux cas : HTML et XHTML, composé en 3 modes : Strict, Transitional et Frameset. XHTML 1.0 n'est que la reformulation de HTML 4.01 avec la rigueur du XML, toutes les balises doivent être fermées, les noms des balises ainsi que les attributs doivent être écrit en minuscule etc...
On entend souvent que HTML = table et que XHTML = div + CSS, c'est faux ! on peut très bien utilisé des tableaux en XHTML. Par contre il est déconseillé d'utiliser les tableaux à des fins de présentation, en effet ceux ci servent à afficher des données tabulaire et non des éléments de présentation. La présentation c'est le role de CSS, c'est dans les feuilles de styles que vous définissez la couleur et la taille d'une balise h1, etc...
Comme je l'ai expliqué durant la session que j'ai co-animé avec Rédo lors des Techdays 2007, voici à quoi devrait ressembler une page bien formé :
La différence entre les modes Strict, Transitional et Frameset se situe au niveau de la présentation, en effet le but du mode Strict est de séparer nettement le contenu de la présentation, c'est à dire qu'on utilise plus les balises <font>, <center>, & co, tout passe par la feuille de styles CSS. Enfin le mode Frameset permet simplement d'utiliser des frames.
Si vous devez créer un nouveau site je vous conseille d'utiliser XHTML 1.0 Transitional qui donne assez de souplesse au niveau du choix des balises tout en gardant la rigueur du XML. Mais utiliser le mode transitional ne veut pas dire qu'il ne faut pas utiliser les feuilles de styles CSS, au contraire ! Vous devez séparer au maximum la présentation du contenu, et ainsi vous rapprochez de la philosophie de XHTML 1.0 Strict. Je parle bien de philosophie XHTML 1.0 Strict, car une page peut très bien être valide XHTML 1.0 Strict tout en utilisant les tableaux pour les présentations ... et ça c'est mal !
Pour info, toutes mes pages sont en XHTML 1.0 TR mais je pense qu'elles sont aussi valides XHTML 1.0 Strict ...
Voici les DTD correspondantes aux différents modes :
HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Pour en savoir plus sur les DTD je vous conseille ces articles : Le DOCTYPE qu'il vous faut ainsi que Choix d'une DTD: le doctype switching n'est pas pour nous et voici un article sur le choix du mode de rendu : Picking a Rendering Mode (en anglais)
Et Atlas dans tous ça ???
Et oui le titre de mon poste parle d'Atlas d'ASP.net Ajax Extensions, quel est le rapport entre les DTD et Atlas ? Récemment un collègue a voulu intégrer des onglets dans son projet en cours, je lui ai conseillé d'utiliser les Ajax Toolkit notamment le contrôle TabContainer et TabPanel lorsque je lui ai montré le code nécessaire il était ravi. Cinq minutes après (le temps qu'il télécharge les toolkits et l'intègre dans le site) il revient me voir et me dit "ils sont tout moches tes onglets ..." je regarde et effectivement il y avait un problème de rendu, ni une ni deux je regarde la source et je vois qu'il utilise un DOCTYPE HTML 4.01, je lui demande pourquoi et il me répond "c'est quoi un DOCTYPE ?" puis me dit que le site était à l'origine une solution Visual Studio 2003, qu'ils ont migré en .net 2.0 via l'assistant. Je lui met alors une DTD XHTML 1.0 Transitional on recharge la page est tout est correct.
Ce n'est pas la premiere fois que je vois des problèmes avec le mode de rendu Quirks et Atlas. Si vous utilisez ou envisagez d'utiliser Atlas je vous conseille vivement de vérfier votre DTD et agir en conséquence !