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

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>
  
</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">
 
</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ài liên quan

Một số plugin hỗ trợ PSR trên các IDE/Code Editor được sử dụng rộng rãi khi lập trình PHP

Mình đã định chấm dứt vụ PHP Standard Recomendations ở sau bài PSR-17 rồi, nhưng mà như đã đề cập mô tả series, phần lớn các lập trình viên thì đều dùng đến cùng lắm là 4 cái PSR-1, PSR-2, PSR-3 và PSR-4(mình thì mang tiếng dịch đủ thế thôi nhưng cũng chịu chả hiểu mấy chuẩn không phải 4 cái ...

Tạ Quốc Bảo viết 4 tuần trước

CSS Transparency trên toàn bộ các trình duyệt

Chúng ta sẽ áp dụng các thuộc tính sau cho một đối tượng HTML nào đó muốn transparent. đoạn code như sau: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } opacity: 0.5; Đây là một thuộc tính rất quan trọng bởi ...

Tạ Quốc Bảo viết 19:57 ngày 04/10/2018

Cố định Header và Footer trên các trình duyệt

Hôm nay lang thang trên mạng và tình cờ tìm hiểu được một kỹ thuật rất hay và có tính ứng dụng cao trong việc làm layout cho Website. Nội dung chính của kỹ thuật đó là chúng ta sẽ giữ cho phần Header và phần Footer cố định, còn phần nội dung ở giữa sẽ xuất hiện thanh Scroll trong trường hợp nó dài ...

Bùi Văn Nam viết 19:56 ngày 04/10/2018

Lỗi spoofing của các trình duyệt trên nền Android

Sau khi phát hiện ra các lỗ hổng tương tự ở các trình duyệt Internet Explore và Safary, mới đây, lỗ hổng spoofing tiếp tục được phát hiện trên các trình duyệt khác trên nền Android. Lỗ hổng này cho phép những kẻ tấn công hướng người dùng vào trang web độc hại. Chuyên gia Rafay Baloch đã phát ...

Hoàng Hải Đăng viết 22:33 ngày 17/09/2018

Google tiếp tục bị cáo buộc độc quyền, khi cố tình làm chậm YouTube trên các trình duyệt Edge và Firefox

Google vừa mới phải chịu án phạt kỷ lục hơn 5 tỷ USD từ Liên Minh Châu Âu EU, vì hành vi độc quyền đối với nền tảng Android và các ứng dụng. Tuy nhiên mới đây, gã khổng lồ tìm kiếm tiếp tục bị cáo buộc cạnh tranh không lành mạnh, liên quan đến trang YouTube và tốc độ truy cập trên các ...

Trịnh Tiến Mạnh viết 16:28 ngày 11/09/2018
0