Anda dapat menggunakan browser lama untuk menangani HTML5.
HTML5 Browser Dukungan
HTML5 didukung di semua browser modern.
Selain itu, semua browser, lama dan baru, otomatis menangani elemen yang belum diakui sebagai elemen inline.
Karena itu, Anda bisa "mengajar" browser lama untuk menangani "tidak diketahui" elemen HTML.
Menentukan HTML5 Elemen sebagai Blok Elements
HTML5 mendefinisikan 8 elemen HTML baru semantik. Semua ini adalah elemen tingkat blok.
Untuk mengamankan perilaku yang benar di browser lama, Anda dapat mengatur properti tampilan CSS untukmemblokir:
header, section, footer, asside, nav, main, article, figure {
display;
}
Menambahkan New Elemen ke HTML
Anda dapat menambahkan elemen baru ke HTML dengan trik peramban:
Contoh ini menambahkan elemen baru yang disebut <myHero> ke HTML, dan mendefinisikan gaya tampilan:
<!DOCTYPE html>
<html>
<head>
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display:block;
background-color:#ddd;
padding:50px;
font-size:30px;
}
</style>
<title>Latihan</title>
</head>
<body>
<h1>Heading pertama</h1>
<p>Paragraf pertama</p>
<myHero>hero Pertama</myHero>
</body>
Hasil:
JavaScript Pernyataan 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 yang tidak diketahui.
Untungnya, Sjoerd Visscher menciptakan "JavaScript HTML5 Mengaktifkan", "shiv itu":
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
The Shiv Lengkap
<!DOCTYPE html>
<html>
<head>
<title>Latihan</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>Artikelku yang pertama</h1>
<article>
London adalah ibukota Inggris . Ini adalah kota terpadat di Inggris ,
dengan wilayah metropolitan lebih dari 13 juta jiwa .
</article>
</body>
</html>
Link ke kode shiv harus ditempatkan dalam <head> elemen, karena Internet Explorer perlu tahu tentang semua unsur-unsur baru sebelum membacanya.
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 style="text-align:center;">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 adalah ibukota Inggris . Ini adalah kota terpadat di Inggris ,
dengan wilayah metropolitan lebih dari 13 juta jiwa .</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris adalah ibukota dan kota terpadat dari Perancis .</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo adalah ibu kota Jepang , pusat Greater Tokyo Area ,
dan wilayah metropolitan terpadat di dunia .</p>
</article>
</section>
<footer>
<p style="text-align:center;">© 2015 duniakomputer. All rights reserved.</p>
</footer>
</body>
</html>
0 komentar:
Posting Komentar