En modo capricho - Quirks mode

En informática , el modo peculiaridades se refiere a una técnica utilizada por algunos navegadores web con el fin de mantener la compatibilidad con las páginas web diseñadas para navegadores web antiguos en lugar de cumplir estrictamente con los estándares W3C e IETF en el modo estándar .

Visión general

La estructura y apariencia de una página web se describe mediante una combinación de dos lenguajes estandarizados:

  • HTML , un lenguaje de marcado diseñado para uso web, que describe la estructura y el contenido de la página; y
  • CSS , un lenguaje de hoja de estilo generalizado , que especifica cómo se debe representar la página en varios medios (estilos visuales para visualización en pantalla, estilos de impresión para usar al imprimir la página, estilos auditivos para usar cuando un lector de pantalla lee la página en voz alta , etc. .).

Sin embargo, la mayoría de los navegadores web más antiguos no implementaron completamente las especificaciones para estos idiomas o se desarrollaron antes de la finalización de las especificaciones ( Microsoft Internet Explorer versión 5.0 para la plataforma Macintosh , lanzado en 2000, fue el primer navegador web importante con soporte completo para CSS Nivel 1, por ejemplo). Como resultado, muchas páginas web más antiguas se construyeron para depender de las implementaciones incompletas o incorrectas de los navegadores más antiguos, y solo se mostrarán según lo previsto cuando se manejen con dicho navegador.

El soporte para HTML y CSS estandarizados en los principales navegadores web ha aumentado significativamente, pero la gran cantidad de documentos heredados que se basan en las peculiaridades de los navegadores más antiguos representa un obstáculo para los desarrolladores de navegadores, que desean mejorar su soporte para HTML y CSS estandarizados, pero también desea mantener la compatibilidad con versiones anteriores de páginas no estandarizadas. Además, se siguen creando muchas páginas web nuevas a la antigua, ya que las soluciones alternativas de compatibilidad introducidas por los desarrolladores de navegadores significan que no es estrictamente necesario comprender los métodos estandarizados.

Para mantener la compatibilidad con el mayor número posible de páginas web, los navegadores web modernos se desarrollan generalmente con múltiples modos de representación: en el "modo estándar", las páginas se representan de acuerdo con las especificaciones HTML y CSS, mientras que en el "modo peculiaridades" se intenta emular. el comportamiento de los navegadores más antiguos. Algunos navegadores (aquellos basados ​​en el motor de renderizado Gecko de Mozilla , o Internet Explorer 8 en modo estricto , por ejemplo) también usan un modo "casi estándar" que intenta comprometerse entre los dos, implementando una peculiaridad para el tamaño de las celdas de la tabla mientras se ajusta de otra manera a las especificaciones.

Diferencias de modo y ejemplos

Una diferencia destacada entre los modos de peculiaridades y estándares es el manejo del error del modelo de caja de CSS Internet Explorer . Antes de la versión 6, Internet Explorer usaba un algoritmo para determinar el ancho de la caja de un elemento que entraba en conflicto con el algoritmo detallado en la especificación CSS, y debido a la popularidad de Internet Explorer, se crearon muchas páginas que se basaban en este algoritmo no estándar. A partir de la versión 6, Internet Explorer usa el algoritmo de la especificación CSS cuando se renderiza en modo estándar y usa el algoritmo no estándar anterior cuando se renderiza en modo peculiar.

Otra diferencia notable es la alineación vertical de ciertos tipos de contenido en línea; muchos navegadores antiguos alineaban las imágenes con el borde inferior de su cuadro contenedor, aunque la especificación CSS requiere que estén alineadas con la línea de base del texto dentro del cuadro. En el modo estándar, los navegadores basados ​​en Gecko se alinearán con la línea de base, y en el modo peculiar, se alinearán con la parte inferior.

Además, muchos navegadores antiguos no implementaron la herencia de estilos de fuente dentro de las tablas; como resultado, los estilos de fuente debían especificarse una vez para el documento como un todo y nuevamente para la tabla, aunque la especificación CSS requiere que el estilo de fuente se herede en la tabla. Si los tamaños de fuente se especifican usando unidades relativas, un navegador compatible con los estándares heredaría el tamaño de fuente base y luego aplicaría el tamaño de fuente relativo dentro de la tabla: por ejemplo, una página que declara un tamaño de fuente base del 80% y una fuente de tabla un tamaño del 80% (para garantizar un tamaño del 80% en los navegadores que no heredan correctamente los tamaños de fuente) mostraría, en un navegador compatible con los estándares, tablas con un tamaño de fuente del 64% (80% del 80%). Como resultado, los navegadores normalmente no heredan tamaños de fuente en tablas en modo peculiar.

Modo casi estándar

Un tercer modo de compatibilidad conocido como "modo casi estándar" o "modo estricto", que mantiene el tamaño vertical "tradicional" de las celdas de la tabla de acuerdo con la especificación CSS2 , se ha implementado en estos navegadores: Safari, Opera 7.5 (y versiones posteriores). , todos los navegadores basados ​​en Gecko desde 1.0.1 (como Firefox) e Internet Explorer 8.

