Hỗ trợ HTML5 trên các trình duyệt

Posted on by mtoplistChuyên mục:Top List

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

Trình duyệt hỗ trợ HTML5

HTML5 được hỗ trợ trên hầu hết các trình duyệt hiện đại. Các trình duyệt, dù mới hay cũ, đều tự động xử lý các phần tử mà nó không biết như một phần tử nội dòng. Do đó, bạn cần “dạy” cho nó biết cách xử lý các phần tử HTML mới. Ngay cả IE6 (trên Windows XP 2001) cũng có thể “dạy” được.

Định nghĩa các phần tử cú pháp thành phần tử khối

HTML định nghĩa 8 phần tử cú pháp mới, tất cả đều là ở cấp độ khối. Để đảm bảo hiển thị đúng trên trình duyệt cũ, bạn có thể đặt đặc tính display cho các phần tử này về dạng khối.

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

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

Bạn còn có thể thêm phần tử mới vào trang HTML, như ví dụ dưới đây thêm phần tử có tên <myHero> và định nghĩa kiểu cách cho nó.

<!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>Tiêu đề</h1>
<myHero>Phần tử myHero</myHero>

</body>
</html>

Cần dùng lệnh JavaScript document.createElement(“myHero”) để tạo phần tử mới trên IE9 và các bản trước đó.

Vấn đề với Internet Explorer 8

Có thể dùng giải pháp trên cho tất cả các phần tử HTML5 mới. Nhưng IE8 và các bản trước đó lại không cho phép tạo kiểu cách trên các phần tử nó không biết.

Vì vậy Sjoerd Visscher đã tạo ra HTML5Shiv. Đây là giải pháp thay thế JavaScript, cho phép tạo kiểu cách cho phần tử HTML5 trên các bản IE 8 trở về trước.

Cú pháp của HTML5Shiv

HTML5Shiv được đặt trong thẻ <head>, là tập tin JavaScript được tham chiếu tới trong thẻ <script>. Bạn nên dùng HTML5Shiv khi dùng các phần tử HTML5 mới như <article>, <section>, <aside>, <nav>, <footer>.

Cú pháp HTML5Shiv

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

Ví dụ về HTML5Shiv

Nếu không muốn tải và lưu trữ HTML5Shiv trên trang của mình, bạn có thể tham chiếu phiên bản trên trang CDN. Kịch bản HTML5Shiv phải được đặt trong phần tử <head>.

<!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>Trang công nghệ</h1>

<article>
<h2>Quản trị mạng</h2>
<p>Quản trị mạng là trang công nghệ, cung cấp các hướng dẫn, thủ thuật và tin tức công nghệ mới nhất.</p>
</article>

</section>
</body>
</html>

Link tải HTML5Shiv https://github.com/aFarkas/html5shiv hoặc tham khảo bản CDN https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

Bài trước: Giới thiệu về HTML5

Bài sau: Các phần tử mới trong HTML5

mtoplist