ท้ายที่สุดข้อกำหนด HTML5 เป็นข้อกำหนดที่เพิ่งกำหนดไว้และเบราว์เซอร์บางตัวไม่สามารถรองรับฉลากใหม่และแอตทริบิวต์ใหม่โดยเฉพาะเบราว์เซอร์ IE8 และด้านล่างของเบราว์เซอร์ นี่คือวิธีการที่ใช้งานได้จริงที่ใช้แท็กใหม่ของ HTML5 ในหน้า
เบราว์เซอร์ IE8 ไม่ได้เพิ่มการสนับสนุนใหม่สำหรับแท็ก HTML5 ดังนั้นจึงไม่สามารถแสดงเนื้อหาในแท็ก HTML5 ใหม่ได้โดยตรงใน IE8 โชคดีที่ IE8/IE7/IE6 รองรับฉลากที่สร้างขึ้นโดยวิธีการสร้างรายได้
var e = abbr, บทความ, ด้านข้าง, เสียง, ผ้าใบ, ข้อมูล, รายละเอียด, กล่องโต้ตอบ, eventsource, รูป, ส่วนท้าย, hgroup, mark, เมตร, มิเตอร์, เอาท์พุท, progess, ส่วนเวลา, วิดีโอ. split (','); var i = e.length;หลังจากเบราว์เซอร์รองรับฉลากใหม่คุณต้องเพิ่มรูปแบบเริ่มต้นของฉลาก:
บทความ, นอกเหนือจาก, figcaption, รูป, ส่วนท้าย, ส่วนหัว, hgroup, nav, ส่วน {display: block} mark {background:#ff0;ด้วยวิธีนี้รหัส JavaScript สองตัวและรหัส CSS สามารถสร้าง IE8 และรุ่นต่ำกว่าของเบราว์เซอร์รองรับแท็กใหม่ใน HTML5 แน่นอนว่าวิธีที่ดีที่สุดคือการใช้เฟรมเวิร์กที่เป็นผู้ใหญ่โดยตรง
<!-[ถ้า LT IE 9]> <Script> src = http://html5shim.googlecode.com/svn/trunk/html5.js </script> <! [endif]->
HTML5 ในวงกว้างรวมถึง HTML5, CSS3 และ API ใหม่ เนื่องจากคุณสมบัติใหม่เข้ากันได้กับเบราว์เซอร์มากหรือน้อยจึงจำเป็นต้องตรวจจับว่าเบราว์เซอร์รองรับคุณสมบัตินี้เมื่อใช้คุณสมบัติใหม่ เมื่อเบราว์เซอร์ไม่รองรับคุณสมบัติใหม่ก็สามารถเข้ากันได้อย่างเหมาะสม ในปัจจุบันไม่มีวิธีการที่สม่ำเสมอในการตรวจจับการสนับสนุนคุณสมบัติใหม่ โชคดีที่มีวิศวกรที่กระตือรือร้นในต่างประเทศได้พัฒนาคุณสมบัติใหม่ของการตรวจจับ
หลักการของ ModelNizr Framework คือการตรวจจับโดยอัตโนมัติว่าเบราว์เซอร์รองรับคุณสมบัติใหม่และเพิ่มคลาสที่สอดคล้องกันลงในแท็ก <HTML> หรือไม่ หากเบราว์เซอร์รองรับคุณสมบัติบางอย่างคลาสที่ตั้งชื่อตามชื่อคุณลักษณะจะถูกเพิ่มเข้ามา ในเวลาเดียวกันมันจะสร้างวัตถุที่เรียกว่า Modernizr เฟรมเวิร์ก Modernizr ยังมีฟังก์ชั่นของเฟรมเวิร์ก HTML5SHIM ซึ่งสามารถอนุญาตให้ IE8 และด้านล่างของเบราว์เซอร์รองรับแท็กใหม่
วิธีการใช้งานของ Modernizr นั้นง่ายมาก
<script src = js/modelnizr.min.js> </script>
ประการที่สองเพิ่มคลาสชื่อ NO-JS บนฉลาก HTML:
<html class = no-js>
หากเบราว์เซอร์ไม่ปิดใช้งาน JavaScript หลังจากเบราว์เซอร์โหลดหน้าเว็บคลาสบนแท็ก HTML จะแทนที่และเพิ่มแบบไดนามิก หลังจากโหลดแท็ก HTML จะคล้ายกับต่อไปนี้:
<html class = js canvas canvasttext geolocation rgba hsla no-multiplebgs borderraderradius boxshadow opacimamamns no-cssgra dients no-cssreflections
ในรหัส CSS คุณสามารถใช้คลาสเหล่านี้เพื่อเพิ่มรหัสความเข้ากันได้ย้อนหลัง
#Nice {พื้นหลัง: URL (Background-one.png) repea-x}.}.}ผู้อ่านที่มีความสนใจในกรอบนี้สามารถเรียกดูเว็บไซต์ทางการของ Modernizr เพื่อรับตัวอย่างและวิธีการใช้งานที่มีรายละเอียดมากขึ้นเรื่อย ๆ
เสียงและวิดีโอมักใช้ในหน้าเว็บ แต่เบราว์เซอร์มีความสับสนมากขึ้นดังนั้นนี่คือหัวข้อแยกต่างหาก เสียงและวิดีโอเป็นลักษณะของการสนับสนุนดั้งเดิมของเบราว์เซอร์ก่อนหน้านี้ดังนั้นการเล่นเสียงและวิดีโอไม่ได้ จำกัด อยู่ที่ปลั๊กที่สาม -ins อีกต่อไปโดยเฉพาะอย่างยิ่งในแพลตฟอร์มมือถือ เสียงและวิดีโอเป็นเค้กขนาดใหญ่และผู้ผลิตเบราว์เซอร์ทั้งหมดต้องการแยกแยะความแตกต่างที่ใหญ่ที่สุดซึ่งทำให้เบราว์เซอร์แยกแยะรูปแบบของเสียงและวิดีโอ รายการรูปแบบเสียงสนับสนุนสำหรับเบราว์เซอร์มีดังนี้:
เบราว์เซอร์ | รุ่น | สนับสนุนรูปแบบ |
Internet Explorer | 9.0+ | mp3, AAC |
โครเมี่ยม | 6.0+ | Ogg Vorbis, MP3, WAV (9.0+) |
Firefox | 3.6+ | Ogg Vorbis, Wav |
ซาฟารี | 5.0+ | mp3, aac, wav |
โอเปร่า | 10.0+ | Ogg Vorbis, Wav |
ประมาณ 80%ของเบราว์เซอร์รองรับแท็ก <Udio> ของ HTML5 แต่ไม่มีรูปแบบเสียงที่เหมือนกัน จากมุมมองของรูปแบบการสนับสนุนเบราว์เซอร์ทั้งหมดสามารถเล่นเสียงบนองค์ประกอบเสียงได้
<การควบคุมเสียง> <แหล่งที่มา src = elvis.mp3 type = 'เสียง/mpeg; ข้อมูลให้ลิงก์ดาวน์โหลดใช้ Flash Player ฯลฯ-> Browser ไม่รองรับ <Udio </code> แท็ก </audio>
วิดีโอยังคล้ายกับเสียงดังต่อไปนี้เบราว์เซอร์รองรับรายการวิดีโอของวิดีโอ:
เบราว์เซอร์ | รุ่น | สนับสนุนรูปแบบ |
Internet Explorer | 9.0+ | MP4 |
โครเมี่ยม | 6.0+ | MP4, Webm, Ogg |
Firefox | 3.6+ | Webm, Ogg |
ซาฟารี | 5.0+ | MP4 |
โอเปร่า | 10.0+ | Webm, Ogg |
การตัดสินจากรูปแบบวิดีโอที่รองรับโดยเบราว์เซอร์วิธีที่ดีที่สุดคือการจัดทำสองรูปแบบในรูปแบบ WebM และ MP4 รหัสที่เข้ากันได้มีดังนี้:
<การควบคุมวิดีโอ> <ต้นทาง src = video.webm type = video/webm> <source src = video.mp4 type = video/mp4> <! ?
ข้างต้นเป็นรุ่นความเข้ากันได้ของเบราว์เซอร์ของฉลากใหม่ของ HTML5 ที่แนะนำโดย Xiaobian ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!