มีการแนะนำภาษาจีนมากมายเกี่ยวกับ Modernizr คุณสามารถค้นหาผ่าน Baidu หรือ Gu GE นอกจากนี้คุณยังสามารถอ่านได้ในอุดมคติสีน้ำเงินบทความนี้ค่อนข้างครอบคลุม: เกิดใหม่สำหรับ HTML5 และ CSS3;
การใช้ Modernizr คืออะไรนอกเหนือจากการให้การตัดสินสภาพแวดล้อมขั้นพื้นฐานและการสนับสนุนความหมายสำหรับ HTML5 และ CSS3 มาเรียนรู้กันวันนี้
1. เริ่มต้นด้วยการใช้ Modernizr
ส่วนนี้มีการอธิบายอย่างละเอียดใน Modernizr-born สำหรับ HTML5 และ CSS3 รวมถึงการเปลี่ยนแปลงองค์ประกอบ HTML หลังจากการวิ่ง Modernizr ฯลฯ ขอแนะนำให้นักเรียนใหม่สามารถอ่านได้อย่างระมัดระวัง
นอกจากนี้คุณยังสามารถไปที่เว็บไซต์อย่างเป็นทางการได้ที่ http://modernizr.com/docs/ สำหรับข้อมูลเพิ่มเติม
2. การใช้ Modernizr.load
1. โหลด jQuery
ก่อนอื่นมาดูวิธีการและรหัสสำหรับการโหลด jQuery บนเว็บไซต์ทางการ:
|
รหัสนี้ได้รับการทดสอบและพบว่าหากคุณไม่สามารถเข้าถึง CDN ที่ได้รับจาก Google โดยปกติแล้วเบราว์เซอร์จะรายงานข้อผิดพลาดและข้อความคือ
- gethttp: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404 (notfound)
- modernizr.custom.js: 4ResourceInterceInterceTedAsimageButTransferred ด้วย mimetypeapplication/x-javascript: js/libs/jQuery-1.7.1.min.js
จากข้อมูลข้อเสนอแนะเราจะเห็นได้ว่ารูปแบบไฟล์ที่แยกวิเคราะห์โดย Modernizr เมื่อโหลด jQuery ในท้องถิ่นใหม่ไม่ถูกต้อง ฉันไม่รู้ว่าสิ่งนี้จะเกิดขึ้นหรือไม่ แต่สิ่งนี้มีผลต่อการใช้งาน ในบรรดาผลการค้นหาของจีนไม่พบคำอธิบายหรือการวิจัยเกี่ยวกับปรากฏการณ์นี้และความสามารถส่วนตัวมี จำกัด ดังนั้นจึงเป็นไปไม่ได้ที่จะตรวจสอบในเชิงลึก ฉันเพิ่งได้รับการแก้ปัญหาชั่วคราวจาก Stackoverflow รหัสมีดังนี้:
|
2. การสนับสนุนสำหรับรุ่นที่ต่ำกว่าเช่นการสกัดกั้นไดอะแกรม PNG
ในคำอธิบายเอกสารของ yepnopejs มีส่วนเกี่ยวกับการใช้ปลั๊กอินสำหรับ IE! คำนำหน้า
เวลาส่วนใหญ่เมื่อเราสร้างความเข้ากันได้กับส่วนต่อเฟซส่วนหน้าเราต้องพิจารณารายละเอียดของ IE รุ่นต่าง ๆ แม้ว่าตอนนี้เรากำลังเน้นการละทิ้ง IE6 แต่ลูกค้าส่วนใหญ่ยังคงใช้เวอร์ชันนี้ เพื่อให้แน่ใจว่าความสอดคล้องของอินเทอร์เฟซเรามักจะเห็นรหัสรูปแบบต่อไปนี้:
- <!-[ifltie7]> <htmlclass = ie6> <! [endif]->
- <!-[ifie7]> <htmlclass = ie7> <! [endif]->
- <!-[ifie8]> <htmlclass = ie8> <! [endif]->
- <!-[ifie9]> <htmlclass = ie9> <! [endif]->
- <!-[ถ้า (gtie9) |! (เช่น)]> <!-> <!-<! [endif]->
นี่คือคำสั่งรูปแบบแบบมีเงื่อนไขสำหรับการกรองการกรองที่อนุญาตใน HTML ผ่านการกรองเราสามารถบรรลุแฮ็ก CSS บางส่วนสำหรับ IE รุ่นต่าง ๆ ส่วนนี้ของเนื้อหาสามารถอ่านและศึกษาได้ที่ Paulirish.com
มีวิธีแก้ปัญหามากมายสำหรับไดอะแกรม PNG ที่โปร่งใส นี่คือความพยายามบางอย่างที่จะแนะนำกลุ่มรหัส JS เพื่อแก้ปัญหา PNG โปร่งใสผ่าน Modernizr รหัสเฉพาะมีดังนี้:
- <scriptType = text/javascript> // <! [cdata [cdata [
- modernizr.load ([
- -
- โหลด: 'js/yepnope.ie_prefix.js', // โหลดปลั๊กอินคำนำหน้าของ Yepnope!
- เสร็จสมบูรณ์: ฟังก์ชั่น () {
- Yepnope ([{
- โหลด: 'ielt8! js/ie_png.js', // ปลั๊กอินสามารถกรองได้หลังจากโหลดตามปกติเท่านั้น (โหลด IE_PNG.JS สำหรับเวอร์ชันด้านล่าง IE8)
- เสร็จสมบูรณ์: ฟังก์ชั่น () {
- ie_png.fix ('img');
- -
- -
- -
- -
- -
- //]> </script>
นี่เป็นความพยายามที่น่าสนใจ
3. กำหนดการสนับสนุนของเบราว์เซอร์สำหรับ CSS3 หรือ HTML5
ส่วนนี้เป็นคุณสมบัติพื้นฐานของ Modernizr การใช้คุณสมบัติพื้นฐานเหล่านี้เราไม่เพียง แต่ลองใช้คุณสมบัติใหม่ของ CSS3 หรือ HTML5 แต่ยังมั่นใจได้ว่าเราให้พรอมต์ที่เป็นมิตรในสภาพแวดล้อมที่ไม่ได้รับการสนับสนุน ดูรหัสต่อไปนี้:
|
รหัสนี้ถูกตัดจากย่อหน้าในเอกสารการนำเสนอในเอฟเฟกต์รูปขนาดย่อ 3D โดยการวิเคราะห์และประสบกับบทเรียนที่ผลิตโดยผู้เขียนเราไม่เพียง แต่เรียนรู้การใช้ Modernizr บางส่วนเท่านั้น แต่ยังได้สัมผัสกับผลกระทบที่ทรงพลังและน่าทึ่งของ CSS3
เนื้อหาข้างต้นยังคงมีการจัดระเบียบอย่างคร่าวๆและจุดประสงค์คือการใช้มันเพื่อเรียนรู้และเข้าใจลักษณะและวิธีการใช้งานของ Modernizr (Yepnope) ในเวลาเดียวกันเราต้องปรับปรุงการเรียนรู้และความสนใจของ CSS3 และ HTML5
ข้อความทั้งหมดจบลงแล้ว