Tôi đang xây dựng một ứng dụng web để sử dụng trên PC. Những thẻ HTML5 nào cần tránh xa để ngăn chặn các vấn đề tương thích với các Trình duyệt như IE8 trở lên?

Lưu ý: Hầu hết các câu hỏi dành cho lứa tuổi 1-3 về chủ đề này.

Bạn đã hỏi những thẻ HTML5 nào cần tránh xa.

Chà Một số thẻ từ HTML5 theo hiểu biết của tôi được tạo ra vì lý do ngữ nghĩa. như sau đây chẳng hạn.

<article> <section> <aside> <nav> <header> <footer> ..ect

Chúng gần như tốt để làm việc và chỉ cần một chút CSS, ví dụ. display: block;để hoạt động bình thường trong hầu hết các trình duyệt, mặc dù trong các trình duyệt cũ hơn. Internet Explorer bạn bắt buộc phải tạo một phần tử trong Javascript để nó tương thích.

Đây là một ví dụ.

document.createElement('article');

Sẽ thiết lập <article>phần tử để sử dụng trong Internet Explorer cũ hơn.

Đối với các thẻ HTML5 nâng cao hơn yêu cầu chức năng Javascript để hoạt động như sau.

<audio> <video> <source> <track> <embed> And most importantly <canvas> 

Các yếu tố này khó hỗ trợ / shiv hơn trong các trình duyệt cũ hơn. Mặc dù tôi đã bao gồm một liên kết đến các polyfills trình duyệt ở phía dưới, mặc dù tôi chưa tự mình điều tra chúng.

Vì vậy, tôi sẽ nói rằng bất kỳ phần tử nào không yêu cầu chức năng Javascript đều hoàn toàn tốt để sử dụng với một chút mã hỗ trợ trình duyệt chéo.

Nếu nhắm mục tiêu của bạn > IE8 thì bạn sẽ ổn nếu bạn sử dụng shiv.

Tôi gọi các trình duyệt cũ hơn là gì? <IE9

Hỗ trợ trình duyệt cho các thẻ HTML5 ngày nay.

<section>, <article>, <aside>, <header>, <footer>, 
<nav>, <figure>, <figcaption>, <time>, <mark>

Không được hỗ trợ bởi Internet Explorer dưới 8 nhưng có thể được sửa như thế này.

CSS:

section, article, aside, header, footer, nav, figure, figcaption{
   display: block;
}
time, mark { 
    display: inline-block;
}

Javascript:

var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for( var i = 0; i < elements.length; i++ ) {
    document.createElement(elements[i]);
}

Và <audio> <video> <canvas>không được hỗ trợ trong <IE 9

Phần <embed>tử có hỗ trợ một phần trong > IE8

Bạn cũng nên xem xét thẻ này.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

metaThẻ này yêu cầu Internet Explorer hiển thị trang ở chế độ IE cao nhất hiện có, thay vì chuyển sang chế độ tương thích và hiển thị trang như IE7 hoặc 8 sẽ làm. Thông tin thêm về điều đó Tại đây .

Liên kết trình trợ giúp HTML5

Để bắt đầu khởi động, bạn có thể xem HTML5 BoilerPlate

Để biết các bảng hỗ trợ tính tương thích của trình duyệt, bạn có thể xem - http://caniuse.com/

HTML5 Shiv - https://github.com/afarkas/html5shiv

Danh sách các Polyfills HTML5 - https: //github.com/Modernizr/Modernizr/wiki / ...

Cập nhật

Như đã đề cập trong một bình luận

Hãy cẩn thận với thẻ meta X-UA-Tương thích. Nếu bạn sử dụng thứ gì đó như bảng soạn sẵn html5 có các nhận xét có điều kiện xung quanh phần tử (điều này cũng xảy ra với html5 doctype IIRC), bạn có thể gặp sự cố với IE9 buộc chính nó vào chế độ tiêu chuẩn IE7 ngay cả với thẻ. IE lại đình công

Bạn có thể muốn xem xét điều này, tôi không có gì để sao lưu điều này vào lúc này.

Nói chung, có những vấn đề.

Tôi đã được thông báo rằng câu hỏi của bạn là từ để hỏi về các thẻ HTML 5 nhưng cũng rất hữu ích khi xem xét các tính năng mới dựa trên bất kỳ Javascript nào bạn có thể tìm thấy hoặc viết.

Trên thực tế, phương pháp được khuyến nghị là kiểm tra sự tồn tại của tính năng hơn là một trình duyệt cụ thể. Tập lệnh Modernizr có thể hữu ích trong vấn đề này, nhưng cũng có báo cáo về các tính năng không thể phát hiện được trong HTML5 .

Một số tính năng như local storagequay lại IE8.

Những người khác, như FileReader, yêu cầu IE10 / Firefox21 / Chrome27

Để biết thông tin hiện tại, hãy thử http://caniuse.com

Viết HTML 5 như bạn thường làm và sử dụng Shims để đảm bảo khả năng tương thích với các trình duyệt cũ hơn. Bạn chỉ cần cẩn thận với các API Javascript thực sự, bởi vì chúng khó có thể thực hiện được. Nếu bạn đang cố gắng bám vào HTML 4 cơ bản để tương thích, thì việc sử dụng HTML 5 không có ích gì.

Để so sánh nhanh những thẻ nào có sẵn trong những trình duyệt nào và mức độ hỗ trợ cho mỗi thẻ, html5test.com là một tài nguyên tuyệt vời.

Bạn đang tìm kiếm một ma trận khả năng tương thích HTML5

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

Ngoài ra, để có khả năng tương thích nhiều trình duyệt tốt nhất, tôi khuyên bạn nên sử dụng reset.css này được tạo bởi Eric Meyer. http://meyerweb.com/eric/tools/css/reset/ Điều này làm cho các phần tử khác biệt giữa trình duyệt này với trình duyệt khác, hoạt động giống nhau trong tất cả các trình duyệt.