En el diseño y desarrollo de sitios web es importante mantenernos actualizados y migrar a las nuevas posibilidades que nos ofrecen los estándares web. Hoy se buscan que desarrolladores y diseñadores web apliquen ya HTML5 y CSS3 a sus sitios, específicamente a HTML5 que le permite una codificación más cómoda y aparentemente, una semántica ideal para la indexación de nuestro contenido en los buscadores.
Sin embargo, las versiones antiguas de nuestro navegador favorito Internet Explorer no reconocen los nuevos elementos de HTML5 de forma natural.
Así que, durante mi proceso de actualización a HTML5 y experimentos con CSS3, encontré esta bella, simple y mágica solución para poder utilizar un mark-up de HTML5 en versiones anteriores a la 9 de Internet Explorer.
HTML5 en IE6, IE7 e IE8 en 2 minutos
Lo que necesitamos hacer definir estos elementos como parte del documento y la única forma de lograrlo es con JavaScript, apoyado del famoso comentario condicionado <!--[if lt IE 9 ]>. Para esto, solo tenemos que colocar el siguiente código, dentro de la etiqueta <head>
Código :
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("hgroup");
</script>
<![endif]-->¿Qué hace este código Javascript por HTML5 en IE?
Este script crea soporte para las etiquetas <nav>, <header>, <footer>, <section>, <article>, <aside> (Que NO es para sidebars, es para contenidos relacionados de los articles) y <hgroup>. Las cuales ahora podrán ser renderizadas (por IE) en el Mark-up de nuestro sitio como cualquier navegador decente.
Seguimos teniendo otras limitaciones, podemos asegurar 2 cosas:
- Cada sección de nuestro sitio estará en su lugar para los usuarios de IE.
- Podremos beneficiarnos de las bondades SEO del Mark-up de HTML5 sin perder usuarios "vintage".
Disfrutenlo =)
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Para aumentar un poco más este tema, todos los navegadores renderean cualquier etiqueta XML, aunque no sea valida como HTML. Si no la encuentran en su definición, la renderean como un simple <span>
Internet Explorer no. IE ignora las etiquetas que no reconoce y las elimina del DOM (el arbol de etiquetas). Por lo que no se les puede agregar estilos ni nada para poder usarlas.
Este código fuerza a IE a reconocerlas. Por cierto, este y otros hacks están compilados en el HTML5 Enabling Script.
Por torrealbaruben el 25 de Marzo de 2011
Gracias por la explicación..!
Buen tip MmO, gracias.
Por luco el 01 de Abril de 2011
Por Blas_Angel el 04 de Abril de 2011
Saludos!!!
Por Glorivel el 12 de Abril de 2011
Por jordy-jk el 28 de Abril de 2011
trankiloss!!
Por luisj135 el 25 de Mayo de 2011
http://remysharp.com/2009/01/07/html5-enabling-script/
Si, este articulo explica como funcional el código y te da la opción de hacerlo tu mismo. Pero el HTML5 Enable Script es más completo.
Por ejemplo acá en clab están utilizando el doctype de html5 pero siguen con el <div id="header">... al igual que otros sitios como youtube. ¿Será que no conviene utilizarlos todavía? ¿podrían generar problemas con el posicionamiento?
Por mafi el 23 de Julio de 2011
1 saludo
En el caso de este ejemplo sería:
header, footer, section, article, aside, hgroup {
display: block;
}
Saludos.
Por puaff el 28 de Septiembre de 2011
puaff-blog :
Qué tiene que ver HMTL5 con CSS3?... Los beneficios semánticos de HTML5 más sus propiedades para el uso de video y otras extensiones poco tienen que ver con CSS3... Además, a idea de usar CSS3 es forzar a las personas a actualizar sus exploradores para evitar que aterroricen Desarrolladores y Diseñadores web de la misma forma en que IE 6 lo hizo por años
Por Oscar el 01 de Octubre de 2011
Por Hueso ARG el 01 de Noviembre de 2011
Saludos.-
Por carla el 15 de Noviembre de 2011
Por Rafael Gaviria el 21 de Noviembre de 2011
Por zabaez el 30 de Enero de 2012
Por Zero_COOL el 06 de Marzo de 2012
Por eftenoon el 14 de Marzo de 2012
Gracias y saludos.
Por nuryfv el 07 de Mayo de 2012
Por Carlos el 30 de Mayo de 2012
El problema qe tengo es que no puedo verlo en IE7 & IE8, si lo veo en FF, Opera, Chrome e IE9 si visualizo el contenido, en el lugar donde laboro el navegador standar es IE7 & IE8, como podría hacerle??
Por Fer el 10 de Julio de 2012
Por stiven el 27 de Julio de 2012
!Saludos ! y nuevamente gracias
Por coso30 el 31 de Julio de 2012
SALUDOS!!!
http://html5boilerplate.com/
y que hay con css3, como lo hacemos compatible ?
Por preyslave el 17 de Agosto de 2012
Por piperg81 el 30 de Agosto de 2012
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<link href="cuadro.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="cuadro.js"></script>
</head>
<body>
<div class="wlby_movie">
<div class="wlby_1">
<!-- Start of symbol: cuadro -->
<img src="cuadro_assets/svgblock_0.svg" class="wlby_2"></img>
<!-- End of symbol: cuadro -->
</div>
</div>
</body>
</html>
Por Matu el 30 de Agosto de 2012
Muchísimas gracias por compartir esta información !
Por Viviana el 12 de Septiembre de 2012
document.createElement("figure");
Excelente ayuda y sencilla
Por orangel el 19 de Septiembre de 2012
Por kumon el 16 de Octubre de 2012
Por HUGO el 26 de Octubre de 2012
Por miqqes el 30 de Octubre de 2012
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!-- html5.js - IE 9 -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE - 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Por coretl el 17 de Noviembre de 2012
Por dixon zamora el 15 de Enero de 2013
Por Wilson el 13 de Febrero de 2013
se baja la la ultima version http://modernizr.com/
coloca esto es estu pagina
<script src="modernizr-latest.js"></script>
Listo es una libreria magica que hace todo el trabajo
Por andre el 05 de Marzo de 2013
Por Fabian27 el 27 de Marzo de 2013
Por Fabian27 el 27 de Marzo de 2013
Debo actualizar algo del servidor?
Fabian27 :
Debo actualizar algo del servidor?
No creo que tenga que ver tu servidor, verifica que si hayas montado todos los archivos en tu servidor, quizá algún link está roto o algo por el estilo.
Por Darius el 05 de Septiembre de 2013
Por elizabeth el 02 de Octubre de 2013
<!DOCTYPE html>
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("hgroup");
document.createElement("p");
</script>
<![endif]-->
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Mi primer sitio HTML5</title>
<link rel="stylesheet" href="stylos.css"/>
</head>
<body>
<header><h1>Mi primer sitio HTML5</h1></header>
<nav>
<ul>
<li><a href="#">inicio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">vídeos</a></li>
</ul>
</nav>
<section>
<article>
asañslañslañslkañdkasasasssssssssz<br/>
asañslañslañslkañdkasasasssssssssz<br/>
asañslañslañslkañdkasasasssssssssz<br/>
</article>
</section>
<footer>
<small>
Copyright © 2011<br/>
Actualizado en: 11 Noviembre 2011
</small>
</footer>
</body>
</html>
la del css
nav{
float:left;
width: 150px;
}
section{
float:right;
width:570px;
}
footer{float:left;margin-top:5%}
body {
background-color:#f2f2f2;
margin: 36px auto;
width: 720px;
}
nav ul {
list-style-type:none;
margin: 0px;
padding: 0px;
}
nav ul li {
margin: 5px; padding: 10px; text-transform:capitalize; font-size: 20px;
}
nav ul li a {
color:#e34c26;
text-decoration: none;
}
article:nth-child(odd){
background-color:rgba(255, 255, 255, 0.20)
}
article:nth-child(even){
background-color:rgba(255, 255, 255, 0.60)
}
article{
margin-bottom:5px; padding: 10px;
border-radius: 10px 10px 10px 10px;
border-style: solid;
border-width: 10px;
border-color:#ffffff;
}
nav ul li {
margin: 5px; padding: 10px; text-transform:capitalize; font-size: 20px;
border-radius: 152px 304px 228px 152px;
border-style: solid;
border-width: 3px;
border-color:#ffffff
}
Por elizabeth el 02 de Octubre de 2013
Por Lutaj el 11 de Octubre de 2013
Por HaMo el 13 de Noviembre de 2013
Gracias.
Por Marko el 25 de Diciembre de 2013
Por dd el 01 de Enero de 2014
Por domingo-vichoreactor el 01 de Enero de 2014
Por SAPOLIO el 01 de Enero de 2014
Por new bie el 01 de Enero de 2014
Por David Elmer el 11 de Marzo de 2014
Por hugovic el 20 de Mayo de 2014
Por emma el 21 de Mayo de 2014
<!--[if lte IE 9]>
<script src='http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js'></script>
<script src='http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js'></script>
<![endif]-->
Solo tienen que colocar eso dentro del <head> y listo
Por Alex el 30 de Julio de 2014
Recursos gratuitos para celulares
Por Boris el 06 de Agosto de 2014
www.cueroydiseno.cl
Por Megamouse el 15 de Octubre de 2014
Por el 23 de Noviembre de 2014
Por C&sw el 31 de Enero de 2015
Por Cloud el 05 de Febrero de 2015
Por HYOP el 14 de Abril de 2015
Por nuria el 02 de Junio de 2015
Por JOTAS el 04 de Junio de 2015
Muy útil.
Por marcos el 14 de Julio de 2015
Por ana el 18 de Septiembre de 2015
Por ivan el 16 de Febrero de 2016