Quirks Mode

Quirks mode hace referencia a una técnica usada por algunos navegadores para mantener la retro-compatibilidad con páginas web diseñadas para navegadores más antiguos.

Presentación

Las páginas web son creadas usando dos lenguajes: HTML, un lenguaje de marcado diseñado para uso web, describe la estructura y el contenido de una página y CSS u Hojas de Estilos en Cascada, un lenguaje muy generalizado de hojas de estilo, que especifica cómo la página debería ser dibujada en diferentes medios (estilos visuales para la pantalla, estilos para imprimir, estilos aurales cuando se usan para ser leídos en voz alta por un lector de pantalla, etc.).

Sin embargo, las implementaciones de estos lenguajes en navegadores web, particularmente la de CSS, fueron en principio mínimas y conocidas por contener muchos errores, o "quirks". Conociendo este problema, muchos autores de páginas web no se remitieron a las especificaciones existentes de estos lenguajes para encontrar cómo sortear estos fallos, y en lugar de ello utilizaron las formas incorrectas de presentación de estos navegadores como base de un "correcto" comportamiento.

El resultado es que, aunque el soporte de los navegadores para la presentación con base en los estándares HTML y CSS ha mejorado sustancialmente, hay una gran cantidad de páginas web que asumen la existencia de estos viejos fallos y no se dibujan tal y como el autor pensó en navegadores que sí lo hacen según los estándares. Generalmente se pueden dividir en dos amplias categorías: páginas heredadas de la época mencionada, las cuales llevan tiempo sin ser actualizadas por sus autores, y páginas nuevas, que son creadas por autores que no conocen los estándares web ya que no se requiere un conocimiento de éstos para crear páginas que funcionen.

Modo Quirks, modo estándar y modo casi-estándar

Para sortear este problema y mantener la compatibilidad con el mayor número posible de páginas, los diseñadores de navegadores generalmente diseñan su software para usar uno de los dos modos de dibujado: en modo estándar las página son dibujadas de acuerdo con las especificaciones de HTML y CSS, mientras que en el modo "quirks" tratan de emular el comportamiento de los navegadores viejos para asegurar que dichas páginas se representen de acuerdo a la intención original de sus autores.

Algunos navegadores (aquellos basados en el motor de dibujado o renderizado Mozilla Gecko, por ejemplo), usan también un modo "casi estándar" que intenta mantenerse entre los dos, emulando algunos fallos viejos mientras la mayoría lo hace conforme a las especificaciones.

Muy a menudo, los navegadores determinan qué modo usar basándose en la presencia de un DTD (Document Type Declaration - Declaración del Tipo de Documento) en la página; si hay una declaración completa de DOCTYPE presente, el navegador usa el modo estándar y si ésta está ausente el navegador utiliza el modo "quirks". Por ejemplo una página web que comience con el siguiente DOCTYPE dispararía el modo estándar:

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

Mientras que este DOCTYPE (el cual no contine ni la versión de HTML usada, o la URL de un DTD HTML dispararía el modo "quirks":

<!DOCTYPE html PUBLIC>

Además,una página que no incluya un DOCTYPE será dibujada en modo "quirks".

Una notable excepción a esto es el navegador Internet Explorer 6, de Microsoft, el cual dibuja una página en modo "quirks" si el DOCTYPE es precedido por una declaración XML, sin importar si la declaración DOCTYPE está completa. Así, una página XHTML que comience con el siguiente código será dibujada en el modo "quirks" por IE 6:

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Chris Wilson de Microsoft ha indicado que el problema con la declaración del XML será reparada en la versión 7 de Internet Explorer, en el cual el prólogo XML será, simplemente, ignorado, pero que para un máximo de compatibilidad con los navegadores actuales y antiguos el W3C, el cual mantiene la especificación del XHTML, recomienda a los autores de documentos XHTML omitir la declaración XML cuando sea posible.

Ejemplos

Una diferencia destacada entre el modo "quirks" y estándar es el manejo del modelo de áreas de CSS en el explorador Internet Explorer. Antes de IE 6, Internet Explorer usaba un algoritmo para determinar el ancho de un elemento de una caja el cual entraba en conflicto con el algoritmo detallado en la especifición CSS y, debido a la popularidad de IE, muchas páginas fueron creadas basándose en este algoritmo no estándar. La versión 6 de IE usa el algoritmo de la especificación CSS cuando dibuja en modo estándar y usa el algoritmo previo, el no estándar, cuando dibuja en modo "quirks".

Otra notable diferencia es la alineación vertical de ciertos tipos de contenidos inline; mucho viejos navegadores alinean imágenes en el borde inferior de sus cajas contenedoras, así la especificación CSS requiere que el estilo font sea heredado dentro de la tabla. En modo estándar, navegadores basados en Gecko lo alinearán a la línea base y en modo quirks se alineará a la línea inferior. Algunos desarrolladores que quieren aprovechar este comportamiento mientras mantienen el modo estándar usan una declaración CSS que fuerce a mostrar las imágenes como elementos de bloque.

Adicionalmente, muchos navegadores viejos no implementaron herencia de estilos de fuentes (fonts) dentro de las tablas; como resultado, los estilos de las fuentes han de ser especificados una vez dentro del documento como un todo y otra vez para la tabla, inclusive si la especificación CSS requiere que el estilo de la fuente sea heredado dentro de la tabla.

Si el tamaño de la fuente es especificado usando unidades relativas, un navegador apegado a los estándares heredaría el tamaño base de la fuente, entonces aplica el tamaño relativo a la fuente de la tabla; por ejemplo: una página con una declaración base de fuente del 80% y el tamaño de fuente de la tabla sería del 80% (para asegurar un tamaño del 80% en navegadores en los cuales no heredan correctamente el tamaño de la fuente), en un navegador apegado a los estándares, mostrará las tablas con un tamaño de fuente del 64% (80% de 80%). Como resultado, los navegadores no heredan los tamaños de las fuentes dentro de las tablas en modo quirks.

Verificando que el redibujado está en uso

En Mozilla Firefox, la caja de diálogo 'información de página' indicará el modo de dibujado en uso para la página dada. En IE, la propiedad del JavaScript document.compatMode indica el modo de dibujado para página actual, en modo estándar, document.compatMode contiene el valor 'CSS1Compat', mientras que en modo quirks contiene el valor 'BackCompat'.

Escribiendo javascript:alert(document.compatMode) en la barra de direcciones de IE es una forma rápida de ver el modo de representación (dibujado).

Véase también

Internet Explorer box model bug

Enlaces externos

Datos: Q1323997