¿Qué pasa en el modo chapuzas (Quirks Mode)?

El modo chapuzas (Quirks Mode) es un modo en que los navegadores entran cuando una página no tiene definido un DOCTYPE o pese a tenerlo no cumplen el estándar referente a ese DOCTYPE. En "What happens in Quirks Mode?" un artículo de Jukka "Yucca" Korpela explican los comportamientos más comunes que tienen los navegadores al entrar en dicho modo aparte del habitual procesado de las páginas más lento.

Paso a traducir los puntos (a la derecha de esos puntos hay una explicación detallada del modo chapuzas).

¿Qué pasa en el modo chapuzas (Quirks Mode)?

En modo chapuzas, se ha observado que el comportamiento de los navegadores funciona de distintas formas, pero no todos los navegadores muestran estas características:

• El modelo de caja es incorrecto (diferente de la especificación CSS, aunque intuitivamente más natural). Esto significa que las propiedades width y height especifican las dimensiones de todos los elementos de la caja, incluyendo el borde y el padding y no sólo el contenido de los elementos.

• Las dimensiones de los elementos en línea no reemplazados (por defecto span) son afectados por las propiedades width y height (mientras que en la especificación CSS son ignorados).

• El alto (height) de las tablas es afectado por un atributo height no estándar en el elemento table.

• El Overflow es tratado por expandir una caja. Cuando el contenido de un elemento no cabe en las dimensiones especificadas para ello (explícitamente o no), entonces overflow: visible (el por defecto) debería hacer que el contenido aparezca incluso si las dimensiones de la caja están especificadas. En quirks mode las dimensiones cambian, esto se puede comprobar fácilmente si por ejemplo la caja tiene un color o un borde.

• El padding para una imagen es ignorado cuando es especificado en el CSS para el elemento img o el elemento input type="image".

• El margen horizontal por defecto para una imagen "flotante" es de tres pixels (en lugar de cero). Esto es, un elemento img con el atributo align="left" o align="right" o con las reglas equivalentes en CSS (float: left o float:right) aplicados, el navegador se comporta como si el elemento img tuviera el atributo hspace="3" (o su equivalente margin-left / margin-right con un valor de 3px).

  Esto se aplica a Internet Explorer, en otros navegadores el modo quirks puede provocar un margen extra pero sólo en uno de los lados de la imagen y su ancho puede ser de 2 pixeles en lugar de 3.

• El alineamiento vertical de una imagen bajo ciertas condiciones llega hasta el pie de la caja en lugar de la "baseline" del texto. Esto pasa cuando la imagen es el único contenido en un elemento, típicamente una celda de una tabla.

  Esto significa que una imagen en una celda de una tabla está por defecto abajo del todo de la celda en modo quirks (lo que a menudo es lo que el autor quiere), mientras que en el modo estándar hay unos pocos pixels de espacio debajo de la imagen (a menos que pongamos alguna regla tipo vertical-align: bottom para el elemento img).

• El centrado de un bloque en CSS usando por ejemplo margin: 0 auto no funciona.

• Las propiedades de las fuentes no son heredadas de body o otros elementos como las tablas. Esto pasa especialmente para font-size pero puede pasar con font face, color y line-height. Por ejemplo si especificamos:

   :::css
   body { font-family: Arial; }
  

  Es posible que la fuente dentro de una tabla siga siendo la usada por defecto del navegador.

• En el tamaño de la fuente para una celda de una tabla, un valor especificado en porcentaje (ej: 80%) es interpretado como relativo al tamaño básico de la fuente del navegador y no al tamaño especificado en su elemento padre (la fila ("row") de la columna) tal y como dicen las especificaciones CSS.

• Las palabras clave del tamaño de la fuente son interpretadas incorrectamente así pues medium es mayor que el tamaño básico del navegador y small equivale al tamaño base. Ocurre de forma similar en todo el resto de la escala: xx-small, x-small, small, large, x-large y xx-large son interpretados sistemáticamente mal; cada valor es interpretado como uno más grande de lo que debería.

• Los valores de las propiedades mal formados a menudo son interpretados basandose en conjeturas. Por ejemplo margin: 10 es interpretado como margin: 10px y color: ffffff como color: #ffffff.

  Esto trasgrede las reglas principales a la hora de procesar valores incorrectos: si un valor es incorrecto por la sintaxis debe ser ignorado.

• Errores a la hora de "ser Case-sensitive" y pasan a no serlo. Por ejemplo el selector .foo concuerda con el elemento class="Foo" o class="FOO". Según las especificaciones CSS, en estos contextos el uso de mayúsculas/minúsculas es significativo.

• Los nombres mal formados son aceptados en clases e identificadores/selectores. Específicamente los nombres que empiezan por un intervalos o un número (ej. en los selectores usar .123a o #42) son aceptados.

• La declaración white-space: pre es ignorada.

• Varios añadidos al soporte de CSS (como la propiedad max-width) en Internet Explorer 7 no son usadas en modo quirks. Esto es, hay varias características de CSS que no estan soportadas en Internet Explorer 6 pero sí en Internet Explorer 7, pero solo en el modo estándar. Para más información sobre ello mirad la entrada _Details on our CSS changes for IE7 en el blog de Microsoft.

La lista seguramente no es exhaustiva. Muchos puntos son principalmente con Internet Explorer 7. Otros navegadores pueden tener un modo quirks que simula versiones antiguas de Internet Explorer de forma parecida.

Comprobando el modo

Para ver en que modo se carga una página (Quirks vs Estándar):

• En Firefox usad el comando View/Page Info y mirad el panel general (N.dT: Herramientas ⇒ Información de la página o Ctrl+I en muchas versiones de Firefox).

• Para IE descargad el Bookmarklet Quirks or Standards Mode.