Si può insegnare browser più vecchi per gestire correttamente HTML5.
Supporto browser HTML5
HTML5 è supportato in tutti i browser moderni.
Inoltre, tutti i browser, vecchi e nuovi, di gestire automaticamente gli elementi non riconosciuti come elementi inline.
A causa di questo, si può "teach" i vecchi browser per gestire "unknown" elementi HTML.
Si può anche insegnare a IE6 (Windows XP 2001) come gestire gli elementi HTML sconosciuti.
Definire HTML5 Elementi come blocco Elementi
HTML5 definisce otto nuovi elementi HTML semantici. Tutti questi sono elementi di blocco.
Per garantire un comportamento corretto in browser meno recenti, è possibile impostare la proprietà CSS display per bloccare:
header, section, footer, aside, nav, main, article, figure {
display: block;
}Aggiungendo nuovi elementi in HTML
È inoltre possibile aggiungere qualsiasi nuovo elemento in HTML con un trucco browser.
Questo esempio aggiunge un nuovo elemento chiamato <myHero> in HTML, e definisce uno stile di visualizzazione per esso:
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 tu stesso " La dichiarazione JavaScript document. createElement("myHero") document. createElement("myHero") si aggiunge, solo per soddisfare IE.
Problema con Internet Explorer
È possibile utilizzare la soluzione sopra descritta, per tutti i nuovi elementi HTML5, ma:
Internet Explorer 8 e versioni precedenti, non consente uno stile di elementi sconosciuti.
Per fortuna, Sjoerd Visscher ha creato il "HTML5 Enabling JavaScript" , " the shiv ":
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->Il codice di cui sopra è un commento, ma le versioni precedenti per IE9 lo leggerà (and understand it) .
The Complete Shiv Solution
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>My First Article</h1>
<article>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</article>
</body>
</html> Prova tu stesso " Il link al shiv codice deve essere inserito nella <head> elemento, perché Internet Explorer ha bisogno di conoscere tutti i nuovi elementi prima di loro lettura.
Uno scheletro HTML5
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>
<![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">HTML5 Graphics</a></li>
</ul>
</nav>
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</section>
<footer>
<p>© 2014 w3ii. All rights reserved.</p>
</footer>
</body>
</html> Prova tu stesso "