Dukungan Browser HTML5

Anda dapat membantu peramban versi lama untuk mengelola HTML5.

Dukungan Browser HTML5

Seluruh browser modern mendukung HTML5.

Selain itu, semua browser, baik lama maupun baru, akan secara otomatis menganggap elemen yang tak dikenal sebagai elemen dalam baris.

Karena itulah, Anda dapat membantu browser lama untuk mengatur elemen HTML yang "tak dikenal".

Catatan:Anda bahkan dapat mengajarkan IE6 zaman batu untuk mengatur elemen HTML yang tak dikenal.

Mendefinisikan elemen HTML5 sebagai elemen blok

HTML5 mendefinisikan delapan elemen baruSemantik Elemen HTML. Semua adalahBlokelemen.

Anda dapat menempatkan CSS display properti diatur menjadi block, untuk memastikan perilaku yang benar di browser lama:

实例

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

Menambahkan elemen baru ke HTML

Anda dapat menambahkan elemen baru ke HTML melalui trick peramban:

Contoh ini menambahkan elemen bernama <myHero> menentukan gaya display untuk elemen yang baru:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Elemen HTML</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>
<body>
<h1>Penamaan Pertama saya</h1>
<p>Paragraf pertama saya.</p>
<myHero>My First Hero</myHero>
</body>
</html>

Coba Sendiri

Kutipan JavaScript yang telah ditambahkan document.createElement("myHero"), hanya untuk IE.

Masalah Internet Explorer

Rancangan di atas dapat digunakan untuk semua elemen HTML5 baru, tetapi:

Perhatian:Internet Explorer 8 dan versi yang lebih awal, tidak mengizinkan penambahan gaya pada elemen yang tak dikenal.

Beruntungnya, 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 bagian komen, tetapi versi awal IE9 akan membaca dan memahami dia (dan memahami dia).

Lengkap Solusi Shiv

实例

<!DOCTYPE html>
<html>
<head>
  <title>Pengaturan 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 adalah ibu kota Inggris. 
Ini adalah kota yang paling padat di United Kingdom. 
dengan area metropolitan yang melampau 13 juta penduduk.
</article>
</body>
</html>

Coba Sendiri

Referensi kode shiv harus berada di dalam elemen <head>, karena Internet Explorer perlu mengenal semua elemen baru sebelum membaca.

HTML5 Skeleton

实例

<!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">Grafik HTML5</a></li>
</ul>
</nav>
<section>
<h1>Kota Terkenal</h1>
<article>
<h2>London</h2>
<p>London adalah ibu kota kota Inggris. Ini adalah kota paling padat di United Kingdom,</p>
<p> dengan area metropolitan melebihi 13 juta penduduk.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris adalah ibu kota dan kota paling padat di Perancis.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo adalah ibu kota Jepang, pusat Area Tokyo Besar,</p>
dan area metropolitan yang paling padat di dunia.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. Hak cipta disimpan.</p>
</footer>
</body>
</html>

Coba Sendiri