DesarrolloWeb.com > Manuales > HTML5 e Internet Explorer 9

Actualiza tu docmode

20 de abril de 2012

Valoración del artículo:

Enviar un comentario

Solución a problemas habituales con IE: actualiza tu docmode.

Por Rey Bango

La compatibilidad a nivel de documento define la manera en que un navegador muestra en pantalla el sitio web. Cuanto más concretos seamos diciéndole al navegador lo que debe esperar, mejor será la experiencia del usuario. Cuando utilicemos estándares web como HTML5, tenemos que empezar por declarar de forma explícita el tipo de documento HTML5:

<!DOCTYPE html>

Este markup obliga a Internet Explorer 9 y 10 a pasar al modo de estándares. También funciona correctamente en Chrome y Firefox. Con cuatro pasos sencillos podrás preparar tu sitio web para muchos navegadores y dispositivos:

Paso 1: Validar tu sitio web utilizando el modo de estándares

Comprueba si tu sitio funciona ya en modo de estándares:

Abre el sitio web en la Preliminar de Plataforma de IE10

Nota: Puedes seguir estos mismos pasos para actualizar el modo de documento para IE9 solamente, sin descargarte la versión preliminar.

Pulsa F12 para arrancar las Herramientas de Desarrollo de IE, o búscalas desde el menú Tools, como se muestra aquí:

Nota: Si no estás aún muy familiarizado con las Herramientas de Desarrollo F12 de IE para depurar tus páginas, te recomiendo este tutorial

Verifica si tu sitio indica Browser Mode: IE10 y Document Mode: IE10 standards como se muestra en esta barra de herramientas:

Si tu sitio web está en Browser Mode: IE10 y Document Mode: IE10 Standards, todo va bien. Revisa si el Browser Mode y Document Mode de tu sitio web son distintos a estos. Un ejemplo corriente es tener Browser Mode = IE8 y Document Mode = Quirks que indica que tu sitio web está diseñado para versiones antiguas de IE y puede que no admita el uso de estándares web recientes.

Paso 2: Implementar docmode para estándares web

Fuerza el modo de estándares de IE10 para probar tu sitio web:

Inserta la etiqueta <!DOCTYPE html> en la parte superior de tu página HTML
Puedes ver cómo se actualizan los doctypes aquí.
Vuelve a cargar la página en el navegador y comprueba otra vez los valores de Browser Mode y Document Mode desde las Herramientas de Desarrollo F12. Si no aparecen Browser Mode: IE10 y Document Mode: IE10 standards continua en el siguiente paso.

Paso 3: Determina por qué tu sitio web no está en Modo de Estándares

La mayoría de los problemas vienen del soporte para versiones antiguas de IE. Empecemos por comprobar que el código basado en estándares se muestra correctamente en IE9 e IE10. Después veremos el código no basado en estándares para las versiones de IE antiguas.

Mi página no está en Browser Mode: IE10
Causa posible: tu sitio web puede estar marcado para visualizarse con la Vista de Compatibilidad y puede que esté obligando al navegador a restituirla en un modo de versión antigua para garantizar la funcionalidad del propio site.
Solución: comprueba si tu sitio está en esta lista.
Mi página no está en Document Mode = IE10

Causa posible: el doctype de tu sitio web es incorrecto o no está declarado
Solución: Rectifica la etiqueta añadiendo un doctype válido y correctamente formado como:

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

Tienes más información sobre la actualización de doctypes aquí.

Causa posible: un valor Docmode forzado por la etiqueta Meta X-UA-Compatible
Solución: Busca un código parecido al siguiente en la sección de la página:

Elimínalo y vuelve a cargar la página. Sigue probando. .

Paso 4: Solución de problemas habituales con IE al actualizar el docmode

Causa posible: Comentarios condicionales para dar cobertura a funcionalidades dependientes de la versión del navegador.
Solución: comprueba si hay comentarios condicionales que ejecutan código no basado en estándares. Suelen emplearse para resolver ciertas funcionalidades soportadas por versiones antiguas de IE que permiten que la página degrade su funcionalidad de manera elegante. Comprueba si aparece código de este tipo:

Elimínalo y carga de nuevo la página. Sigue comprobando. Puedes ver más información sobre los Comentarios Condicionales aquí.

Causa posible: Análisis de agente de usuario para soporte de ciertas funcionalidades dependientes de la versión del navegador.
Solución: busca en la página instrucciones de comprobación del agente de usuario. Se suelen emplear para ejecutar partes del código en navegadores específicos dependiendo de la cadena ?user agent? obtenida consultando el modo del navegador. El código que hace esto tiene un aspecto similar a este:

if (version = /MSIE (d+.d+)/.exec(navigator.userAgent)) {
isIE = true;
browserVersion = parseFloat(version[1]);
}

Empieza implementando la detección de funcionalidad siempre que sea posible con estándares web. Puedes ver más información sobre las cadenas de Agente de Usuario aquí. La cadena de Agente de Usuario de IE10 la tienes aquí.

Otros motivos por los que una página puede verse de forma incorrecta:

Causa posible: tu sitio web puede estar utilizando funcionalidades específicas de un navegador o una versión que ya no están soportadas. Siempre que puedas, utiliza estándares web.
Solución: Ejecuta la Herramienta de Inspección de Compatibilidad.

Causa posible: tu sitio web puede que utilice complementos de otros fabricantes, como Flash, Quicktime o Silverlight que ya no estén soportados en IE10 estilo Metro. Siempre que puedas, utiliza estándares web.
Solución: aprende a crear experiencias no basadas en complementos. En próximas fechas tendremos una guía completa paso a paso para este fin.

Causa posible: tu sitio web puede estar cargando archivos CSS con dependencias de alguna versión concreta de navegador:
Solución: comprueba que la restitución en pantalla se hace evitando siempre que sea posible las manipulaciones de CSS que generen dependencias de versión o fabricante. Tienes más información sobre cómo investigar problemas con CSS aquí.

Puedes consultar una lista de problemas frecuentes en la guía IE Compatibility Cookbook.

Si después de seguir estos pasos aún no puedes actualizar el docmode, envíanos un mensaje al Twitter a @IE o busca en los Foros de MSDN.

Y también tienes información mas detallada en estos artículos: