ฉันกำลังสร้างเว็บแอปสำหรับใช้กับพีซี แท็ก HTML5 อะไรบ้างที่ควรหลีกเลี่ยงเพื่อป้องกันปัญหาความเข้ากันได้กับเบราว์เซอร์เช่น IE8 ขึ้นไป

หมายเหตุ: คำถามส่วนใหญ่ 1-3 ปีในหัวข้อนี้

คุณถามว่าแท็ก HTML5 ใดที่ควรหลีกเลี่ยง

แท็กบางส่วนจาก HTML5 จากความรู้ของฉันถูกสร้างขึ้นด้วยเหตุผลทางความหมาย ดังตัวอย่างต่อไปนี้

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

เกือบจะใช้ได้ดีและต้องใช้ CSS เล็กน้อยเช่น display: block;ทำงานได้ตามปกติในเบราว์เซอร์ส่วนใหญ่แม้ว่าในเบราว์เซอร์รุ่นเก่าเช่น Internet Explorer คุณต้องสร้างองค์ประกอบใน Javascript เพื่อให้เข้ากันได้

นี่คือตัวอย่าง

document.createElement('article');

จะตั้งค่า<article>องค์ประกอบเพื่อใช้ใน Internet Explorer รุ่นเก่า

สำหรับแท็ก HTML5 ขั้นสูงเพิ่มเติมที่ต้องใช้ฟังก์ชัน Javascript ในการทำงานมีดังต่อไปนี้

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

องค์ประกอบเหล่านี้รองรับ / shiv ในเบราว์เซอร์รุ่นเก่าได้ยากกว่า แม้ว่าฉันจะใส่ลิงก์ไปยังโพลีฟิลล์ข้ามเบราว์เซอร์ที่ด้านล่าง แต่ฉันไม่ได้ตรวจสอบเป็นการส่วนตัว

ดังนั้นฉันจะบอกว่าองค์ประกอบใด ๆ ที่ไม่ต้องการฟังก์ชันการทำงานของ Javascript นั้นดีอย่างสมบูรณ์แบบที่จะใช้กับรหัสสนับสนุนข้ามเบราว์เซอร์เล็กน้อย

หากการกำหนดเป้าหมายของคุณ> IE8คุณควรจะสบายดีถ้าคุณใช้ shiv

ฉันเรียกเบราว์เซอร์รุ่นเก่าว่าอะไร <IE9

การสนับสนุนเบราว์เซอร์สำหรับแท็ก HTML5 ในปัจจุบันคือ

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

Internet Explorer ไม่รองรับน้อยกว่า8แต่สามารถแก้ไขได้เช่นนี้

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

และ<audio> <video> <canvas>ไม่รองรับใน<IE 9

<embed>องค์ประกอบได้รับการสนับสนุนบางส่วนใน> IE8

คุณควรดูแท็กนี้ด้วย

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

metaแท็กนี้บอกให้ Internet Explorer แสดงเพจในโหมด IE สูงสุดที่มีแทนที่จะเข้าสู่โหมดความเข้ากันได้และแสดงผลเพจตามที่ IE7 หรือ 8 จะทำ ข้อมูลเพิ่มเติมเกี่ยวกับที่นี่

ลิงก์ตัวช่วย HTML5

สำหรับ Kick Start คุณสามารถตรวจสอบHTML5 BoilerPlate

สำหรับตารางการสนับสนุนความเข้ากันได้ของเบราว์เซอร์คุณสามารถดู - http://caniuse.com/

HTML5 ชีฟ - https://github.com/afarkas/html5shiv

รายชื่อ HTML5 Polyfills - https: //github.com/Modernizr/Modernizr/wiki / ...

อัปเดต

ตามที่กล่าวไว้ในความคิดเห็น

ระวังเมตาแท็ก X-UA-Compatible หากคุณใช้บางอย่างเช่น html5 สำเร็จรูปที่มีความคิดเห็นตามเงื่อนไขรอบ ๆ องค์ประกอบ (สิ่งนี้เกิดขึ้นกับ html5 doctype IIRC) คุณอาจพบปัญหากับ IE9 ที่บังคับให้ตัวเองเข้าสู่โหมดมาตรฐาน IE7 แม้จะมีแท็กก็ตาม IE โจมตีอีกครั้ง

คุณอาจต้องการตรวจสอบสิ่งนี้ฉันไม่มีอะไรจะสำรองข้อมูลในขณะนี้

โดยทั่วไปมีประเด็น

ฉันได้รับแจ้งว่าคำถามของคุณถูกถามเกี่ยวกับแท็ก HTML 5 แต่การดูคุณสมบัติใหม่ ๆ ในแง่ของ Javascript ที่คุณอาจพบหรือเขียนก็มีประโยชน์เช่นกัน

ในทางปฏิบัติวิธีที่แนะนำคือการทดสอบการมีอยู่ของคุณลักษณะแทนที่จะใช้เบราว์เซอร์เฉพาะ Modernizrสคริปต์อาจจะเป็นประโยชน์ในเรื่องนี้ แต่ยังมีรายงานของคุณลักษณะทางจิตวิทยาใน HTML5

คุณสมบัติบางอย่างเช่นlocal storageกลับไปที่ IE8

อื่น ๆ เช่นFileReaderต้องการ IE10 / Firefox21 / Chrome27

สำหรับข้อมูลปัจจุบันลองhttp://caniuse.com

เขียน HTML 5 ตามปกติและใช้Shimsเพื่อให้แน่ใจว่าเข้ากันได้กับเบราว์เซอร์รุ่นเก่า คุณต้องระวัง Javascript API จริงๆเท่านั้นเพราะแทบจะไม่สามารถใช้งานได้ หากคุณกำลังพยายามยึดติดกับ HTML 4 พื้นฐานเพื่อความเข้ากันได้ก็ไม่มีประโยชน์ในการใช้ HTML 5

สำหรับการเปรียบเทียบอย่างรวดเร็วว่าแท็กใดใช้ได้ในเบราว์เซอร์ใดและระดับการสนับสนุนสำหรับแต่ละแท็กhtml5test.comเป็นแหล่งข้อมูลที่ยอดเยี่ยม

คุณกำลังมองหาเมทริกซ์ที่เข้ากันได้กับ HTML5

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

นอกจากนี้เพื่อความเข้ากันได้ของเบราว์เซอร์ข้ามที่ดีที่สุดฉันขอแนะนำให้คุณใช้ reset.css ที่สร้างโดย Eric Meyer http://meyerweb.com/eric/tools/css/reset/ สิ่งนี้ทำให้องค์ประกอบที่แตกต่างจากเบราว์เซอร์ไปยังอีกเบราว์เซอร์ทำงานเหมือนกันในทุกเบราว์เซอร์