wulin.com (www.vevb.com) บทความบทนำ: Modernizr และ HTML5
ตกลงตอนนี้ HTML5 เป็นที่นิยมดังนั้นฉันจะเพิ่ม HTML5 ลงในชื่อของมัน :)
ในความเป็นจริง Modernizr เกิดมาเพื่อ HTML5 - เป็นห้องสมุด JS ที่ตรวจจับการสนับสนุนของเบราว์เซอร์สำหรับคุณสมบัติ HTML5 และ CSS3 เว็บไซต์ความเข้ากันได้ของเบราว์เซอร์ HTML5/CSS3 ที่มีชื่อเสียง FindMeByip ขึ้นอยู่กับเฟรมเวิร์กนี้
คุณจะเห็นว่ามีลิงก์ไปยัง Modernizr บนปุ่มสีเขียวที่มุมล่างขวา
คุณสมบัติของ Modernizrฟังก์ชั่นของ Modernizr นั้นง่ายมาก มันคือการใช้ JS เพื่อตรวจจับการสนับสนุนของเบราว์เซอร์สำหรับคุณสมบัติ HTML5/CSS3 หากรองรับแอตทริบิวต์บางอย่างให้เพิ่มคลาสที่สอดคล้องกันในแท็ก <html> ของหน้า หากไม่รองรับให้เพิ่มคลาส No-Prefix ตัวอย่างเช่นหากเบราว์เซอร์ที่ตรวจพบรองรับแท็กวิดีโอ Modernizr จะเพิ่มคลาสวิดีโอลงในแท็ก <html> มิฉะนั้นให้เพิ่มคลาส No-Video
ตรวจสอบซอร์สโค้ดของ FindMeByip หรือใช้เครื่องมือเช่น Firebug เพื่อดูรหัสหน้าและคุณสามารถดูคลาสได้ในแท็ก <Html>
นอกจากนี้ Modernizr ยังให้การใช้งานอีกครั้งซึ่งคือการตรวจจับการสนับสนุนของเบราว์เซอร์สำหรับคุณสมบัติบางอย่างเพียงอย่างเดียวเช่น:
มันค่อนข้างปลอดภัยในการตรวจจับการสนับสนุนของเบราว์เซอร์สำหรับ HTML5 ผ่านอินเทอร์เฟซที่คล้ายกัน
การตรวจจับเบราว์เซอร์: คุณสมบัติ UA VSในความเป็นจริงทุกคนมักจะใช้ UA เพื่อตรวจจับเบราว์เซอร์ แน่นอน UA ยังให้ข้อมูลที่สมบูรณ์ยิ่งขึ้น UA ไม่ได้มีอำนาจทุกอย่างและยังมีจุดอ่อนบางอย่างเช่นการปลอมตัวของเบราว์เซอร์ของผู้ใช้และการขาดข้อมูล UA ที่ได้รับจากเบราว์เซอร์ย้อนหลังบางอย่างจะส่งผลต่อการตัดสินของข้อมูลเบราว์เซอร์ ที่สำคัญกว่าสำหรับคุณสมบัติ HTML5 โดยใช้ UA เพื่อตรวจสอบว่าเบราว์เซอร์รองรับคุณสมบัติบางอย่างนั้นซับซ้อนและไม่น่าเชื่อถือเกินไปหรือไม่
แน่นอนว่ามีการถกเถียงกันเกี่ยวกับ UA และการตรวจจับคุณสมบัติเสมอ สิ่งที่ฉันต้องการจะพูดที่นี่คือการวิเคราะห์เฉพาะปัญหาเฉพาะการใช้ HTML5 เพื่อตรวจจับการสนับสนุนคุณสมบัติในเว็บไซต์มีความน่าเชื่อถือและสะดวกกว่า UA ~~
ใช้ Modernizrการใช้งาน Modernizr นั้นง่ายมากเพียงแค่แนะนำไฟล์ JS ของห้องสมุดลงในหน้า:
>/สคริปต์>
Modernizr เป็นโอเพ่นซอร์ส แต่ด้วยเหตุผลบางอย่างมันถูกบล็อกโดย G-FW
modernizr @ gitโครงการ Modernizr เป็นโฮสต์ใน Git คุณสามารถรับได้ตามที่อยู่ต่อไปนี้:
ผู้เขียนยังมีหน้าเอาต์พุตง่าย ๆ ใน GIT:
และหน้าทดสอบโดยละเอียด:
การอ่านเพิ่มเติม:การตรวจจับคุณสมบัติ HTML5
ปรับใช้ HTML5 และ CSS3 อย่างปลอดภัยด้วย Modernizr