Modern.IE: la forma para no dejar marginado a Internet Explorer

Internet Explorer, el niño rarito de la clase ya ha crecido, ahora, en su versión 10, pero la falta de compatibilidades que ha tenido el navegador de Microsoft han conseguido que se le deje marginado a la hora de crear nuevos proyectos, ya que había que invertir mucho tiempo y al final la cuota procedente de esos horribles navegadores prehistóricos (IE6 – IE7) no compensaba a la inversión.

Para que los desarrolladores y diseñadores nos acordemos de poner a punto nuestras webs Microsoft ha creado Modern.IE, una web dedicada a enumerarnos los cambios que debemos de hacer para que sea compatible con IE9 e IE10+Windows 8, como crear el símil de apple-touch-icon para el inicio de Windows 8.

Problemas comunes por soportar versiones antiguas de IE

Como muchos sabemos, para adaptar ciertas páginas a IE6 y 7 (y casi 8) había que poner en marcha técnicas poco eficientes, que esta herramienta detecta y te invita a eliminarlas o pulirlas, como primera medida del test. La siguiente medida es comprobar si tu web está en la lista de páginas que deben de ejecutarse en modo compatibilidad, que ya hablamos de como salir de ella.

Hay frameworks, o mejor dicho, algunas versiones de ellos que no son compatibles con los nuevos navegadores de Microsoft, por lo que la herramienta busca cuales de ellos son y nos facilitan la siguiente versión compatible y la ultima versión, y por último nos revisa el doctype que tenemos en nuestra web (el de HTML5 es el correcto para los nuevos IE).

Asegúrate de que tu web sea multiplataforma

Esta parte del test se centra en la eficiencia y la adaptación a los dispositivos móviles y a todos los navegadores. Lo primero que testean es el uso de los prefijos de cada navegador, en mi caso he fallado por no usar el de Microsoft (-ms-) y el de Opera (-o-) que sería recomendable usarlos, sobre todo el más reciente, el -ms- que ha salido prácticamente a la luz junto a IE10.

Los plugins son totalmente ineficientes y tienen menor compatibilidad en los dispositivos móviles, por eso nos recomiendan no hacer uso de ninguno (como flash) y también nos rastrea en nuestra web indicios de “discriminación” hacia algún navegador (por ejemplo el uso de navigator.appVersion).

Y por último en los test de compatibilidad nos buscan indicios de poner en práctica Responsive Design (o diseños adaptables) buscando el uso de @media queries (que muy bien no lo hace, ya que he realizado las pruebas con una web que usa @media queries y contiene la meta-tag viewport, indicios bastante fiables y rápidos para llegar a la conclusión de que hay un responsive design).

Los consejos para hacer sacar provecho a Windows 8

Esta parte del test es la que muchos pondréis en marcha, lo primero que buscan es el uso de las meta-tag para que Windows 8 cree una tile (o cuadradito del inicio de Win8) con el logo y el color que queramos, en el caso de que alguien agregue un inicio rápido de la web en su inicio.

Es muy fácil de implementar, con las meta-tags msapplication-Tile:

<meta name="msapplication-TileColor" content="#123456"/>
<meta name="msapplication-TileImage" content="logo.png"/>

Y por último, ya de todo el test, busca si establecemos o no como va a actuar IE10 cuando estemos en esta página y usemos eventos táctiles. Podemos limitar el uso de los eventos táctiles con -ms-touch-action, para establecer que solo se pueda hacer un movimiento “touch” vertical y horizontal y si se puede pellizcar o no la pantalla (lo típico para hacer zoom), que se supone que sirve para que no se produzcan esos eventos sobre ciertas etiquetas, muy útil si controlamos la posición del puntero para una APP hecha con canvas y no queremos que se vuelva loca.

Más información | Modern.IE