Inicio NoticiasUsar HTML5 en Internet Explorer

Usar HTML5 en Internet Explorer

Poco a poco va tomando fuerza el nuevo estándar de HTML. Pero no todos los navegadores lo soportan por ahora.

Hace poco más de 24 horas, salió la última versión del navegador de Mozilla, el Firefox 4. Con esta última versión dan soporte a una gran parte de las especificaciones de HTML5.

Por otro lado, Internet Explorer 8 e inferiores no soportan ni soportaran HTML5, pero mucha gente seguirá usándolos durante mucho tiempo. Ésto implica que no podremos usar parte de esas mejoras por miedo a perder una parte de usuarios.

NUEVOS ELEMENTOS

HTML5 incorpora bastantes elementos nuevos, entre ellos tenemos: <header>, <footer> o <article>. Cito estos elementos porque se comportan como simples <div>, pero nos servirán de ayuda para los buscadores a la hora de diferenciar las diferentes partes de nuestra página web, además de simplificar la creación de los CSS.

Al empezar a usar éstos nuevos elementos, nos encontramos que la mayoría de navegadores ya los soportan, pero al usar IE nos damos cuenta que no los reconoce y no sabe como mostrarlos en nuestra página. De hecho, ni siquiera nos permite darle nuestros propios estilos para que sepa como mostrarlo. Por ejemplo:

<html>
 <head>
  <style> ficticio { color: red; } </style>
 </head>
 <body>
  <ficticio>Hola Mundo!</ficticio>
 </body>
</html>

En éste caso, IE nos mostrará el texto "Hola Mundo!", pero no lo mostrará en color rojo como sería de esperar.

Por suerte, John Resig nos explica en su blog como conseguir que nos reconozca el elemento para que le sean aplicados nuestros estilos. Si mediante JavaScript creamos un nuevo elemento DOM con el mismo nombre que el no detectado, conseguiremos que IE lo tenga en cuenta y aplique los estilos a todos los elementos de la página de ese tipo.

<html>
 <head>
  <style> ficticio { color: red; } </style>
  <script> document.createElement("ficticio") </script>
 </head>
 <body>
  <ficticio>Hola Mundo!</ficticio>
 </body>
</html>

En este caso habríamos conseguido que IE mostrase "Hola Mundo!" en color rojo.

Para evitar tener que crear uno a uno todos los elementos nuevos de HTML5, Remy Sharp nos proporciona un pequeño script que nos creará mediante JavaScript todos los elementos nuevos.

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Mediante los tags comentario, evitaremos que cualquier otro navegador que no sea IE ejecute el script. Deberemos usarlo siempre dentro del elemento <head> de nuestra página.

ESTILOS POR DEFECTO

Ya hemos conseguido que IE detecte todos los elementos nuevos de HTML5, pero aún no se muestran correctamente.

<html>
 <head>
  <style> header { background-color: red; } </style>
  <script> document.createElement("header") </script>
 </head>
 <body>
  <header>Hola Mundo!</header>
 </body>
</html>

Con el código anterior, conseguiremos que nos muestre el texto "Hola Mundo!" con el fondo rojo, pero sabemos que el elemento <header> debería mostrarse, por defecto, como si fuera un elemento de bloque del tipo <div>: ocupando todo el ancho de su elemento contenedor y no se muestra así. Por desgracia, IE no dispone de los estilos por defecto de los elementos que no reconoce, así que sólo será capaz de dar estilo a lo que le indiquemos explícitamente. Para solucionar éste problema, tenemos que generar una hoja de estilos nueva que nos indique como mostrar todos los elementos de forma estándar.

En Html5Remi nos muestran una hoja de estilos que pretende estilizar de forma estándar (como lo harían todos los navegadores por defecto) todos los elementos existentes en HTML5.

html5-defaults.css:

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

Una vez cargados en nuestra página los estilos por defecto ( html5-defaults.css ) y la libreria JavaScript que nos creara los elementos DOM ( html5.js ) habremos conseguido que Internet Explorer muestre correctamente buena parte de los elementos HTML5 ya soportados en muchos otros navegadores.

Comparte este artículo: