Kết nối

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

2.096 lượt xem 
 Cập nhật lần cuối: 05/04/2018 lúc 16:39:28
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.

Liên quan:  [HTML/HTML5] Phần 37: Các phần tử ngữ nghĩa trong HTML5

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 đủ.

Trích dẫn bài viết
  • APA:
    Dammio. (2018). [HTML/HTML5] Phần 35: Hỗ trợ trình duyệt HTML5. https://www.dammio.com/2018/03/31/html-html5-phan-35-ho-tro-trinh-duyet-html5.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[HTML/HTML5] Phần 35: Hỗ trợ trình duyệt HTML5},
    year = {2018},
    url = {https://www.dammio.com/2018/03/31/html-html5-phan-35-ho-tro-trinh-duyet-html5},
    urldate = {2024-03-13}
    }
Theo dõi
Thông báo của
guest
3 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
3
0
Rất thích suy nghĩ của bạn, hãy bình luận.x