Trình duyệt hỗ trợ HTML5

Bạn có thể chỉ cách để trình duyệt xử lý HTML5 đúng cách.

Trình duyệt hỗ trợ HTML5

HTML5 được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Thêm vào đó, mọi trình duyệt cả cũ và mới sẽ tự động xử lý các phần tử không được nhận dạng như là phần tử nội tuyến. Vì vậy bạn có thể “dạy” những trình duyệt cũ cách để xử lý các phần tử HTML “lạ”.

Xác định các phần tử ngữ nghĩa là phần tử khối

HTML5 định ra 8 phần tử ngữ nghĩa mới. Tất cả chúng đều là phần tử khối.

Để đảm bảo chúng hoạt động chính xác trên các trình duyệt cũ. Bạn có thể đặt thuộc tính CSS display cho những phần tử này thành block:

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

Thêm các phần tử mới vào HTML

Bạn cũng có thể thêm các phần tử mới vào trang HTML với một mẹo.

Ví dụ này thêm một phần tử là <myHero> vào trang HTML, và định kiểu cho nó.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
  display: block;
  background-color: #dddddd;
  padding: 50px;
  font-size: 30px;
} 
</style> 
</head>
<body>

<h1>A Heading</h1>
<myHero>My Hero Element</myHero>

</body>
</html>

Cần câu lệnh JavaScript document.createElement("myHero") để tạo mới phần tử trong trình duyệt IE9 trở về trước.

Vấn đề với Internet Explorer 8

Bạn có thể sử dụng giải pháp phía trên để thêm mọi phần tử HTML5 mới.

Tuy nhiên, IE8(trở về trước) không cho phép style cho phần tử lạ.

Ơn giời, Sjoerd Vischer đã tạo ra HTML5Shiv! HTML5Shiv là JavaScript thay thế để cho phép style các phần tử HTML5 cho các phiên bản IE9 trở về trước.

Cú pháp cho HTML5Shiv

HTML5Shiv được đặt bên trong thẻ <head>

HTML5Shiv là một file JavaScipt được tham chiếu trong một thẻ <script>

Bạn nên dùng HTML5Shiv khi sử dụng các phần tử mới của HTML5 như: <article>, <section>, <aside>, <nav>, <footer>.

Bạn có thể tải về bản mới nhất của HTML5Shiv từ github hoặc tham chiếu bản CDN tại https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

Cú pháp

<head>
  <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
  <![endif]-->
</head>

Ví dụ HTML5Shiv

Nếu bạn chưa tải về và lưu HTML5 trong trang, thì có thể tham chiếu phiên bản CDN

HTML5Shiv script phải được đặt bên trong thẻ <head>, sau mọi thẻ style

Ví dụ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<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>
</body>
</html>

Tags:

Bài viết liên quan

HTML Youtube Videos

HTML Plug-ins (Trình hỗ trợ)

Âm thanh trong HTML5

HTML5 Video

Multimedia trong HTML

HTML5 SVG

HTML5 Canvas

Quy ước và phong cách viết HTML5

Chuyển đổi sang HTML5

Các phần tử ngữ nghĩa trong HTML5