Trình Duyệt Hỗ Trợ HTML5 - WebVN

Trang chủ » Trình Duyệt Html5 » Trình Duyệt Hỗ Trợ HTML5 - WebVN

Có thể bạn quan tâm

« Bài TrướcBài Tiếp »

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.

Thậm trí bạn còn có thể dạy cho cả IE6 (Windows XP 2001) hiểu cách xử lý các thẻ mới trong HTML.

Đị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:

123 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ẻ đó:

123456789101112131415161718192021222324 <!DOCTYPEhtml><html><head><title>ThêmthẻmớivàoHTML</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ộidung trang</p> <newtag>Đâylànộidung trong thẻmớicủaHTML</newtag> </body></html>

Demo

Đ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:

Internet Explorer 8 và các phiên bản trước đó không cho phép sử dụng CSS để trang trí cho các thẻ chưa biết.

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”:

123 <!--[ifltIE9]><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

12345678910111213141516171819 <!DOCTYPEhtml><html><head><title>TrangtríHTML5</title><!--[ifltIE9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body> <h1>London</h1> <article>LondonlàthủđôcủaNướcAnh.Nólàthành phốđôngdânnhấttrongVương QuốcAnhvớimộtđôthịcódiệntíchhơn13triệucưdân.</article> </body></html>

Demo

Đườ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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 <!DOCTYPE html><html lang="vi"><head><title>Khungcủatrang HTML5</title><meta charset="utf-8"> <!--[ifltIE9]><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:1pxsolidgrey;margin:5px;padding:8px;}nav ul {margin:0;padding:0;}nav ul li {display:inline;margin:5px;}</style></head><body> <header><h1>Khungcủatrang HTML5</h1></header> <nav><ul><li><a href="/keo-tha-trong-html5/">Kéothảtrong HTML5</a></li><li><a href="/geolocation-dinh-vi-vi-tri-trong-html5/">Địnhvịtrong HTML5</a></li><li><a href="/canvas-trong-html5/">Canvas trong HTML5</a></li></ul></nav> <section> <h1>Cácthành phốnổitiếng</h1> <article><h2>London</h2><p>LondonlàthủđôcủaNướcAnh.Nólàthành phốđôngdânnhấttrongVương QuốcAnhvớimộtđôthịcódiệntíchhơn13triệucưdân.</p></article> <article><h2>Paris</h2><p>Parislàthủđôvàlàthành phốđôngdânnhấtcủaPháp.</p></article> <article><h2>Tokyo</h2><p>TokyolàthủđôcủaNhậtBản,trungtâmcủavùng thủđôTokyovàlàđôthịđông nhấttrênthếgiới.</p></article> </section> <footer><p>&copy;2015WebVN.Toànquyềnsởhữu.</p></footer> </body></html>

Demo

« Bài TrướcBài Tiếp »

Từ khóa » Trình Duyệt Html5