Suporte do Navegador HTML5

Você pode ajudar navegadores de versões antigas a lidar com HTML5.

Suporte do Navegador HTML5

Todos os navegadores modernos suportam o HTML5.

Além disso, todos os navegadores, novos ou antigos, tratam automaticamente elementos não reconhecidos como elementos inline.

Por isso, você pode ajudar navegadores antigos a lidar com elementos HTML "desconhecidos".

Nota:Você até pode ensinar o IE6 da Idade da Pedra a lidar com elementos HTML desconhecidos.

definir elementos HTML5 como elementos de bloco

O HTML5 definiu oito novossemânticos HTML. Todos sãoelementoselementos.

Você pode usar CSS display o atributo é configurado como blockpara garantir um comportamento correto em navegadores antigos:

Exemplo

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

Adicionar novos elementos ao HTML

Você pode adicionar qualquer novo elemento ao HTML usando o trick do navegador:

Este exemplo adiciona ao HTML um elemento chamado <myHero> definir um estilo de exibição:

Exemplo

<!DOCTYPE html>
<html>
<head>
  <title>Criando um Elemento HTML</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>
<body>
<h1>Meu Primeiro Título</h1>
<p>Meu primeiro parágrafo.</p>
<myHero>Meu Primeiro Heroi</myHero>
</body>
</html>

Experimente por Si Mesmo

Sentença JavaScript adicionada document.createElement("myHero"), apenas para o IE.

Problemas do Internet Explorer

Este método pode ser usado para todos os novos elementos HTML5, mas:

Atenção:O Internet Explorer 8 e versões anteriores não permitem adicionar estilos a elementos desconhecidos.

Felizmente, Sjoerd Visscher criou "HTML5 Enabling JavaScript", "the shiv":

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

O código acima é um comentário, mas as versões iniciais do IE9 o lê (e o entende).

Completa Solução Shiv

Exemplo

<!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>Meu Primeiro Artigo</h1>
<article>
Londres é a capital da Inglaterra. 
É a cidade mais populosa do Reino Unido, 
com uma área metropolitana de mais de 13 milhões de habitantes.
</article>
</body>
</html>

Experimente por Si Mesmo

O link para o código shiv deve estar dentro do elemento <head>, pois o Internet Explorer precisa reconhecer todos os novos elementos antes de ler.

HTML5 SKeleton

Exemplo

<!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>Cidades Famosas</h1>
<article>
<h2>Londres</h2>
<p>Londres é a cidade capital da Inglaterra. É a cidade mais populosa do Reino Unido,</p>
<p>com uma área metropolitana de mais de 13 milhões de habitantes.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris é a capital e a cidade mais populosa da França.</p>
</article>
<article>
<h2>Tóquio</h2>
<p>Tóquio é a capital do Japão, o centro da Grande Área de Tóquio,</p>
e a área metropolitana mais populosa do mundo.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. Todos os direitos reservados.</p>
</footer>
</body>
</html>

Experimente por Si Mesmo