Saya membuat aplikasi web untuk digunakan di PC. Tag HTML5 apa yang harus dihindari untuk mencegah masalah kompatibilitas dengan Browser seperti IE8 dan yang lebih baru?

Catatan: Kebanyakan pertanyaan berusia 1-3 tahun tentang hal ini.

Anda bertanya tag HTML5 apa yang harus dihindari.

Beberapa tag dari HTML5 dari pengetahuan saya dibuat untuk alasan semantik. seperti berikut ini contohnya.

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

Ini hampir bagus untuk dikerjakan, dan hanya membutuhkan sedikit CSS misalnya. display: block;untuk bekerja secara normal di sebagian besar browser, meskipun di browser lama yaitu. Internet Explorer Anda diminta untuk membuat elemen dalam Javascript agar kompatibel.

Berikut ini contohnya.

document.createElement('article');

Akan mengatur <article>elemen untuk digunakan di Internet Explorer yang lebih lama.

Untuk tag HTML5 tingkat lanjut yang membutuhkan fungsionalitas Javascript untuk bekerja adalah seperti berikut ini.

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

Elemen-elemen ini lebih sulit untuk didukung / shiv di browser lama. Meskipun saya telah menyertakan tautan ke lintas polyfill browser di bagian bawah, meskipun saya belum menyelidikinya secara pribadi.

Jadi saya akan mengatakan bahwa elemen apa pun yang tidak memerlukan fungsionalitas Javascript baik-baik saja untuk digunakan dengan sedikit kode dukungan lintas browser.

Jika Anda menargetkan > IE8 maka Anda akan baik-baik saja jika Anda menggunakan shiv.

Apa yang saya sebut browser lama? <IE9

Dukungan browser untuk tag HTML5 saat ini adalah.

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

Tidak didukung oleh Internet Explorer kurang dari 8 tetapi dapat diperbaiki seperti ini.

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]);
}

Dan <audio> <video> <canvas>tidak didukung di <IE 9

The <embed>elemen memiliki dukungan parsial di > IE8

Anda juga harus memeriksa tag ini.

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

metaTag ini memberi tahu Internet Explorer untuk menampilkan halaman dalam mode IE tertinggi yang tersedia, alih-alih masuk ke mode kompatibilitas dan merender halaman seperti yang dilakukan IE7 atau 8. Info lebih lanjut tentang itu Di Sini .

Tautan Pembantu HTML5

Untuk Kick Start, Anda dapat melihat HTML5 BoilerPlate

Untuk tabel dukungan kompatibilitas browser, Anda dapat melihat - http://caniuse.com/

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

Daftar HTML5 Polyfills - https: //github.com/Modernizr/Modernizr/wiki / ...

Memperbarui

Seperti yang disebutkan dalam komentar

Hati-hati dengan tag meta X-UA-Compatible. Jika Anda menggunakan sesuatu seperti html5 boilerplate yang memiliki komentar bersyarat di sekitar elemen (ini juga terjadi dengan html5 doctype IIRC), Anda mungkin mengalami masalah dengan IE9 yang memaksa dirinya sendiri ke mode standar IE7 bahkan dengan tag. IE menyerang lagi

Anda mungkin ingin melihat ini, saya tidak memiliki apa pun untuk mendukungnya saat ini.

Umumnya, ada masalah.

Saya telah diberitahu bahwa pertanyaan Anda adalah untuk menanyakan tentang tag HTML 5 tetapi juga berguna untuk melihat fitur-fitur baru sehubungan dengan Javascript yang mungkin Anda temukan atau tulis.

Dalam praktiknya, metode yang disarankan adalah menguji keberadaan fitur daripada browser tertentu. The Modernizr Script dapat membantu dalam hal ini, tetapi ada juga laporan dari fitur terdeteksi di HTML5 .

Beberapa fitur seperti local storagekembali ke IE8.

Lainnya, seperti FileReader, membutuhkan IE10 / Firefox21 / Chrome27

Untuk informasi terkini, coba http://caniuse.com

Tulis HTML 5 seperti biasa dan gunakan Shims untuk memastikan kompatibilitas dengan browser lama. Anda hanya perlu berhati-hati dengan Javascript API, karena mereka hampir tidak bisa bergerak. Jika Anda mencoba menggunakan HTML 4 dasar untuk kompatibilitas, tidak ada gunanya menggunakan HTML 5.

Untuk perbandingan cepat tentang tag apa yang tersedia di browser apa, dan tingkat dukungan apa untuk setiap tag, html5test.com adalah sumber yang bagus.

Anda mencari matriks kesesuaian HTML5

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

Juga, untuk kompatibilitas lintas browser terbaik, saya sarankan Anda menggunakan reset.css yang dibuat oleh Eric Meyer ini. http://meyerweb.com/eric/tools/css/reset/ Ini membuat elemen yang berbeda dari satu peramban ke yang lain, berperilaku sama di semua peramban.