Hỗ trợ HTML5 trên các trình duyệt
Bạn có thể dạy cho các trình duyệt biết cách xử lý HTML5 đúng cách.
Trình duyệt hỗ trợ HTML5
HTML5 được hỗ trợ trên hầu hết các trình duyệt hiện đại. Các trình duyệt, dù mới hay cũ, đều tự động xử lý các phần tử mà nó không biết như một phần tử nội dòng. Do đó, bạn cần “dạy” cho nó biết cách xử lý các phần tử HTML mới. Ngay cả IE6 (trên Windows XP 2001) cũng có thể “dạy” được.
Định nghĩa các phần tử cú pháp thành phần tử khối
HTML định nghĩa 8 phần tử cú pháp mới, tất cả đều là ở cấp độ khối. Để đảm bảo hiển thị đúng trên trình duyệt cũ, bạn có thể đặt đặc tính display cho các phần tử này về dạng khối.
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Thêm phần tử mới vào HTML
Bạn còn có thể thêm phần tử mới vào trang HTML, như ví dụ dưới đây thêm phần tử có tên <myHero> và định nghĩa kiểu cách cho nó.
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<myHero>Phần tử myHero</myHero>
</body>
</html>
Cần dùng lệnh JavaScript document.createElement(“myHero”) để tạo phần tử mới trên IE9 và các bản trước đó.
Vấn đề với Internet Explorer 8
Có thể dùng giải pháp trên cho tất cả các phần tử HTML5 mới. Nhưng IE8 và các bản trước đó lại không cho phép tạo kiểu cách trên các phần tử nó không biết.
Vì vậy Sjoerd Visscher đã tạo ra HTML5Shiv. Đây là giải pháp thay thế JavaScript, cho phép tạo kiểu cách cho phần tử HTML5 trên các bản IE 8 trở về trước.
Cú pháp của HTML5Shiv
HTML5Shiv được đặt trong thẻ <head>, là tập tin JavaScript được tham chiếu tới trong thẻ <script>. Bạn nên dùng HTML5Shiv khi dùng các phần tử HTML5 mới như <article>, <section>, <aside>, <nav>, <footer>.
Cú pháp HTML5Shiv
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
Ví dụ về HTML5Shiv
Nếu không muốn tải và lưu trữ HTML5Shiv trên trang của mình, bạn có thể tham chiếu phiên bản trên trang CDN. Kịch bản HTML5Shiv phải được đặt trong phần tử <head>.
<!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>Trang công nghệ</h1>
<article><h2>Quản trị mạng</h2>
<p>Quản trị mạng là trang công nghệ, cung cấp các hướng dẫn, thủ thuật và tin tức công nghệ mới nhất.</p>
</article>
</section>
</body>
</html>
Link tải HTML5Shiv https://github.com/aFarkas/html5shiv hoặc tham khảo bản CDN https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
Bài trước: Giới thiệu về HTML5
Bài sau: Các phần tử mới trong HTML5
Bạn nên đọc
![❖](https://st.quantrimang.com/photos/avatars/default.png)
![❖](https://st.quantrimang.com/photos/image/icon/hoc-HTML-5-size-24x24-znd.png)
Cũ vẫn chất
-
Hướng dẫn cách kẻ chéo ô trong Excel
2 ngày -
Công thức Minecraft để chế tạo đồ cơ bản, thức ăn, công cụ dụng cụ, đồ bảo hộ, len, màu nhuộm
Hôm qua 1 -
Câu nói hay về người thứ ba, stt về người thứ ba trong tình yêu thâm thúy
Hôm qua -
Cách viết chữ màu Liên Quân Mobile
2 ngày 2 -
Khắc phục tình trạng các phím chức năng không hoạt động trong Windows 10
Hôm qua -
Cách sửa lỗi không tải được file lên Google Drive
Hôm qua -
200 biệt danh cho người yêu bằng tiếng Anh hay và ngọt ngào
2 ngày -
Cách xem phiên bản di động của một trang web bất kỳ trên máy tính
Hôm qua -
Lực ma sát là gì? Có mấy loại lực ma sát?
2 ngày 1 -
Cách chuyển dữ liệu giữa các máy tính
2 ngày