Qu’est-ce que le Doctype ?
Le doctype est la balise déclarant le type du document qui précède chaque page HTML. Par exemple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Son utilité
La présence du Doctype est obligatoire selon les normes du W3C. Si vous souhaitez que votre page puisse être valider, il faudra l’inclure. En même temps, selon le choix du langage (xhtml, html4, html5) le validateur s’ajustera et corrigera votre document en conséquence.
Jusque là, son utilité ne semble pas primordiale. Cependant, si vous n’incluez pas de Doctype, vous risquez d’encourir de nombreux problème d’affichage sous Internet Explorer puisque son omission fait passer ce dernier en mode “Quirks”.
Qu’est-ce que le mode Quirks ?
Le modèle des boites est la norme du W3C (suivie par tous les navigateurs) qui définie la manière dont sont déclarés et appliqués différentes propriétés CSS (notamment margin, padding, border, width et height).
Pour ainsi dire, tout ce qui attrait au dimensionnement de ces dernières.
Selon ces normes, les valeurs CSS de width et de height définissent respectivement la largeur et la hauteur du bloc de contenu. À cette taille s’ajoutera l’espacement entre le contenu et la bordure (padding), la bordure (border) et la marge (margin).
Ainsi, selon les règles CSS suivantes:
div {
width: 200px;
padding: 10px;
border: 1px solid #000;
}
La largeur totale de div sera de 222px (200px + (20px * 2) + (1px * 2)).
Le modèle de boîte est généralement peu connu des débutants en CSS et est souvent la cause des blocs flottants s’empilant au lieux de se suivre sur une même ligne. Ces derniers croyant que le padding et la bordure sont comprises au sein de la largeur définie.
Le mode Quirks (uniquement sous IE) quant à lui modifiera le modèle des boîtes. Sous ce mode, IE incluera le padding et la bordure à la valeur de with. Et ainsi, le code précédent génèrera une largeur totale de seulement 200px puisque la largeur du padding et de la bordure seront incluse au sein de la largeur du bloc.
Ceci semble pour plusieurs être plus intuitif, mais est un comportement actuellement strictement réservé à IE.
Nouvelle propriété pour le modèle des boîtes en CSS 3
La troisième version des CSS actuellement en cours de réalisation prévoit une valeur CSS spécifique qui permettra aux intégrateurs de spécifier le modèle des boîtes qu’ils souhaitent utiliser. Ainsi, le mode quirks pourra être utilisé via cette propriété :
div {
box-sizing: border-box /* valeurs possibles: content-box | border-box | padding-box */
}
Actuellement cette propriété est comprise par Mozilla, Webkit, Opera 9 et IE 8. Mais pour l’instant, notamment dû à la présence des anciennes versions de ces navigateurs, il sera mieux dans la majorité des cas de se contenter du modèle de boîte original.
Annexe: Différents Doctype
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
xHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5 (utilisable aujourd’hui sans aucun problème)
<!DOCTYPE html>