Hỗ trợ trình duyệt HTML5

Bạn có thể giúp trình duyệt phiên bản cũ xử lý HTML5.

Hỗ trợ trình duyệt HTML5

Tất cả các trình duyệt hiện đại đều hỗ trợ HTML5.

Ngoài ra, tất cả các trình duyệt, bất kể mới hay cũ, sẽ tự động xử lý yếu tố không được nhận biết như yếu tố nội tuyến.

Vì vậy, bạn có thể giúp trình duyệt cũ xử lý yếu tố HTML "không biết".

Chú thích:Bạn thậm chí có thể dạy IE6 thời石器 cách xử lý yếu tố HTML không biết.

định nghĩa yếu tố HTML5 là yếu tố cấp

HTML5 đã định nghĩa tám yếu tố mớiý nghĩa HTML. Tất cả đều làcấpyếu tố.

Bạn có thể đặt CSS display giá trị thuộc tính được thiết lập là block, để đảm bảo hành vi chính xác trong trình duyệt cũ:

Mô hình

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

Thêm yếu tố mới vào HTML

Bạn có thể thêm bất kỳ yếu tố mới nào vào HTML bằng cách sử dụng trick trình duyệt:

Ví dụ này đã thêm một yếu tố vào HTML có tên <myHero> các yếu tố mới, và định nghĩa樣式 display cho nó:

Mô hình

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

Thử ngay

Câu lệnh JavaScript đã thêm document.createElement("myHero"), chỉ áp dụng cho IE.

Vấn đề của Internet Explorer

Giải pháp trên có thể được sử dụng cho tất cả các yếu tố HTML5 mới, nhưng:

Lưu ý:Internet Explorer 8 và các phiên bản sớm hơn không cho phép thêm样式 vào các yếu tố không biết.

May mắn thay, Sjoerd Visscher đã tạo ra "HTML5 Enabling JavaScript", "the shiv":

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

Mã trên là một đoạn chú thích, nhưng các phiên bản đầu tiên của IE9 sẽ đọc nó (và hiểu nó).

Giải pháp Shiv toàn diện

Mô hình

<!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>Bài viết đầu tiên của tôi</h1>
<article>
London là thủ đô của Anh. 
Đó là thành phố đông dân nhất ở Vương quốc Anh, 
với diện tích đô thị hơn 13 triệu dân.
</article>
</body>
</html>

Thử ngay

Liên kết đến mã shiv phải nằm trong phần <head> vì Internet Explorer cần phải nhận ra tất cả các yếu tố mới trước khi đọc.

HTML5 Skeleton

Mô hình

<!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 Tính ngữ nghĩa</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Định vị</a></li>
  <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>
<section>
<h1>Thành phố nổi tiếng</h1>
<article>
<h2>London</h2>
<p>London là thành phố thủ đô của Anh. Nó là thành phố đông dân nhất tại Vương quốc Anh,</p>
<p>với khu vực đô thị có hơn 13 triệu cư dân.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris là thủ đô và thành phố đông dân nhất của Pháp.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo là thủ đô của Nhật Bản, trung tâm của khu vực Tokyo lớn,</p>
và khu vực đô thị đông dân nhất trên thế giới.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. Bảo lưu tất cả quyền lợi.</p>
</footer>
</body>
</html>

Thử ngay