[HTML/HTML5] Phần 35: Hỗ trợ trình duyệt HTML5

142 lượt xem 
 Thể loại: HTML/HTML5

HTML5 được hỗ trợ ở tất cả trình duyệt. Thêm nữa, tất cả trình duyệt, mới hay cũ, tự động xử lý các phần tử không thể nhận diện dưới dạng các phần tử nội dòng (inline elements). Bởi vì điều này, bạn có thể làm cho các trình duyệt phiên bản cũ (chẳng hạn như IE6) có thể hiển thị đúng HTML5.

Định nghĩa các phần tử ngữ nghĩa là các phần tử khối
HTML5 định nghĩa 8 phần tử ngữ nghĩa mới và đều là các phần tử khối. Để đảm bảo các phần tử này hiển thị đúng ở các trình duyệt cũ, bạn có thể dùng thuộc tính display trong CSS như sau:

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ó thể thêm các phần tử mới vào trang HTML. Ví dụ sau thêm một phần tử mới gọi là dammio và định nghĩa phong cách cho nó.

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

<h1>Tiêu đề h1 --- dammio.com</h1>
<dammio>Phần tử dammio</dammio>

</body>
</html>

Mệnh đề document.createElement(“dammio”) dùng để định nghĩa một phần tử mới trong IE 9, và các phiên bản về sau.

Vấn đề với Internet Explorer 8
Bạn có thể dùng giải pháp mô tả trên các phần tử HTML5 mới. Tuy nhiên, IE8 (và các phiên bản sau) không cho phép định nghĩa phong cách cho các phần tử không rõ (unknown elements). Để giải quyết điều này, Sjoerd Visscher đã tạo ra HTML5Shiv, một thư viện JavaScript để cho phép hiển thị phong cách cho các phần tử HTML5 ở các phiên bản trước IE9.

Cú pháp cho HTML5Shiv
HTML5Shiv được đặt trong thẻ head và là một tập tin javascript được tham chiếu trong thẻ script. Bạn nên dùng HTML5Shiv khi bạn sử dụng các phần tử HTML5 mới như: article, section, aside, nav và footer. Bạn có tải phiên bản HTML5shiv mới nhất tại địa chỉ https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js.

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

Ví dụ HTML5Shiv
Nếu bạn không muốn tải về và lưu trữ HTML5Shiv ở trang của bạn, bạn có thể dùng tham chiếu ở trang CDN. Đoạn mã HTML5Shiv phải được đặt bên trong phần tử head, sau bất cứ stylesheet nào.

<!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>Ví dụ HTML5Shiv --- dammio.com</h1>

<article>
<h2>Tiêu đề</h2>
<p>Đây là đoạn văn ví dụ mẫu bên trong một phần tử article.</p>
</article>

</section>

</body>
</html>

Kết luận: Bài viết nếu ra một số trường hợp xử lý nếu trình duyệt phiên bản cũ không hiển thị HTML5. Nếu bạn viết HTML5 cho các trình duyệt mới thì có thể hoàn toàn yên tâm HTML5 sẽ được hỗ trợ đầy đủ.

Bình luận Facebook

3
Để lại bình luận

avatar
1000
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
[HTML/HTML5] Phần 36: Các phần tử mới trong HTML5 | | Dam-mi-o[HTML/HTML5] Phần 34: Giới thiệu về HTML5 | | Dam-mi-o Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
trackback

[…] [HTML/HTML5] Phần 35: Hỗ trợ trình duyệt HTML5 […]

trackback

[…] << Bài trước Trang mục lục Bài tiếp theo >> […]

trackback

[…] [HTML/HTML5] Phần 35: Hỗ trợ trình duyệt HTML5 […]