Maison > Article > interface Web > Introduction à DOCTYPE et au rendu du navigateur

Introduction à DOCTYPE et au rendu du navigateur

巴扎黑original: 2017-08-09 15:44:101938parcourir

La naissance du DOCTYPE

DOCTYPE, également connu sous le nom de Déclaration de type de document (Déclaration de type de document, abréviation DTD). Normalement, DOCTYPE se trouve au tout début d'un document HTML, avant la balise de début de l'élément HTML racine. Parce que le navigateur doit déterminer le type du document actuel avant d'analyser le corps du document HTML pour déterminer le mode de rendu qu'il doit adopter. Différents modes de rendu affecteront l'analyse du code CSS et même des scripts JavaScript par le navigateur. Surtout dans les navigateurs de la série IE, le mode de rendu de la page HTML déterminé par DOCTYPE est crucial.

Tout d'abord, voyons comment la page sera rendue et analysée dans chaque navigateur lorsqu'un document HTML n'a pas de DOCTYPE. Nous essayons de générer un document HTML sans DOCTYPE en haut :

<html>
<head></head>
<body>
<script>
document.write(document.compatMode);
</script>
</body>
</html>

Cette page renvoie des résultats cohérents dans tous les navigateurs, avec "BackCompat" imprimé sur la page. La propriété document.compatMode a été créée à l'origine par Microsoft dans IE. Il s'agit d'une propriété en lecture seule qui renvoie une chaîne. Il n'y a que deux valeurs de retour possibles :

BackCompat : mode compatible avec les normes. (Le mode conforme aux normes) n'est pas activé ;
CSS1Compat : le mode conforme aux normes est activé.

En fait, le mode dit de compatibilité standard n'est pas activé ici, qui est le "mode mixte" (également appelé mode Quirks), et le mode de compatibilité standard est activé, qui est le mode « mode standard » (également appelé mode strict, mode Standards ou mode Strict). Par conséquent, dans l'exemple de test précédent, le document HTML sans DOCTYPE sera rendu et analysé en mode mixte dans tous les navigateurs.

Remarque : document.compatMode est introduit dans MSDN : propriété compatMode

Pourquoi les navigateurs effectuent-ils un tel "changement" ? IE6, le plus ancien des navigateurs de la série IE développés par Microsoft, est né avec Windows XP. Par rapport à la version précédente d'IE5.5, IE6 présente de nombreuses améliorations majeures. Le plus grand changement concernant le rendu des pages est qu'IE6 prend en charge certaines fonctionnalités de CSS1. Par exemple, lors de la définition de la largeur et de la hauteur d'un élément au niveau du bloc, cela n'affecte plus la périphérie de la bordure, mais uniquement le contenu de l'élément, comme décrit dans la spécification du W3C. C'est très différent d'IE5.5. Afin de garantir que les pages développées à la fin des années 1990 sur la base de versions antérieures à IE6 puissent être affichées normalement, c'est-à-dire pour garantir que le navigateur dispose d'une compatibilité ascendante, ce « commutateur » est né. DOCTYPE est utilisé pour déterminer dans quel mode le navigateur doit fonctionner, c'est-à-dire s'il s'agit de IE6 ou IE5.5. Ainsi, il ressort également de la valeur de chaîne renvoyée par document.compatMode que BackCompat représente la compatibilité descendante (c'est-à-dire IE5.5) et CSS1Compat représente la compatibilité avec la spécification CSS1 (c'est-à-dire IE6). En conséquence, le mode de travail du navigateur est divisé en mode mixte et mode standard.

Il convient de noter que le numéro de version d'IE a été mis à niveau de 6.0 à l'actuel 9.0, mais la mise à niveau se fait uniquement en mode standard. Pour le mode mixte, le numéro de version d'IE est définitivement gelé à 5.5, ce qui représente également un énorme sacrifice pour la compatibilité ascendante. En d'autres termes, même si nous utilisons le dernier et le plus avancé IE9, si nous n'écrivons pas de DOCTYPE ou n'utilisons pas un DOCTYPE capable de déclencher le mode mixte, alors le navigateur auquel nous sommes confrontés est toujours équivalent à l'antique IE5.5 de plus de il y a dix ans. Il n'y a pas une si grande différence entre le mode mixte et le mode standard des autres navigateurs comme dans IE.

