Supporto dei browser HTML5

Puoi aiutare i browser di versione vecchia a gestire HTML5.

Supporto dei browser HTML5

Tutti i browser moderni supportano HTML5.

Inoltre, tutti i browser, indipendentemente dalla loro età, trattano automaticamente gli elementi non riconosciuti come elementi inline.

Ecco perché puoi aiutare i browser obsoleti a gestire gli elementi HTML "sconosciuti".

Nota:Puoi persino insegnare all'IE6 dell'Età della Pietra come gestire gli elementi HTML sconosciuti.

definire gli elementi HTML5 come elementi bloccanti

HTML5 ha definito otto nuovisemantici elementi HTML. Tutti sonoelemento bloccanteelemento.

Puoi considerare l'elemento CSS display proprietà impostata su block, per garantire un comportamento corretto nei browser obsoleti:

Esempio

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

Aggiungere nuovi elementi a HTML

Puoi aggiungere qualsiasi nuovo elemento a HTML utilizzando un trucco del browser:

In questo esempio ho aggiunto a HTML un elemento chiamato <myHero> definire lo stile display per il nuovo elemento:

Esempio

<!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>

Prova personalmente

Stato aggiunto in JavaScript document.createElement("myHero"), ma solo per IE.

Problemi di Internet Explorer

Questa soluzione può essere utilizzata per tutti gli elementi nuovi HTML5, ma:

Attenzione:Internet Explorer 8 e le versioni precedenti non permettono di aggiungere stili agli elementi sconosciuti.

Fortunatamente, Sjoerd Visscher ha creato "HTML5 Enabling JavaScript", "the shiv":

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

Il codice sopra è un commento, ma le versioni iniziali di IE9 lo leggeranno (e lo capiranno).

Completa soluzione per Shiv

Esempio

<!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>Il mio primo articolo</h1>
<article>
Londra è la capitale dell'Inghilterra. 
È la città più popolosa del Regno Unito, 
con una superficie metropolitana di oltre 13 milioni di abitanti.
</article>
</body>
</html>

Prova personalmente

Il link al codice shiv deve essere situato all'interno dell'elemento <head>, perché Internet Explorer deve riconoscere tutti gli elementi nuovi prima di leggerli.

HTML5 Skeleton

Esempio

<!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 Semantic</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
  <li><a href="html5_canvas.asp">Grafica HTML5</a></li>
</ul>
</nav>
<section>
<h1>Città famose</h1>
<article>
<h2>London</h2>
<p>London è la capitale della Gran Bretagna. È la città più popolata del Regno Unito,</p>
<p>con un'area metropolitana di oltre 13 milioni di abitanti.</p>
</article>
<article>
<h2>Parigi</h2>
<p>Parigi è la capitale e la città più popolata della Francia.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo è la capitale del Giappone, il centro della Greater Tokyo Area,</p>
e la più grande area metropolitana del mondo.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. Tutti i diritti riservati.</p>
</footer>
</body>
</html>

Prova personalmente