Las novedades de Internet Explorer 11 para diseñadores y programadores web

Internet Explorer es el navegador menos querido por la comunidad de diseñadores y programadores web. No obstante, según las estadísticas más recientes, las diferentes versiones de Internet Explorer todavía conservan una cuota de mercado mundial del 25%. Esto significa que más de 600 millones de personas en todo el mundo utilizan Internet Explorer. Por eso es importante conocer las novedades de Internet Explorer 11 que te afectan como diseñador o programador web.

El nuevo User-Agent de Internet Explorer

Cuando un navegador realiza cualquier petición, incluye una pequeña cadena de texto para que el servidor web sepa con qué tipo de navegador está hablando. Esta cadena se llama User-Agent String y muchas aplicaciones web acceden a su valor mediante JavaScript para detectar el tipo de navegador en el que se están ejecutando.

El User-Agent oficial de Internet Explorer 11 es:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

Con respecto a las versiones de Internet Explorer, esta cadena introduce varias novedades importantes:

Se define una nueva propiedad llamada rv (del inglés "revision") cuyo valor indica el número de versión del navegador (11 en este caso).
Se ha añadido el texto "like Gecko", para ser más consistente con otros navegadores como Google Chrome y Safari, que lo incluyen desde hace tiempo. Hace años este texto se incluyó para indicar que los nuevos navegadores de ese momento (como Safari) eran compatibles con el mejor navegador de esa época (Firefox, que utiliza internamente Gecko).
Se han eliminado las propiedades compatible y MSIE. Esta última propiedad es el cambio más importante, ya que muchas aplicaciones buscaban el valor MSIE para detectar si el navegador era Internet Explorer.

El siguiente código muestra un ejemplo sencillo de cómo detectar las versiones tradicionales de Internet Explorer, la nueva versión 11 o cualquiera de ellas:

function esIE() {
    return esIEObsoleto() || esIE11();
}

function esIEObsoleto() {
    return !!(navigator.userAgent.match("/MSIE/"));
}

function esIE11() {
    return !!(
        navigator.userAgent.match("/Trident/")
        && navigator.userAgent.match("/rv:11/")
    );
}

Además, si utilizas JavaScript para obtener el valor de la propiedad navigator.appName, Internet Explorer 11 ahora devuelve Netscape (mismo comportamiento que el resto de navegadores). Y la propiedad navigator.product devuelve Gecko (de nuevo el mismo comportamiento que el resto de navegadores).

Desaparecen los modos de compatibilidad

Internet Explorer 8 introdujo una característica llamada modos de compatibilidad de Internet Explorer, que permitía mostrar correctamente los sitios web modernos en Internet Explorer.

Internet Explorer 11 declara obsoletos estos modos de compatibilidad y por tanto, se recomienda no utilizarlos en ningún sitio web. Por defecto Internet Explorer 11 muestra las páginas en el modo IE=edge, lo que equivale a la variante más moderna y compatible con los nuevos estándares.

Además, ya no es necesario añadir la cabecera X-UA-Compatible en todas tus páginas HTML:

<!-- Activando el modo 'edge' en Internet Explorer 10 o inferior -->
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    ...
</head>

Si utilizas el doctype de HTML5, la página ya se mostrará automáticamente en el modo IE=edge:

<!-- Activando el modo 'edge' en Internet Explorer 11 o superior -->
<!doctype html>
<html>
    ...
</html>

Si por cualquier motivo es necesario que sigas utilizando los modos de compatibilidad de Internet Explorer, en vez de manchar las páginas incluyendo la etiqueta X-UA-Compatible, es mejor que utilices el servidor web para añadir automáticamente una cabecera HTTP. Si utilizas Apache como servidor, este es el código que tienes que utilizar:

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        BrowserMatch MSIE ie
        Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
    </IfModule>
</IfModule>

<IfModule mod_headers.c>
    Header append Vary User-Agent
</IfModule>

Cambios en las APIs

Internet Explorer 11 elimina muchas de sus antiguas APIs y funciones propietarias para utilizar en su lugar las funciones estándar empleadas por el resto de navegadores. La siguiente tabla resume los principales cambios:

Antigua función propietaria	Nueva función equivalente
`attachEvent`	`addEventListener`
`document.all`	`document.getElementById`
`document.fileSize`	No hay alternativa
`document.selection`	`window.getSelection`
`img.fileSize`	No hay alternativa
`script.onreadystatechange`	`script.onload`
`script.readyState`	`script.onload`
`style.styleSheet`	`style.sheet`
`window.execScript`	`eval`
`window.createPopup`	No hay alternativa. Tienes que crear el popup a mano.
`window.doScroll`	`window.scrollLeft` y `window.scrollTop`
`XDomainRequest`	Utiliza el estándar CORS (Cross-Origin Resource Sharing) de `XMLHttpRequest`