Compatibilidad de navegador HTML5

Puedes ayudar a los navegadores de versiones antiguas a manejar HTML5.

Compatibilidad de navegador HTML5

Todos los navegadores modernos admiten HTML5.

Además, todos los navegadores, nuevos o antiguos, manejan automáticamente los elementos no reconocidos como elementos en línea.

Por esta razón, puedes ayudar a que los navegadores antiguos manejen elementos HTML "desconocidos".

Notas:Incluso puedes enseñar a IE6 de la Edad de Piedra a manejar elementos HTML desconocidos.

definir elementos HTML5 como elementos de bloques

HTML5 definió ocho nuevossemánticos elementos HTML. Todos sonde bloqueselementos.

Puedes aplicar CSS display la propiedad blockpara asegurar un comportamiento correcto en navegadores antiguos:

Ejemplo

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

Agregar nuevos elementos a HTML

Puedes agregar cualquier nuevo elemento a HTML usando tricks del navegador:

En este ejemplo, se agregó un elemento HTML llamado <myHero> definir un estilo de display para los nuevos elementos

Ejemplo

<!DOCTYPE html>
<html>
<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>

Pruebe personalmente

Sentencias JavaScript añadidas document.createElement("myHero"), solo para IE.

Problemas de Internet Explorer

Este enfoque se puede usar para todos los nuevos elementos HTML5, pero:

Atención:Internet Explorer 8 y versiones anteriores no permiten agregar estilos a elementos desconocidos.

Afortunadamente, Sjoerd Visscher creó "HTML5 Enabling JavaScript", "the shiv":

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

El código anterior es un comentario, pero las versiones tempranas de IE9 lo leerán (y lo entenderán).

Solución completa de Shiv

Ejemplo

<!DOCTYPE html>
<html>
<head>
  <title>Styling HTML5</title>
  <![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<h1>Mi Primer Artículo</h1>
<article>
Londres es la capital de Inglaterra. 
Es la ciudad más poblada del Reino Unido, 
con una área metropolitana que supera los 13 millones de habitantes.
</article>
</body>
</html>

Pruebe personalmente

El enlace al código shiv debe estar ubicado dentro del elemento <head>, ya que Internet Explorer necesita reconocer todos los nuevos elementos antes de leerlos.

HTML5 SKeleton

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 SKeleton</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
  <h1>HTML5 SKeleton</h1>
</header>
<nav>
<ul>
  <li><a href="html5_semantic_elements.asp">HTML5 Semántico</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
  <li><a href="html5_canvas.asp">Gráficos HTML5</a></li>
</ul>
</nav>
<section>
<h1>Ciudades Famosas</h1>
<article>
<h2>London</h2>
<p>London es la ciudad capital de Inglaterra. Es la ciudad más poblada del Reino Unido,</p>
<p>con una área metropolitana de más de 13 millones de habitantes.</p>
</article>
<article>
<h2>París</h2>
<p>París es la capital y la ciudad más poblada de Francia.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo es la capital de Japón, el centro del Gran Área de Tokio,</p>
y la área metropolitana más poblada del mundo.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. Todos los derechos reservados.</p>
</footer>
</body>
</html>

Pruebe personalmente