เบราว์เซอร์แบบดั้งเดิมไม่ได้ถูกแทนที่อย่างสมบูรณ์ในเวลานี้ทำให้เป็นเรื่องยากสำหรับคุณที่จะฝังคุณสมบัติ CSS3 หรือ HTML5 ล่าสุดไว้ในเว็บไซต์ของคุณ Modernizr เข้ามาแก้ปัญหานี้ ในฐานะที่เป็นไลบรารี JavaScript โอเพนซอร์ส Modernizr ตรวจจับการรองรับเบราว์เซอร์สำหรับคุณสมบัติ CSS3 หรือ HTML5 Modernizr ไม่ได้พยายามเพิ่มคุณสมบัติที่ไม่ได้รับการสนับสนุนจากเบราว์เซอร์รุ่นเก่า แต่ช่วยให้คุณสามารถปรับเปลี่ยนการออกแบบหน้าโดยการสร้างการกำหนดค่าสไตล์เสริม นอกจากนี้ยังสามารถจำลองคุณสมบัติที่ไม่ได้รับการสนับสนุนโดยเบราว์เซอร์รุ่นเก่าโดยการโหลดสคริปต์ที่กำหนดเอง
Modernizr นั้นใช้งานง่าย แต่ไม่ได้มีอำนาจทุกอย่าง การใช้ Modernizr ที่ประสบความสำเร็จนั้นขึ้นอยู่กับทักษะ CSS และ JavaScript ของคุณเป็นอย่างมาก คู่มือนี้ช่วยให้คุณสามารถเรียนรู้วิธีการตั้งค่าสไตล์เสริมสำหรับเบราว์เซอร์ที่ไม่รองรับหลายคอลัมน์หรือการคาดการณ์ นอกจากนี้คุณสามารถเรียนรู้วิธีการรับเบราว์เซอร์เก่าเพื่อตรวจสอบรูปแบบที่ใช้คุณสมบัติที่ต้องการ HTML5 ล่าสุดและวิธีการเลือกไฟล์สคริปต์ที่เลือกตามฟังก์ชันการทำงานของเบราว์เซอร์
Modernizr เป็นไลบรารี JavaScript ที่ใช้ในการตรวจจับการสนับสนุนฟังก์ชั่นเบราว์เซอร์ ปัจจุบันโดยการตรวจสอบการประมวลผลของเบราว์เซอร์ของชุดการทดสอบ Modernizr สามารถตรวจจับฟังก์ชั่น CSS3 18 ฟังก์ชั่นและฟังก์ชั่นมากกว่า 40 ฟังก์ชั่นเกี่ยวกับ HTML5 มันเชื่อถือได้มากกว่าวิธีดั้งเดิมในการตรวจจับชื่อเบราว์เซอร์ (การดมกลิ่นเบราว์เซอร์) เวลาดำเนินการของชุดการทดสอบที่สมบูรณ์ใช้เวลาเพียงไม่กี่ไมโครวินาที นอกจากนี้เว็บไซต์ Modernizr ใช้สคริปต์ที่กำหนดเองเพื่อตรวจจับองค์ประกอบที่น่าสนใจเท่านั้น
เมื่อใช้ Modernizr เพื่อตรวจจับการสนับสนุน CSS3 คุณไม่จำเป็นต้องมีความรู้ JavaScript คุณจะต้องแทรกไฟล์ลงในหน้าเว็บและจากนั้นจะเพิ่มชุดคลาสลงในแท็ก <html> ของหน้าเว็บตามฟังก์ชันการทำงานของเบราว์เซอร์ ชื่อของคลาสที่สอดคล้องกันได้ตรงตามข้อกำหนดมาตรฐานและเข้าใจง่าย ตัวอย่างเช่นหากเบราว์เซอร์รองรับคุณสมบัติ Box-Shadow คุณต้องเพิ่มคลาส Boxshadow ที่เกี่ยวข้อง มิฉะนั้นให้เพิ่มคลาส No-BoxShadow สิ่งที่คุณต้องทำคือสร้างตารางสไตล์ที่ใช้คลาสเหล่านี้เพื่อให้สไตล์ที่เหมาะสมสำหรับเบราว์เซอร์ที่เกี่ยวข้อง
Modernizr ทำให้ง่ายต่อการใช้งานโซลูชั่น JavaScript หรือที่รู้จักกันในชื่อ Polyfills - มันจำลองคุณสมบัติและเทคโนโลยีที่เกี่ยวข้องกับ HTML5 เช่นตำแหน่งทางภูมิศาสตร์ อย่างไรก็ตามคุณจำเป็นต้องมีความเข้าใจพื้นฐานเกี่ยวกับ JavaScript เพื่อใช้คุณสมบัติและเทคโนโลยีเหล่านี้ คำว่า โพลีฟิลด์ มาจากดินเหนียวของอังกฤษที่เติมรอยแตก (เช่นวัสดุเติมที่รู้จักกันในชาวอเมริกัน) ที่นี่ Polyfill ใช้เพื่อเติมเต็มฟังก์ชั่นของเบราว์เซอร์ บางครั้ง Modernizr ทำงานนี้อย่างราบรื่น แต่โดยพื้นฐานแล้วนี่เป็นเพียงงานแพตช์ดังนั้นคุณจึงไม่สามารถพึ่งพาได้เพื่อสร้างผลลัพธ์เดียวกันที่แน่นอนโดยเบราว์เซอร์ที่มีช่องโหว่
เช่นเดียวกับห้องสมุด JavaScript อื่น ๆ Modernizr ให้บริการการพัฒนาและการผลิต ความแตกต่างเพียงอย่างเดียวเมื่อเทียบกับห้องสมุดส่วนใหญ่คือช่องว่างและความคิดเห็นถูกลบออกจากเวอร์ชันการผลิตซึ่งจะช่วยลดขนาดของการดาวน์โหลด Modernizr ใช้วิธีการที่แตกต่าง เวอร์ชันการพัฒนาสามารถเรียกว่าอ่างล้างจานในห้องครัวในแง่หนึ่ง - มีเกือบทุกอย่าง เวอร์ชันการผลิตมีองค์ประกอบเหล่านั้นที่คุณเลือกเท่านั้นซึ่งสามารถลดการดาวน์โหลดได้อย่างมาก ในหลายกรณีเวอร์ชันการผลิตสามารถลดขนาดของรุ่นพัฒนาได้หนึ่งยี่สิบ
เมื่อทำการทดสอบกับ Modernizr ฉันขอแนะนำให้คุณดาวน์โหลดเวอร์ชันการพัฒนา เมื่อคุณเข้าใจวิธีการทำงานและความสามารถแล้วคุณสามารถดาวน์โหลดเวอร์ชันการผลิตที่กำหนดเองสำหรับการปรับใช้บนเว็บไซต์ของคุณ
ไฟล์ตัวอย่างสำหรับบทช่วยสอนนี้มีการพัฒนา 2.0.6 เวอร์ชันของ Modernizr แต่ฉันขอแนะนำให้คุณแทนที่ด้วยเวอร์ชันที่อัปเดตล่าสุดจากเว็บไซต์ Modernizr
หมายเหตุ: หากคุณคลิกลิงก์ดาวน์โหลดในเมนูการนำทางหลักโดยไม่ได้ตั้งใจคุณจะเห็นกล่องกาเครื่องหมายจำนวนมากปรากฏขึ้นขอให้คุณเลือกเครื่องมือที่คุณต้องการ สิ่งนี้ถูกตั้งค่าสำหรับการผลิตเวอร์ชันที่กำหนดเอง คลิกลิงก์ไปยังเวอร์ชันการพัฒนาที่ด้านบนของแผงควบคุมหรือคลิกปุ่มย้อนกลับในเบราว์เซอร์ของคุณเพื่อกลับไปที่โฮมเพจและเลือกปุ่มพัฒนาที่แสดงในรูปที่ 1
ดังที่ได้กล่าวไว้ก่อนหน้านี้ Modernizr ไม่ได้พยายามเพิ่มคุณสมบัติใหม่ให้กับเบราว์เซอร์รุ่นเก่า แต่ช่วยให้คุณสามารถสร้างคุณสมบัติที่ขาดหายไปในสไตล์ของคุณ เพื่อแสดงวิธีการทำงานไฟล์ตัวอย่างมีหน้าชื่อ CSS_SUPPORT_BEGIN.html หากคุณโหลดหน้านี้ในเบราว์เซอร์ใหม่ควรมีลักษณะเหมือนรูปที่ 2
รูปที่ 2. Firefox 5 แสดงหน้าในรูปแบบหลายคอลัมน์และเพิ่มเงาให้กับภาพ รูปแบบของหน้านี้คือการใช้คุณสมบัติ column-count และ box-shadow ของ CSS3 เพื่อแสดงข้อความในรูปแบบหลายคอลัมน์และเพิ่มเงาลงในภาพ เบราว์เซอร์รุ่นเก่าไม่รองรับคุณสมบัติเหล่านี้ดังนั้นหน้าเดียวกันใน Internet Explorer (เช่น) 7 ดูเหมือนรูปที่ 3
ใน IE9 หน้าเดียวกันจะแสดงเงาของภาพ แต่ข้อความนั้นเหมือนกับเค้าโครงที่แสดงในรูปที่ 3
สิ่งที่คุณทำในการพยายามชดเชยคุณสมบัติที่ขาดหายไปนั้นขึ้นอยู่กับข้อกำหนดของโครงร่างการออกแบบของคุณ มันจะเกี่ยวข้องกับงานจำนวนมากที่จะพยายามทำให้หน้าดูเหมือนกันในเบราว์เซอร์ทั้งหมด แต่คุณสามารถทำการปรับปรุงง่ายๆเช่นรอบข้อความรอบ ๆ ภาพปรับขอบซ้ายของภาพลงในข้อความและเพิ่มขอบเขตที่คลุมเครือที่ขอบด้านล่างและขวาของภาพ
Modernizr ใช้ JavaScript เพื่อตรวจจับฟังก์ชั่นที่รองรับโดยเบราว์เซอร์ แต่แทนที่จะใช้ JavaScript เพื่อโหลดสไตล์ที่แตกต่างกันแบบไดนามิกมันใช้เทคนิคง่าย ๆ ในการเพิ่มคลาสลงในแท็ก <Html> ของหน้า จากนั้นในฐานะนักออกแบบมันขึ้นอยู่กับคุณที่จะตัดสินใจใช้ CSS casing เพื่อให้สไตล์ที่เหมาะสมสำหรับองค์ประกอบเป้าหมาย ตัวอย่างเช่นหากหน้ารองรับคุณสมบัติ box-shadow , Modernizr จะเพิ่มคลาส boxshadow หากไม่ได้รับการสนับสนุนก็จะถูกเพิ่มเข้ากับคลาส no-boxshadow แทน
เนื่องจากเบราว์เซอร์เพิกเฉยต่อคุณสมบัติ CSS ที่พวกเขาไม่สามารถรับรู้ได้คุณสามารถใช้คุณสมบัติ box-shadow ด้วยความมั่นใจตามกฎสไตล์พื้นฐานของคุณอย่างไรก็ตามคุณต้องเพิ่มตัวเลือกลูกหลานแยกต่างหากสำหรับเบราว์เซอร์รุ่นเก่าในรูปแบบต่อไปนี้:
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ } เฉพาะเบราว์เซอร์ที่ไม่รองรับ box-shadow จะมีคลาส no-boxshadow ดังนั้นเบราว์เซอร์อื่น ๆ จะไม่ใช้กฎสไตล์นี้
มาเพิ่ม Modernizr ในหน้าตัวอย่างและตรวจสอบคลาสที่เพิ่มลงในแท็ก <html>
<!DOCTYPE HTML> <html> <!DOCTYPE HTML> <html class=no-js>Modernizr อาศัย JavaScript ที่เปิดใช้งานในเบราว์เซอร์ เมื่อเปิดใช้งานคลาสนี้จะถูกลบแบบไดนามิก อย่างไรก็ตามในบางกรณี JavaScript ยังคงอยู่ใน HTML Makup เมื่อไม่ได้เปิดใช้งานซึ่งช่วยให้คุณสร้างกฎสไตล์พิเศษสำหรับผู้เข้าชมหากจำเป็น
</style> <script src=js/modernizr.js></script> </head> หมายเหตุ: หากคุณใช้แผงแทรกหรือเมนูแทรก DreamWeaver จะเพิ่ม type=text/javascript ไปยังแท็ก <Script> เริ่มต้น ไม่จำเป็นต้องใช้ใน HTML5 อีกต่อไป แต่การรักษาจะไม่ก่อให้เกิดอันตรายใด ๆ
หมายเหตุ: หากเวอร์ชัน Dreamweaver ของคุณไม่มีรหัสสด (หรือคุณใช้ตัวแก้ไข HTML ที่แตกต่างกัน) คุณสามารถตรวจสอบรหัสที่สร้างขึ้นโดยใช้เครื่องมือพัฒนาที่ได้รับจากเบราว์เซอร์ใหม่หรือ Firebug ใหม่ส่วนใหญ่ที่จัดทำโดยเบราว์เซอร์ Firefox
ดังที่แสดงในรูปที่ 4 คลาส no-js ถูกแทนที่ด้วยคลาส js ซึ่งระบุว่า JavaScript ได้รับการเปิดใช้งานแล้ว
ตารางที่ 1 แสดงชื่อคลาสที่ใช้โดย Modernizr เพื่อระบุการสนับสนุนสำหรับ CSS3 หากฟังก์ชั่นไม่รองรับชื่อของคลาสที่เกี่ยวข้องจะถูกนำหน้าด้วย no-
ตารางที่ 1. ฟังก์ชั่น CSS3 ที่ตรวจพบโดย Modernizr
คุณสมบัติ CSS | คลาส Modernizr (คุณสมบัติ) |
@font-face | fontface |
::before และ ::after องค์ประกอบหลอก | generatedcontent |
background-size | backgroundsize |
border-image | borderimage |
border-radius | borderradius |
box-shadow | boxshadow |
ภาพเคลื่อนไหว CSS | cssanimations |
การแปลง CSS 2D | csstransforms |
การแปลง CSS 3D | csstransforms3d |
การเปลี่ยน CSS | csstransitions |
เค้าโครงกล่องยืดหยุ่น | flexbox |
การไล่ระดับสี | cssgradients |
hsla() | hsla |
เค้าโครงหลายคอลัมน์ | csscolumns |
หลายพื้นหลัง | multiplebgs |
opacity | opacity |
การสะท้อนกลับ | cssreflections |
rgba() | rgba |
text-shadow | textshadow |
ไม่ว่าจะทำการทดสอบแอตทริบิวต์ CSS ที่เฉพาะเจาะจงชื่อคลาสและชื่อคุณสมบัติจะเหมือนกัน แต่สิ่งนี้ต้องมีการกำจัดยัติภังค์หรือวงเล็บใด ๆ คลาสอื่น ๆ ได้รับการตั้งชื่อตามโมดูล CSS3 ที่พวกเขาอ้างถึง
ดูตารางที่ 1 คุณจะเห็นว่า Modernizr ใช้ boxshadow และ csscolumns เพื่อแสดงการสนับสนุนคุณสมบัติ box-shadow และรูปแบบหลายคอลัมน์ตามลำดับ ดังนั้นคุณสามารถใช้คลาส no-boxshadow และ no-csscolumns เพื่อสร้างกฎสไตล์พิเศษสำหรับเบราว์เซอร์ที่ไม่รองรับคุณสมบัติเหล่านี้
เพื่อให้แน่ใจว่าคำสั่งนั้นง่ายฉันจะแสดงตัวอย่างของการประกาศ CSS เท่านั้น คุณสามารถพิมพ์ลงในมุมมองรหัสโดยตรงหรือใช้กล่องโต้ตอบกฎ CSS ใหม่
.no-boxshadow img #8A8A8A ) กฎสไตล์ผลลัพธ์ควรมีลักษณะเช่นนี้:.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }สิ่งนี้ไม่น่าดึงดูดเท่ากับเงาโปร่งแสง แต่ถึงแม้จะเป็นเรื่องนี้ แต่ก็ยังช่วยให้ภาพยื่นออกมาเล็กน้อยจากพื้นหลัง
.no-csscolumns img .no-csscolumns img { margin: 3px 8px 3px 0; float: left; } .columns img กฎทั้งสองมีความเฉพาะเจาะจงเหมือนกันดังนั้นหากพวกเขากลับด้านขอบซ้าย 10 พิกเซลของ .columns img อาจเขียนทับกฎใหม่ที่คุณเพิ่งสร้างขึ้นมา คุณสามารถเปลี่ยนชื่อ .no-csscolumns img เป็น .no-csscolumns .columns img เพื่อให้ได้ความจำเพาะที่สูงขึ้น แต่เป็นการดีที่สุดที่จะทำให้มั่นใจได้ว่าตัวเลือกที่ง่ายกว่าจะดีกว่า (โดยวิธีการหากคุณไม่แน่ใจว่า สิ่งที่เฉพาะเจาะจง คืออะไรลองดูบทความโดย Adrian Senior เข้าใจความจำเพาะมันได้รับการตีพิมพ์มาเป็นเวลานาน แต่มันมีค่า) ในตัวอย่างง่ายๆนี้ฉันสร้างสไตล์พิเศษสำหรับเบราว์เซอร์รุ่นเก่าโดยใช้เฉพาะคลาสนำหน้าด้วย no- อย่างไรก็ตามด้วยความสามารถของพวกเขามันไม่มีประเด็นใดที่คุณจะใช้ทั้งสองคลาส (มีหรือไม่มีคำนำหน้า) เพื่อสร้างสไตล์ที่แตกต่างสำหรับเบราว์เซอร์ของคุณ ตัวอย่างเช่น:
.csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }บางครั้งวิธีการนี้มีเหตุผลเช่นหากคุณต้องการสร้างเค้าโครงที่แตกต่างอย่างสิ้นเชิงสำหรับการสนับสนุนแต่ละระดับ แต่ถ้ามันเป็นเพียงเรื่องของการให้สไตล์ที่เลือกได้สำหรับเบราว์เซอร์รุ่นเก่าอย่าลืมว่าเบราว์เซอร์จะละเว้นคุณสมบัติที่พวกเขาไม่รู้จัก หากคุณใช้คลาส Modernizr สำหรับทุกรูปแบบหน้าของคุณจะไม่ได้อยู่ในเบราว์เซอร์ JavaScript-Disabled
Modernizr เพิ่มชื่อคลาสสำหรับแท็กเริ่มต้น <Html> เพื่อเล่นจุดประสงค์คู่ เมื่อหน้ากำลังโหลดพวกเขายังเป็นชื่อของคุณสมบัติ JavaScript ที่สร้างขึ้นโดยวัตถุ Modernizr ตารางที่ 1 แสดงชื่อของคลาสและคุณลักษณะที่เกี่ยวข้องกับ CSS ตารางที่ 2 แสดงรายการคลาสและคุณลักษณะที่เหลือที่เกี่ยวข้องกับ HTML5 และเทคโนโลยีที่เกี่ยวข้องเช่นตำแหน่งทางภูมิศาสตร์
ตารางที่ 2. คุณสมบัติที่เกี่ยวข้องกับ HTML5 ที่ตรวจพบโดย Modernizr
คุณสมบัติที่เกี่ยวข้องกับ HTML5 | คลาส Modernizr (คุณสมบัติ) |
แคชแอปพลิเคชัน | applicationcache |
เสียง | audio. type (ogg, mp3, wav, m4a) |
ผ้าใบ | canvas |
ข้อความผ้าใบ | canvastext |
ลากและวาง | draganddrop |
ฟอร์มแอตทริบิวต์อินพุต | input. attributeName |
รูปแบบองค์ประกอบอินพุต | inputtypes. elementName |
ตำแหน่งทางภูมิศาสตร์ | geolocation |
เหตุการณ์ hashchange | hashchange |
การจัดการประวัติศาสตร์ | history |
indexedDB | indexeddb |
SVG แบบอินไลน์ | inlinesvg |
ที่เก็บข้อมูลท้องถิ่น | localstorage |
การส่งข้อความ | postmessage |
ที่เก็บเซสชัน | sessionstorage |
รอยยิ้ม | smil |
SVG | svg |
เส้นทางคลิป SVG | svgclippaths |
สัมผัสกิจกรรม | touch |
วิดีโอ | video. type (ogg, webm, h264) |
webgl | webgl |
ซ็อกเก็ตเว็บ | websockets |
ฐานข้อมูล Web SQL | websqldatabase |
ผู้ปฏิบัติงานเว็บไซต์ | webworkers |
ในกรณีส่วนใหญ่คุณลักษณะทั้งหมดที่ระบุไว้ในตารางที่ 1 และตารางที่ 2 ส่งคืน true หรือ false ดังนั้นคุณสามารถทดสอบพื้นที่เก็บข้อมูลในพื้นที่โดยใช้ JavaScript ดังที่แสดงด้านล่าง:
if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported } อย่างไรก็ตามในแง่ของ audio และ video ค่าส่งคืนเป็นสตริงที่ระบุว่าเบราว์เซอร์สามารถจัดการระดับความเชื่อมั่นบางประเภทได้ ตามข้อกำหนด HTML5 สตริงที่ว่างเปล่าหมายความว่าไม่รองรับประเภท หากรองรับประเภทนี้ค่าส่งคืนอาจเป็นหรืออาจเป็นไปได้ ตัวอย่างเช่น:
if (Modernizr.video.h264 == ) { // h264 is not supported } HTML5 เพิ่มคุณสมบัติแบบฟอร์มใหม่มากมายเช่น autofocus ซึ่งจะวางเคอร์เซอร์ในฟิลด์ที่ระบุโดยอัตโนมัติเมื่อโหลดหน้าเป็นครั้งแรก required มีคุณสมบัติที่มีประโยชน์อีกอย่างหนึ่งซึ่งจะป้องกันไม่ให้เบราว์เซอร์ที่เข้ากันได้กับ HTML5 จากการส่งแบบฟอร์มหากฟิลด์ที่ต้องการว่างเปล่า (ดูรูปที่ 6)
นี่เป็นสิ่งที่ยอดเยี่ยม แต่มันจะทำให้คุณมีคำถาม: คุณควรทำอย่างไรกับเบราว์เซอร์รุ่นเก่า?
ทางออกหนึ่งคือการเพิกเฉยต่อพวกเขาและทิ้งไว้ในฟังก์ชั่นการตรวจสอบฝั่งเซิร์ฟเวอร์สำหรับการตรวจสอบขั้นสุดท้าย หากเบราว์เซอร์ไม่รู้จักแอตทริบิวต์ required วิธีที่ใช้งานง่ายอีกวิธีหนึ่งในการจัดการกับสถานการณ์นี้คือการสร้างสคริปต์ขนาดเล็กเพื่อตรวจสอบฟิลด์ที่ต้องการ คำแนะนำต่อไปนี้แสดงวิธีการดำเนินการที่สอดคล้องกันด้วยความช่วยเหลือของ Modernizr
</style> <script src=js/modernizr.js></script> </head> <script> แยกต่างหากและสร้างตัวจัดการเหตุการณ์ทันทีที่โหลดหน้าเว็บเพื่ออำนวยความสะดวกในการดำเนินการรหัส:<script src=js/modernizr.js></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head autofocus และคุณสมบัติ required วิธีจัดการกับ autofocus นั้นง่าย:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it } เงื่อนไขนี้ทดสอบ Modernizr.input.autofocus หากไม่รองรับ autofocus ค่าที่ส่งคืนเป็น false อย่างไรก็ตามตัวดำเนินการเชิงตรรกะไม่ใช่ (เครื่องหมายอัศเจรีย์) สามารถย้อนกลับความหมายได้ดังนั้นหากไม่รองรับ autofocus ผลลัพธ์การประเมินของเงื่อนไขนี้เป็น true และ inputs[0].focus() วางเคอร์เซอร์ในฟิลด์อินพุตแรก
required ตอนนี้เพิ่มรหัสเพื่ออำนวยความสะดวกในการตรวจสอบฟิลด์ที่จำเป็น รหัสที่สมบูรณ์ของตัวจัดการเหตุการณ์มีดังนี้:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } } รหัสใหม่สร้างฟังก์ชั่นที่เมื่อส่งแบบฟอร์มมันสามารถวนซ้ำผ่านองค์ประกอบอินพุตทั้งหมดเพื่อค้นหาฟิลด์ที่มีแอตทริบิวต์ required เมื่อพบฟิลด์มันจะลบช่องว่างเริ่มต้นและสิ้นสุดออกจากค่าและหากผลลัพธ์เป็นสตริงที่ว่างเปล่ามันจะเพิ่มผลลัพธ์ลงในอาร์เรย์ required หลังจากมีการตรวจสอบฟิลด์ทั้งหมดหากองค์ประกอบบางอย่างรวมอยู่ในอาร์เรย์เบราว์เซอร์จะแสดงคำเตือนที่เกี่ยวข้องกับชื่อฟิลด์ที่หายไปและป้องกันไม่ให้ฟอร์มถูกส่ง
หมายเหตุ: Safari 5.1 รายงานอย่างไม่ถูกต้องว่ารองรับคุณสมบัติ required ดังนั้นจึงส่งแบบฟอร์มโดยไม่ต้องตรวจสอบฟิลด์ที่ต้องการ นี่เป็นข้อบกพร่องของ Safari แต่ใน Modernizr มันไม่มีอยู่จริง
เมื่อคุณพร้อมที่จะปรับใช้เว็บไซต์ของคุณขอแนะนำให้สร้างเวอร์ชันผลิตภัณฑ์ที่กำหนดเองของ Modernizr ที่มีเฉพาะองค์ประกอบเหล่านั้นที่คุณต้องการ สิ่งนี้สามารถลดขนาดของไลบรารี Modernizr ได้จาก 44KB เป็น 2KB ตามฟังก์ชั่นที่คุณเลือก ช่วงของตัวเลือกปัจจุบันแสดงในรูปที่ 8
รูปที่ 8 หน้าดาวน์โหลด Modernizr ช่วยให้คุณเลือกเฉพาะคุณสมบัติเหล่านั้นที่คุณต้องการตัวเลือกสามารถจัดกลุ่มได้อย่างง่ายดายในหมวดหมู่ต่อไปนี้: CSS3, HTML5, MISC (Ellaneous) และ Extra คลิกปุ่มสลับถัดจากสามชื่อแรกเพื่อเลือกหรือทิ้งกล่องกาเครื่องหมายทั้งหมดในหมวดหมู่การเลือก
โดยค่าเริ่มต้นหมวดหมู่พิเศษจะเลือกสามรายการต่อไปนี้:
หากคุณเลือกตัวเลือกใด ๆ ในหมวดหมู่ CSS3 ตัวเลือกในหมวดหมู่พิเศษต่อไปนี้จะถูกเลือก:
Modernizr.testProp() Modernizr.testAllProps() Modernizr._domPrefixes()อย่า ยกเลิกการเลือกตัวเลือกเหล่านี้ การทำเช่นนี้จะยกเลิกตัวเลือกใด ๆ ที่คุณเลือกในหมวดหมู่ CSS3 โดยอัตโนมัติ
MQ Polyfill (respond.js) ในหมวดหมู่พิเศษได้เพิ่มสคริปต์ที่อนุญาตให้มีการสืบค้นสื่อใน IE 6-8 เพื่อรับการสนับสนุนที่ จำกัด เมื่อคุณเลือกตัวเลือกนี้จะเลือกแบบสอบถามสื่อและ Modernizr.TestStyles () โดยอัตโนมัติ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการสืบค้นสื่อ Polyfill (respond.js) เยี่ยมชม https://github.com/scottjehl/respond
ผู้ใช้ขั้นสูงเท่านั้นที่จะสนใจตัวเลือกอื่น ๆ ในหมวดหมู่พิเศษ สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับสิ่งที่พวกเขาเป็นและวิธีการใช้ให้ดูส่วนการขยายความสามารถของเอกสาร Modernizr
คำอธิบายต่อไปนี้อธิบายวิธีสร้างเวอร์ชันผลิตภัณฑ์ที่กำหนดเองของ Modernizr สำหรับไฟล์ตัวอย่าง เวอร์ชันที่กำหนดเองนี้เป็นสิ่งจำเป็นสำหรับแบบฝึกหัดที่ตามมาซึ่งจะแสดงวิธีการโหลดไฟล์ JavaScript ภายนอกโดยใช้ Modernizr.load()
เมื่อสร้างเวอร์ชันการผลิตแบบกำหนดเองของ Modernizr ตัวเลือกที่มี Modernizr.load() จะต้องเลือกตามค่าเริ่มต้น Modernizr.load() เป็นนามแฝงสำหรับ yepnope() ซึ่งเป็นสคริปต์สคริปต์โหลดเดอร์ที่พัฒนาขึ้นด้วยการซิงโครนัสกับ Modernizr เพื่อแสดงให้เห็นถึงวิธีการใช้งานฉันยกตัวอย่างง่ายๆ ฉันได้ย้ายสคริปต์ที่เกี่ยวข้องจากที่ต้องการ html ไปยัง check_required.js และทำการเปลี่ยนแปลงเล็กน้อยสามครั้งเพื่ออำนวยความสะดวกในการลบการทดสอบ Modernizr และกำหนดให้กับตัวแปรที่เรียกว่า init สคริปต์ที่ได้รับการแก้ไขมีลักษณะเช่นนี้:
var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; }; ข้อได้เปรียบที่ยิ่งใหญ่ของ Modernizr.load() คือมันสามารถโหลดสคริปต์ตามเงื่อนไขตามผลลัพธ์ของความสามารถในการทดสอบเบราว์เซอร์ - นั่นคือเหตุผลที่เรียกว่า yepnope() ในตอนแรก มันสามารถโหลดสคริปต์ภายนอกแบบอะซิงโครนัส - กล่าวอีกนัยหนึ่งมันสามารถโหลดสคริปต์ภายนอกได้หลังจากเบราว์เซอร์ได้โหลดโมเดลวัตถุเอกสาร (DOM) - ดังนั้นจึงสามารถช่วยปรับปรุงประสิทธิภาพของเว็บไซต์ของคุณ
ไวยากรณ์พื้นฐานของ Modernizr.load() คือการส่งผ่านวัตถุด้วยแอตทริบิวต์ต่อไปนี้:
test : คุณสมบัติ Modernizr ที่คุณต้องการตรวจจับ yep : หากการทดสอบสำเร็จตำแหน่งของสคริปต์ที่คุณต้องการโหลด ใช้อาร์เรย์หลายสคริปต์ nope : หากการทดสอบล้มเหลวตำแหน่งของสคริปต์ที่คุณต้องการโหลด ใช้อาร์เรย์หลายสคริปต์ complete : ฟังก์ชั่นที่ทำงานทันทีที่มีการโหลดสคริปต์ภายนอก (ไม่บังคับ) ทั้ง yep และ nope เป็นทางเลือกตราบใดที่คุณให้หนึ่งในนั้น
ในการโหลดและเรียกใช้สคริปต์ใน check_required.js คุณต้องเพิ่มบล็อก <script> ต่อไปนี้หลังจาก Modernizr.Adc.js ต่อไปนี้ได้ถูกแนบไปกับหน้า (รหัสอยู่ในที่ต้องการ _load.html):
<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script> นี่เป็นสิ่งเดียวกับก่อน แต่สามารถลดภาระการดาวน์โหลดของเบราว์เซอร์ที่รองรับแอตทริบิวต์ required แล้ว
ในการทดสอบหลายเงื่อนไขคุณสามารถส่งชุดวัตถุไปยัง Modernizr.load() สำหรับรายละเอียดเพิ่มเติมโปรดดูการสอน Modernizr.load () เกี่ยวกับเอกสาร Modernizr
Modernizr เป็นเครื่องมือที่ทรงพลังและมีประโยชน์ แต่นั่นไม่ได้หมายความว่าคุณควรใช้มัน ไม่จำเป็นต้องใช้ทุกกรณีในการใช้ Modernizr เพื่อให้หลายสไตล์กับเบราว์เซอร์ หากโฟกัสหลักของคุณคือ Internet Explorer ให้พิจารณาใช้ความคิดเห็นแบบมีเงื่อนไขของ IE คุณยังสามารถใช้ CSS Stack เพื่อเขียนทับบางสไตล์ ตัวอย่างเช่นใช้สีเลขฐานสิบหกก่อนจากนั้นแทนที่ด้วย rgba() หรือ hsla() เบราว์เซอร์รุ่นเก่าจะใช้ค่าแรกและละเว้นค่าที่สอง
Modernizr กลายเป็นความจริงจริงๆเมื่อรวมกับ polyfills และ JavaScript อื่น ๆ แต่โปรดจำไว้ว่ามันเป็นเรื่องง่ายที่จะสร้างการทดสอบของคุณเองที่เหมาะสำหรับคุณสมบัติรองรับ ตัวอย่างเช่นต่อไปนี้เป็นรหัสทั้งหมดที่คุณทดสอบว่าเบราว์เซอร์รองรับแอตทริบิวต์ required หรือไม่
var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }บทช่วยสอนนี้ครอบคลุมคุณสมบัติหลักทั้งหมดของ Modernizr สำหรับข้อมูลเพิ่มเติมเกี่ยวกับคุณสมบัติเหล่านี้โปรดดูเอกสารอย่างเป็นทางการที่เกี่ยวข้องซึ่งอยู่ที่ http://www.modernizr.com/docs/ นอกจากนี้คุณสามารถค้นหาทรัพยากรที่มีประโยชน์ต่อไปนี้:
yepnope() ซึ่งได้ถูกรวมเข้ากับ Modernizr.load() ใน Modernizr -