Remarque : améliorations CSS dans Internet Explorer 6 Très similaires, mais présentent de petites différences. Cela se reflète principalement dans la différence de rendu de la disposition verticale dans les cellules du tableau. À partir d'IE8, Firefox, Chrome, Safari et Opera 7.5, le mode standard de ces navigateurs suit plus strictement la spécification CSS2.1, de sorte que le mode standard précédent, qui ne semble actuellement pas être "standard", a reçu le " Nom approximativement du mode standard. Cependant, dans les versions antérieures d'IE6, IE7 et Opera avant 7.5, les navigateurs ne pouvaient pas suivre strictement la spécification CSS2.1, il n'y avait donc pas de mode standard approximatif pour eux. On peut également comprendre que leur mode standard approximatif est le mode standard. .

Jusqu'à présent, vous pouvez constater que chaque navigateur comprend principalement trois modes. Dans le brouillon HTML5, la définition des modèles est plus clairement définie :

传统名称	HTML5 草案名称	document.compatMode 返回值
standards mode 或者 strict mode	no-quirks mode	CSS1Compat
almost standards mode	limited-quirks mode	CSS1Compat
quirks mode	quirks mode	BackCompat

注：HTML5 草案关于 compatMode 的介绍：3.1.3 Resource metadata management

DOCTYPE 的选择

工作模式简介

浏览器的工作模式常被称为“渲染模式”。实际上浏览器不同的工作模式不仅对渲染有影响，对代码的解析以及脚本的行为也同样有影响。

从更广泛的角度来看，浏览器的工作模式的差异不仅体现在处理 HTML 页面的时候，处理 XML 及一些非 WEB 内容时也有模式上的差异，但本文仅讨论浏览器在处理 HTML 页面时工作模式。¹

注：

关于浏览器的工作模式的更多信息，请参考 Activating Browser Modes with Doctype。

工作模式的来源及变迁

不使用 DOCTYPE 一定会使 HTML 文档处于混杂模式，然而使用了 DOCTYPE，也不一定就能够使文档在所有浏览器中均处于标准模式。DOCTYPE 本身不就是一个“开关”吗？为何在有 DOCTYPE 的 HTML 文档之上仍然还会出现混杂模式？这个和以下条件有关：

使用了本身就会使浏览器进入混杂模式的古老的甚至是错误的 DOCTYPE；
在 DOCTYPE 之前出现了其他内容，如注释，甚至是 HTML 标签。

我们先说第一个条件。HTML 历史悠久，仅正确的 HTML 类型的 DOCTYPE 就有很多种。先看一个标准的 DOCTYPE：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

上面的 DOCTYPE 包含 6 部分：

字符串“
根元素通用标识符“HTML”
字符串“PUBLIC”
被引号括起来的公共标识符（publicId）“-//W3C//DTD HTML 4.01//EN”
被引号括起来的系统标识符（systemId）“http://www.w3.org/TR/html4/strict.dtd”
字符串“>”

L'identifiant universel de l'élément racine, l'identifiant public et l'identifiant système peuvent être obtenus en appelant l'interface DOM via des scripts, correspondant à document.doctype.name, document.doctype.publicId et document.doctype respectivement. systemId (non pris en charge par IE6 IE7).

Les trois parties ci-dessus peuvent être différentes selon les DOCTYPE. Certains DOCTYPE en contiennent certaines parties. Comment choisir parmi ces nombreux DOCTYPE ?

En fait, le navigateur ne prend en compte que les parties 1, 2, 4 et 6 des 6 parties ci-dessus lors de la détection de DOCTYPE et n'est pas sensible à la casse. Dans chaque implémentation du noyau de navigateur, il existe presque toujours une liste pour enregistrer les modèles correspondant à ces DOCTYPEs courants, comme le fichier DocTypeStrings.gperf dans le noyau WebKit. La différence dans les modes de déclenchement dans la liste de chaque navigateur entraîne le phénomène selon lequel certains DOCTYPE déclenchent différents modes dans différents navigateurs, comme . Pour les DOCTYPEs en dehors de la liste, les différences de traitement entre les navigateurs déclencheront également des modes différents. Par exemple, certains navigateurs peuvent traiter les DOCTYPEs en dehors de la liste comme un mode mixte, tandis que d'autres les traiteront comme un modèle standard.

Ainsi, lorsque nous choisissons DOCTYPE, la première chose dont nous nous assurons est que nous voulons que le document HTML utilise le mode standard.

Si vous recherchez la simplicité, le DOCTYPE de HTML5 est le meilleur choix : . Tous les navigateurs grand public utiliseront cette vue DOCTYPE la plus courte qui ne contient que les parties 1, 2 et 6. mode standard.

