Modos "Standards" versus "Quirks"
Los principales navegadores actuales están preparados para mostrar un archivo HTML en modo standards o quirks. Esto significa que se aplican distintas normas para la visualización del archivo. En un caso, según la interpretación del comportamiento esperado de acuerdo con las normas W3C; en el otro caso, según el comportamiento esperado de los navegadores más antiguos que no responden a las normas actuales.
En las últimas versiones de los principales navegadores, el modo standards se activa por la presencia de una declaración DOCTYPE. La ausencia de una declaración DOCTYPE puede dar lugar a diferentes resultados de visualización de un navegador a otro.
A continuación se muestra una captura de pantalla en la que se pueden ver algunas de estas diferencias.
Haga clic sobre las imágenes para ver las páginas HTML reales. Si las ve en Internet Explorer, observará el mismo efecto.
Ambas imágenes muestran dos páginas con exactamente el mismo etiquetado y estilo CSS, excepto por una cosa. La única diferencia respecto del original de los dos archivos es que el de la izquierda incluye una declaración DOCTYPE en la parte superior, y el otro, no. Un archivo con una declaración DOCTYPE adecuada se visualiza normalmente en modo standards en las versiones más recientes de la mayoría de los navegadores. Sin una declaración DOCTYPE, se visualiza en modo quirks.
Las diferencias visuales que se muestran arriba surgen de las siguientes variantes de implementación en un navegador como Internet Explorer:
-
En modo standards, la configuración del ancho del estilo CSS aplicado al div no absorbe el ancho establecido en las configuraciones de padding y bordes; sin embargo, esto sí sucede en el modo quirks y ese es el motivo por el que el cuadro más grande es más ancho en la imagen de la izquierda (standards).
-
En modo quirks, la tabla no ha heredado la configuración de tamaño de fuente del elemento body, por lo tanto, el texto se ve más grande.
La finalidad original de la declaración DOCTYPE es indicar la definición del lenguaje de etiquetado. A continuación se muestra el texto original con la declaración DOCTYPE incluida en la parte superior (resaltada en letra cursiva de color ).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHTML document</title>
<style type="text/css">
body { background: white; color: black; font-family: arial, sans-serif; font-size: 12px; }
p { font-size: 100%; }
h1 { font-size: 16px; }
div { margin: 20px; width: 170px; padding: 50px; border: 6px solid teal; }
table { border: 1px solid teal; }
</style>
</head>
<body>
<h1>Test file for Standards/Quirks</h1>
<div>
A div with CSS width:170px, margin:20px, padding:50px and border:6px.
</div>
<p>Text in a p element.</p>
<table>
<tr><td>Text in a table.</td></tr>
</table>
</body>
</html>
Frecuentemente se dice que los navegadores que alternan de esta forma entre modos standards y quirks realizan DOCTYPE switching.
En general, se recomienda ejecutar siempre las páginas en modo standards, es decir, incluir siempre una declaración DOCTYPE.
Declaraciones XML y DOCTYPE
Existe un aspecto del uso de declaraciones DOCTYPE que reviste una importancia crítica para las declaraciones de codificación de caracteres y para la correcta aplicación de estilos.
Como XHTML 1.0 se basa en XML, es posible incorporar una declaración XML al comienzo del etiquetado, aun si se ejecuta como HTML. Entonces, la parte superior del archivo anterior se vería así (la declaración XML aparece resaltada en letra cursiva de color rojo):
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
...
En navegadores como Internet Explorer 7, Firefox, Safari, Opera, Google Chrome y otros, una página ejecutada con una declaración DOCTYPE se visualizará en modo standards, con o sin declaración XML.
Sin embargo, con Internet Explorer 6, si antes de la declaración DOCTYPE aparece cualquier marcación que no sea byte-order mark (marca de orden de bytes), la página se visualizará en modo quirks.
Si los usuarios de Internet Explorer 6 aún constituyen una porción significativa del público al que está dirigido el contenido, esto puede representar un problema. Si lo que busca es asegurarse de que sus páginas se visualicen de la misma manera que en los restantes navegadores que cumplen las normas vigentes, deberá pensar cuidadosamente cómo resolver esta cuestión.
Desde ya que esto no representa inconveniente alguno si el documento no contiene conceptos que se puedan ver afectados por las diferencias entre los modos standards y quirks. De lo contrario, deberá incorporar formas alternativas al estilo CSS para resolver dichas diferencias, o bien omitir la declaración XML.
Tenga en cuenta que si decide omitir la declaración XML, debe elegir UTF-8 o UTF-16 como método de codificación para la página. (Para más información sobre los efectos en las declaraciones de codificación, consulte Declaración de codificación de caracteres en HTML.)