Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

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é :

PageWeb.png

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 !

Posted: jeudi 22 février 2007 18:28 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

lal a dit :

Bonjour,

j'utilise dans ma page le controle treview d'Infragistics et le controle CollapsiblePanelExtender.

Je n'arrive pas à avoir un rendu correct pour les deux conytroles selon que j'utilise le doctype associé à chaque controle.

CollapsiblePanelExtender utilise :

Y a -t- il une solution pour faire focntionner ces deux controles en même temps?

Merci

# mai 21, 2007 23:04
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01

- SharePoint Online: Script PowerShell pour supprimer une colonne dans tous les sites d’une collection par Blog Technique de Romelard Fabrice le 11-27-2018, 18:01