Si vous recherchez la stabilité, l'ancien DOCTYPE de HTML4.01 Strict est également un bon choix : , le mode qu'il déclenche dans tous les principaux navigateurs est exactement le même que le HTML5 ci-dessus.

Parfois, nous sommes dans des situations particulières et souhaitons que le navigateur soit dans un mode proche du standard, alors vous pouvez choisir : .

Remarque : concernant les modes de fonctionnement des DTD et du navigateur dans Firefox : le reniflage de DOCTYPE de Mozilla

Contenu qui ne peut pas apparaître avant DOCTYPE

Comme mentionné précédemment, DOCTYPE sert de décideur pour le navigateur Le mode "switch" adopté par le document HTML doit apparaître au début du document HTML. Mais parfois, pour certaines raisons, certains auteurs empêchent certains contenus avant DOCTYPE, qui peuvent être des informations sorties par le serveur. Cela rendra le navigateur extrêmement "confus". La première chose qu'il voit n'est pas DOCTYPE, il peut donc penser que la page n'a pas de DOCTYPE et le mode mixte peut être déclenché. Cependant, en réalité, chaque navigateur gère cela différemment. Nous classons les contenus pouvant apparaître avant DOCTYPE, ils comprennent :

Texte normal
Balise HTML
Commentaires HTML
Déclaration XML
Commentaire conditionnel IE

Pour le texte normal et les balises HTML, tous les navigateurs passent en mode mixte est activé, ce qui est facile à comprendre. Vous pouvez voir le texte du document HTML suspecté et il est peu probable que le navigateur retrouve l'emplacement du DOCTYPE.

Pour les commentaires HTML et les déclarations XML, ils sont quelque peu différents du texte ordinaire et des balises HTML ci-dessus. Ils ne seront pas affichés sur la page, c'est-à-dire qu'ils ne seront pas visibles. À l'heure actuelle, certains navigateurs semblent très "intelligents", et les navigateurs non-IE ignoreront leur existence et DOCTYPE sera analysé correctement. Cependant, dans IE6, les déclarations XML avant DOCTYPE feront passer la page en mode promiscuité, et tous les IE feront passer les pages contenant des commentaires HTML avant DOCTYPE en mode promiscuité. Lorsque cela se produit dans IE9, le navigateur affiche une invite dans la console : "HTML1113 : le mode Document redémarré depuis IE9 Standard vers Quirks". », il semble que Microsoft n'ait pas l'intention de « suivre la tendance » à ce stade. Cela peut également inciter les auteurs à essayer d'éviter d'ajouter d'autres contenus avant DOCTYPE

Certains auteurs sont très intelligents. avant DOCTYPE Il pourrait écrire :

< ![endif]>

Ce qui précède Les commentaires conditionnels d'IE peuvent être complètement ignorés dans les navigateurs non-IE et peuvent être interprétés comme des commentaires HTML ordinaires, mais ils disparaissent tous dans IE. Parce que c'est le rôle des commentaires conditionnels d'IE. C'est donc actuellement une manière plus appropriée d'écrire quelque chose avant. DOCTYPE et assurez-vous que tous les navigateurs sont en mode standard, mais nous vous déconseillons toujours d'ajouter du contenu non vide avant DOCTYPE

Remarque : À propos des commentaires conditionnels d'IE : À propos des commentaires conditionnels

Suggestions<.>

Grâce à l'examen et à l'analyse historiques ci-dessus, nous avons vu le rôle clé de DOCTYPE dans les navigateurs grand public actuels. En même temps, nous avons également découvert le meilleur DOCTYPE capable de déclencher le mode standards de chaque navigateur. minimisera le risque de problèmes de compatibilité entre les différents navigateurs, sélectionnera le bon DOCTYPE et garantira que le DOCTYPE se trouve au début absolu du document HTML. C'est la clé pour que DOCTYPE joue son bon rôle

Environnement de test

操作系统版本:	Windows 7 Ultimate build 7600
浏览器版本:	IE6 IE7 IE8 IE9 Firefox 4.0.1 Chrome 12.0.742.100 Safari 5.0.5 Opera 11.11
测试页面:
本文更新时间:	2011-06-17

Mots clés

Compatibilité du navigateur Mode de rendu Mode standard Mode mixte DOCTYPE DTD

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumer les opérations temporelles courantes de phonegapArticle suivant：Résumer les opérations temporelles courantes de phonegap

Articles Liés

Voir plus