Bài 30: Các trình duyệt hỗ trợ HTML5

HTML5 có các cải tiến mới so với các phiên bản HTML trước đây nên một số phần tử trong HTML5 có thể không được hỗ trợ trên trình duyệt. Bài này giới thiệu cách để bạn có thể “dạy” cho các trình duyệt cũ hiểu và xử lí HTML5 một cách chính xác nhất.

Các trình duyệt hỗ trợ HTML5

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

Ngoài ra, tất cả các trình duyệt, cũ và mới, tự động xử lí các phần tử “lạ” mà trình duyệt chưa hiểu được như là phần tử “Inline“. Inline là những thẻ hiển nội dung trên cùng một dòng (không tạo ra dòng mới, không xuống dòng).

Ví dụ như thẻ: <b>, <td>, <a>, <img>.

Chính vì vậy, bạn có thể “dạy” cho các trình duyệt cũ hiểu và có thể xử lí các phần tử mới của HTML5.

Thậm chí bạn cũng có thể giúp cho IE6 (Windows XP 2001) có thể hiểu và xử lí các phần tử mới mà không biết trong HTML.

Định nghĩa các phần tử HTML5 như là phần tử Block

Block là những thẻ tự động tạo một dòng mới ở đầu và ở cuối của thẻ khi hiển thị trên trình duyệt.

Ví dụ như thẻ: <h1>, <p>, <ul>, <table>.
HTML5 định nghĩa 8 phần tử ngữ nghĩa (semantic) mới. Tất cả chúng đều là phần tử block-level.

Để đảm bảo các thẻ này vẫn hoạt động đúng trong các trình duyệt cũ, bạn có thể thiết lập thuộc tính CSS display là block như sau:


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

Thêm các thẻ mới vào HTML

Bạn có thể thêm bất kì phần tử mới cho 1 trang HTML với thủ thuật sau đây.

Ví dụ dưới đây minh họa cho việc thêm một phần tử là <newtag> đến trang HTML và hiển thị style cho phần tử đó:

Ví dụ 1:


<!DOCTYPE html>
<html>
<head>
<title>Thêm thẻ mới vào HTML</title>
<script>document.createElement("newtag")</script>
<style>
newtag{
display:block;
background-color:#ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>Tiêu đề</h1>

<p>Nội dung trang:</p>

<newtag>Đây là nội dung trong thẻ mới của HTML!</newtag>

</body>
</html>

Xem kết quả

Đoạn JavaScript: document.createElement(“newtag”) là để tạo ra một phần tử mới trong IE 9 và các phiên bản cũ hơn của IE.

Các sự cố thường gặp với Internet Explorer 8

Bạn có thể sử dụng các giải pháp đã đề cập ở trên cho tất cả các phần tử của HTML5

Tuy nhiên, vấn đề gặp phải là IE8 (và các phiên bản trước đó) không cho phép sử dụng CSS cho các phần tử chưa biết( unknown)!

Nhưng rất may là tác giả Sjoerd Visscher đã tạo ra HTML5Shiv.

HTML5Shiv là một tệp tin JavaScript giúp cho các phần tử của HTML5 được hỗ trợ trong các phiên bản trước Internet Explorer 9.


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

Giải pháp với HTML5Shiv

Các liên kết đến HTML5Shiv phải để trong phần tử <head> vì Internet Explorer cần phải biết tất cả các thẻ mới trước khi đọc chúng:

Ví dụ 2:


<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>

<section>

<h1>Các thành phố nổi tiếng</h1>

<article>
<h2>London</h2>
<p>London là thủ đô của Nước Anh. Nó là thành phố đông dân nhất trong Vương Quốc Anh với một đô thị có diện tích 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 nước Pháp.</p>
</article>

</section>

</body>
</html>

Xem kết quả