La representación en modo "casi estándar" coincide con el modo "estándar" en todos los detalles excepto en uno. El diseño de las imágenes dentro de las celdas de la tabla se maneja de la misma manera que funciona el modo "peculiaridades", lo cual es bastante consistente con los navegadores heredados como Internet Explorer 7 (y anteriores). Esto significa que es menos probable que los diseños de imágenes divididas en tablas se desmoronen en los navegadores cuando se encuentran en el modo "peculiaridades" o "casi estándar", en lugar del modo "estándar".

Activación de diferentes modos de renderizado

La mayoría de las veces, los navegadores determinan qué modo de representación utilizar en función de la presencia de una Declaración de tipo de documento en la página; si está presente un DOCTYPE completo, el navegador usará el modo estándar, y si está ausente, el navegador usará el modo peculiar. Por ejemplo, una página web que comenzara con el siguiente DOCTYPE activaría el modo estándar:

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

El siguiente DOCTYPE es sintácticamente inválido, contiene la palabra clave de identificador público "PUBLIC" pero no un identificador público (que indica el nombre de la versión de HTML en uso), y ninguna URL de identificación del sistema de una definición de tipo de documento HTML . Esto desencadenaría el modo peculiaridades:

<!DOCTYPE html PUBLIC>

Además, una página web que no incluye un DOCTYPE en absoluto se mostrará en modo peculiar.

Una notable excepción a esto es Microsoft 's Internet Explorer 6 navegador, lo que hará que una página en el modo de peculiaridades si el DOCTYPE es precedido por un XML prólogo, independientemente de si se especifica un DOCTYPE completa. Por lo tanto, una página XHTML que comienza con el siguiente código sería renderizada en modo peculiar 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">

Lo anterior es útil hasta cierto punto, ya que puede usarse para activar el modo peculiaridades solo en IE 6.

El modo Quirks en cualquier versión de IE también se activará si algo precede al DOCTYPE. Por ejemplo, si un documento de hipertexto contiene un comentario, espacio o cualquier etiqueta antes de la declaración DOCTYPE, IE utilizará el modo peculiar:

<!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

El problema con la declaración XML se solucionó en la versión 7 de Internet Explorer, en la que el prólogo XML simplemente se ignora. Sin embargo, para una máxima compatibilidad con los navegadores web existentes y antiguos, el World Wide Web Consortium , que mantiene la especificación XHTML, sugiere que los autores de documentos XHTML podrían considerar omitir la declaración XML.

Comparación de tipos de documentos

Henri Sivonen compiló una lista de diferentes tipos de documentos y la forma en que son tratados en los navegadores más comunes, mostrando si las páginas se prestan en Q uirks, S as normas, o un modo de estándares de C asi. El criterio utilizado para el "Modo casi estándar" es la representación de altura de celda de tabla no estándar. Esta tabla se aplica al contenido servido con el tipo de contenido text / html. El contenido servido con la aplicación Content-Type / xhtml + xml se representa en modo estándar en Chrome, Firefox, Internet Explorer 9, Safari y Opera. Internet Explorer 6, 7 y 8 no son compatibles con la aplicación Content-Type / xhtml + xml.

Doctype NS6 Mozilla 0.9.5-1.0 IE 8+
Firefox
Chrome
Safari
Opera 7.5+
Netscape 7+
Mozilla 1.0.1+
Konq 3.5+
HTML5 spec
IE 7
Opera 7.10
IE 6
Opera 7.0
Mac IE 5 Konq 3.2
Ninguno Q Q Q Q Q Q Q
HTML 2
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Q Q Q Q Q Q Q
HTML 3
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN//">
Q Q Q Q Q Q Q
HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Q Q Q Q Q Q Q
HTML 4.01
Estricto con identificador de sistema
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
S S S A A A A
sin identificador de sistema
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
S S S A A Q A
Transicional con identificador de sistema
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
S S A A A A Q
sin identificador de sistema
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Q Q Q Q Q Q Q
HTML5
<!DOCTYPE html>
Q S S A A A ?
XHTML básico
con identificador de sistema y sin declaración XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
S S S A A A A
XHTML 1.0
Estricto con identificador del sistema y declaración XML
<?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">
S S S A Q A Q
con identificador de sistema y sin declaración XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
S S S A A A A
sin identificador de sistema y sin declaración XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
S S S A A A ?
Transicional con identificador de sistema y con declaración XML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
S S A A Q A Q
con identificador de sistema y sin declaración XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
S S A A A A Q
sin identificador de sistema y sin declaración XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
S S A A A A ?
XHTML 1.1
con identificador del sistema y una declaración XML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
S S S A Q A Q
con identificador de sistema y sin declaración XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
S S S A A A A
Doctype NS6 Mozilla 0.9.5-1.0 IE 8+
Firefox
Chrome
Safari
Opera 7.5+
Netscape 7+
Mozilla 1.0.1+
Konq 3.5+
HTML5 spec
IE 7
Opera 7.10
IE 6
Opera 7.0
Mac IE 5 Konq 3.2

Verificación de modo

En la mayoría de los navegadores, la extensión Document Object Model document.compatMode indica el modo de representación de la página actual. En modo estándar y modo casi estándar, document.compatMode contiene el valor "CSS1Compat", mientras que en modo peculiar equivale a "BackCompat".

Además, en Mozilla Firefox y Opera, el modo de representación en uso para una página determinada se indica en el cuadro informativo "Información de la página".

Referencias

enlaces externos