หน้าแรก>การสอนการออกแบบเว็บไซต์>กวดวิชา HTML

บอกเราเกี่ยวกับวิธีการใช้ Modernizr

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-08-23 02:32:01

มีการแนะนำภาษาจีนมากมายเกี่ยวกับ 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 บนเว็บไซต์ทางการ:

  1. modernizr.load ([{
  2. โหลด: 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js'
  3. เสร็จสมบูรณ์: ฟังก์ชั่น () {
  4. if (! window.jquery) {
  5. modernizr.load ('js/libs/jQuery-1.7.1.min.js');
  6. -
  7. -
  8. -

รหัสนี้ได้รับการทดสอบและพบว่าหากคุณไม่สามารถเข้าถึง CDN ที่ได้รับจาก Google โดยปกติแล้วเบราว์เซอร์จะรายงานข้อผิดพลาดและข้อความคือ

  1. gethttp: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404 (notfound)
  2. modernizr.custom.js: 4ResourceInterceInterceTedAsimageButTransferred ด้วย mimetypeapplication/x-javascript: js/libs/jQuery-1.7.1.min.js

จากข้อมูลข้อเสนอแนะเราจะเห็นได้ว่ารูปแบบไฟล์ที่แยกวิเคราะห์โดย Modernizr เมื่อโหลด jQuery ในท้องถิ่นใหม่ไม่ถูกต้อง ฉันไม่รู้ว่าสิ่งนี้จะเกิดขึ้นหรือไม่ แต่สิ่งนี้มีผลต่อการใช้งาน ในบรรดาผลการค้นหาของจีนไม่พบคำอธิบายหรือการวิจัยเกี่ยวกับปรากฏการณ์นี้และความสามารถส่วนตัวมี จำกัด ดังนั้นจึงเป็นไปไม่ได้ที่จะตรวจสอบในเชิงลึก ฉันเพิ่งได้รับการแก้ปัญหาชั่วคราวจาก Stackoverflow รหัสมีดังนี้:

  1. <scriptType = text/javascript> // <! [cdata [cdata [
  2. modernizr.load ([{
  3. โหลด: 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
  4. เสร็จสมบูรณ์: ฟังก์ชั่น () {
  5. if (! window.jquery) {
  6. modernizr.load ([{
  7. โหลด: 'js/jQuery.min.js'
  8. การโทรกลับ: ฟังก์ชั่น (url, ผลลัพธ์, คีย์) {
  9. //console.log('jqueryonlocalwasloaded! ');
  10. init ();
  11. -
  12. -
  13. }อื่น{
  14. //console.log('JQueryongleWasloaded! ');
  15. init ();
  16. -
  17. -
  18. -
  19. functionInit () {
  20. jQuery (เอกสาร) .ready (function () {
  21. $ ('body'). prepend ('HelloWorld!');
  22. -
  23. -
  24. //]> </script>

2. การสนับสนุนสำหรับรุ่นที่ต่ำกว่าเช่นการสกัดกั้นไดอะแกรม PNG

ในคำอธิบายเอกสารของ yepnopejs มีส่วนเกี่ยวกับการใช้ปลั๊กอินสำหรับ IE! คำนำหน้า

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

  1. <!-[ifltie7]> <htmlclass = ie6> <! [endif]->
  2. <!-[ifie7]> <htmlclass = ie7> <! [endif]->
  3. <!-[ifie8]> <htmlclass = ie8> <! [endif]->
  4. <!-[ifie9]> <htmlclass = ie9> <! [endif]->
  5. <!-[ถ้า (gtie9) |! (เช่น)]> <!-> <!-<! [endif]->

นี่คือคำสั่งรูปแบบแบบมีเงื่อนไขสำหรับการกรองการกรองที่อนุญาตใน HTML ผ่านการกรองเราสามารถบรรลุแฮ็ก CSS บางส่วนสำหรับ IE รุ่นต่าง ๆ ส่วนนี้ของเนื้อหาสามารถอ่านและศึกษาได้ที่ Paulirish.com

มีวิธีแก้ปัญหามากมายสำหรับไดอะแกรม PNG ที่โปร่งใส นี่คือความพยายามบางอย่างที่จะแนะนำกลุ่มรหัส JS เพื่อแก้ปัญหา PNG โปร่งใสผ่าน Modernizr รหัสเฉพาะมีดังนี้:

  1. <scriptType = text/javascript> // <! [cdata [cdata [
  2. modernizr.load ([
  3. -
  4. โหลด: 'js/yepnope.ie_prefix.js', // โหลดปลั๊กอินคำนำหน้าของ Yepnope!
  5. เสร็จสมบูรณ์: ฟังก์ชั่น () {
  6. Yepnope ([{
  7. โหลด: 'ielt8! js/ie_png.js', // ปลั๊กอินสามารถกรองได้หลังจากโหลดตามปกติเท่านั้น (โหลด IE_PNG.JS สำหรับเวอร์ชันด้านล่าง IE8)
  8. เสร็จสมบูรณ์: ฟังก์ชั่น () {
  9. ie_png.fix ('img');
  10. -
  11. -
  12. -
  13. -
  14. -
  15. //]> </script>

นี่เป็นความพยายามที่น่าสนใจ

3. กำหนดการสนับสนุนของเบราว์เซอร์สำหรับ CSS3 หรือ HTML5

ส่วนนี้เป็นคุณสมบัติพื้นฐานของ Modernizr การใช้คุณสมบัติพื้นฐานเหล่านี้เราไม่เพียง แต่ลองใช้คุณสมบัติใหม่ของ CSS3 หรือ HTML5 แต่ยังมั่นใจได้ว่าเราให้พรอมต์ที่เป็นมิตรในสภาพแวดล้อมที่ไม่ได้รับการสนับสนุน ดูรหัสต่อไปนี้:

  1. <scriptType = text/javascript> // <! [cdata [cdata [
  3. modernizr.load ({
  4. การทดสอบ: Modernizr.csstransforms3d &#038; & modernizr.csstransitions, // ตัดสินว่าลูกค้าปัจจุบันรองรับตัวแปร 3 มิติและการเปลี่ยนระดับการไล่ระดับสี
  5. ใช่: ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' ,'js/jquery.hoverfold.js'
  6. ไม่: 'css/fallback.css', // โหลดอื่น ๆ ในรูปแบบที่เกี่ยวข้องที่ใช้สำหรับการเตือนที่เป็นมิตร
  7. การโทรกลับ: ฟังก์ชั่น (url, ผลลัพธ์, คีย์) {// เนื้อหาการโทรกลับ
  9. if (url === 'js/jQuery.hoverfold.js') {// ถ้าเส้นทางของไฟล์ js โหลดล่าสุดเหมือนกันแอปพลิเคชัน
  10. $ ('#grid'). hoverfold ();
  11. -
  13. -
  14. -
  16. //]> </script>

รหัสนี้ถูกตัดจากย่อหน้าในเอกสารการนำเสนอในเอฟเฟกต์รูปขนาดย่อ 3D โดยการวิเคราะห์และประสบกับบทเรียนที่ผลิตโดยผู้เขียนเราไม่เพียง แต่เรียนรู้การใช้ Modernizr บางส่วนเท่านั้น แต่ยังได้สัมผัสกับผลกระทบที่ทรงพลังและน่าทึ่งของ CSS3

เนื้อหาข้างต้นยังคงมีการจัดระเบียบอย่างคร่าวๆและจุดประสงค์คือการใช้มันเพื่อเรียนรู้และเข้าใจลักษณะและวิธีการใช้งานของ Modernizr (Yepnope) ในเวลาเดียวกันเราต้องปรับปรุงการเรียนรู้และความสนใจของ CSS3 และ HTML5

ข้อความทั้งหมดจบลงแล้ว

บทความที่เกี่ยวข้อง