WebVN Cộng đồng web Việt Nam
Bạn có thể “dạy” cho các trình duyệt cũ xử lý HTML5 một cách chính xá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, những “thẻ lạ” mà trình duyệt chưa hiểu được, nó sẽ coi như là một thẻ inline (xem thêm Block và Inline trong HTML).
Chính vì thế, bạn có thể “dạy” các trình duyệt cũ hiểu các thẻ mới của HTML5.
Định nghĩa các thẻ HTML5 như thẻ block
HTML5 định nghĩa 8 thẻ có ý nghĩa (semantic) mới. Tất cả những thẻ này đều là thẻ block.
Để đả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:
|
1 2 3 |
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ỳ thẻ mới nào vào HTML với 1 thủ thật như dưới đây.
Ví dụ thêm một thẻ là <newtag> và HTML và hiển thị style cho thẻ đó:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!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>Đề mục</h1> <p>Nội dung trang</p> <newtag>Đây là nội dung trong thẻ mới của HTML</newtag> </body> </html> |
Đoạn JavaScript document.createElement(“newtag”) được thêm vào chỉ để phục vụ cho IE.
Vấn đề với Internet Explorer
Bạn có thể sử dụng giải pháp được mô tả ở trên cho tất cả các thẻ mới của HTML5, nhưng:
Nhưng rất may là tác giả Sjoerd Visscher đã tạo ra một tệp tin JavaScript làm cho trình duyệt IE hỗ trợ HTML5 được gọi là “shiv”:
|
1 2 3 |
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> |
Đoạn mã ở trên chỉ dành cho trình duyệt Internet Explorer phiên bản 8 trở về trước. Với các trình duyệt khác hoặc phiên bản Internet Explorer cao hơn, chỉ coi đây là một đoạn ghi chú mà thôi.
Sử dụng SHIV
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Trang trí HTML5</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> </head> <body> <h1>London</h1> <article> 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. </article> </body> </html> |
Đường dẫn đến shiv phải được để trong thẻ <head> vì Internet Explorer cần phải biết tất cả các thẻ mới trước khi đọc chúng.
Khung của một trang HTML5
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!DOCTYPE html> <html lang="vi"> <head> <title>Khung của trang HTML5</title> <meta charset="utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> body {font-family: Verdana, sans-serif; font-size:0.8em;} header,nav, section,article,footer {border:1px solid grey; margin:5px; padding:8px;} nav ul {margin:0; padding:0;} nav ul li {display:inline; margin:5px;} </style> </head> <body> <header> <h1>Khung của trang HTML5</h1> </header> <nav> <ul> <li><a href="/keo-tha-trong-html5/">Kéo thả trong HTML5</a></li> <li><a href="/geolocation-dinh-vi-vi-tri-trong-html5/">Định vị trong HTML5</a></li> <li><a href="/canvas-trong-html5/">Canvas trong HTML5</a></li> </ul> </nav> <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à là thành phố đông dân nhất của Pháp.</p> </article> <article> <h2>Tokyo</h2> <p>Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo và là đô thị đông nhất trên thế giới.</p> </article> </section> <footer> <p>© 2015 WebVN. Toàn quyền sở hữu.</p> </footer> </body> </html> |
