Anda dapat mengajarkan browser lama untuk menangani HTML5 dengan benar.
HTML5 Dukungan Browser
HTML5 didukung di semua browser modern.
Selain itu, semua browser, lama dan baru, secara otomatis menangani elemen yang belum diakui sebagai elemen inline.
Karena itu, Anda bisa "teach" browser lama untuk menangani "unknown" elemen HTML.
Anda bahkan bisa mengajar IE6 (Windows XP 2001) bagaimana menangani elemen HTML tidak diketahui.
Mendefinisikan HTML5 Elemen sebagai Blok Elements
HTML5 mendefinisikan delapan elemen HTML semantik baru. Semua ini adalah unsur-unsur blok-tingkat.
Untuk mengamankan perilaku yang benar di browser lama, Anda dapat mengatur properti tampilan CSS untuk memblokir:
header, section, footer, aside, nav, main, article, figure {
display: block;
}Menambahkan New Elemen untuk HTML
Anda juga dapat menambahkan elemen baru ke HTML dengan trik browser.
Contoh ini menambahkan elemen baru yang disebut <myHero> untuk HTML, dan mendefinisikan gaya tampilan untuk itu:
Contoh
<!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> Cobalah sendiri " The JavaScript pernyataan document. createElement("myHero") document. createElement("myHero") ditambahkan, hanya untuk memuaskan IE.
Masalah Dengan Internet Explorer
Anda bisa menggunakan solusi yang dijelaskan di atas, untuk semua elemen HTML5 baru, tetapi:
Internet Explorer 8 dan sebelumnya, tidak memungkinkan styling dari unsur-unsur yang tidak diketahui.
Untungnya, Sjoerd Visscher menciptakan "HTML5 Enabling JavaScript" , " the shiv ":
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->Kode di atas adalah komentar, tapi versi sebelumnya untuk IE9 akan membacanya (and understand it) .
Lengkap Shiv Solusi
Contoh
<!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> Cobalah sendiri " Link ke shiv kode harus ditempatkan dalam <head> elemen, karena Internet Explorer perlu tahu tentang semua elemen baru sebelum membaca mereka.
HTML5 Skeleton
Contoh
<!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> Cobalah sendiri "