Modenizr เป็นไฟล์ JavaScript ที่รวบรวมฟังก์ชั่นในการตรวจสอบว่า เว็บเบราเซอร์ของผู้ใช้เว็บนั้น สามารถรองรับฟีเจอร์ของ HTML5 ที่เราต้องการใช้หรือไม่
การใช้ Modenizr นั้น ประกอบไปด้วย 3 ขั้นตอนง่ายๆดังนี้
- ไปดาวน์โหลด Modenizr ซึ่งเป็นไฟล์ JavaScript (.js) จากเว็บhttp://www.modernizr.com/download/ แล้วติ๊กเลือกฟีเจอร์ที่คุณต้องการเรียกใช้งาน โดยคลิกที่ปุ่ม Generate แล้วเว็บจะทำการสร้างสคริปให้คุณนำไปใช้งาน จากนั้นให้คลิกที่ปุ่ม Download เพื่อ Save ไฟล์ลงบนเครื่องคอมพิวเตอร์ของคุณครับ
- เปิดไฟล์เว็บไซต์ของคุณขึ้นมา (สกุลไฟล์ .html) แล้วเพิ่ม tag <script>ลงไป เพื่อให้เว็บไซต์ของคุณรู้จักกับไฟล์สคริป Modenizr ดังนี้
<!DOCTYPE html>
<html>
<head>
<script src=”(ไฟล์สคริป Modenizr ที่ดาวน์โหลดมาจากข้อ 1)“></script>
</head>
</html>โดยในส่วนของ “ไฟล์สคริป Modenizr ที่ดาวน์โหลดมาจากข้อ 1” ให้คุณใส่สถานที่ (path)ที่เก็บไฟล์สคริปไว้ลงไป เช่น ถ้าไฟล์สคริป ชื่อ “modenizr.js” ไว้ในโฟลเดอร์ที่ชื่อ “MyScript” ซึ่งเป็นโฟลเดอร์ที่อยู่ในโฟลเดอร์เดียวกับไฟล์เว็บไซต์ ก็ให้คุณใส่ path ในส่วนนี้ว่า “MyScript/modenizr.js”
- จากนั้น คุณจะสามารถเริ่มใช้งานไฟล์สคริป Modenizr ในการตรวจสอบฟีเจอร์ต่างๆ ได้ทันที ซึ่ง Modenizr จะทำการเก็บโค้ดในการตรวจเช็คฟีเจอร์เหล่านี้ในรูปแบบของ Property ที่คืนค่าเป็น Boolean หรือกล่าวง่ายๆคือ คุณสามารถเขียนโค้ดเพียง 1 บรรทัด เพื่อถาม Modenizr ได้เลย ว่าเว็บเบราเซอร์ที่คุณกำลังใช้อยู่ รองรับฟีเจอร์ที่คุณต้องการตรวจสอบหรือไม่ ซึ่งเจ้า Modenizr ก็จะตอบคุณว่า ใช้ได้ หรือใช้ไม่ได้ ทำให้คุณสามารถที่จะเขียนโค้ดเผื่อไว้สำหรับทั้งสองกรณีที่จะเกิดขึ้นได้เลยโดยใช้ if-else ดังตัวอย่างในการเช็คฟีเจอร์ที่ใช้ในการสร้างแอนิเมชั่นอย่าง Canvas ด้านล่างนี้if (Modenizr.canvas) //ถาม Modenizr ว่าใช้งานฟีเจอร์ Canvas ได้หรือไม่
{
// ฟีเจอร์นี้สามารถใช้งานได้ในเบราเซอร์ที่กำลังใช้อยู่
// คุณสามารถเรียกใช้ฟีเจอร์นี้ได้เลย เขียนโค้ดเรียกใช้เลยครับ!!
}
else
{
// ฟีเจอร์นี้ไม่สามารถใช้งานได้ หาวิธีอื่นเอาละกันนะจ๊ะ
// อาจจะให้เว็บโชว์เป็นประโยคสั้นๆ ว่า “เปลี่ยนเว็บเบราเซอร์เถอะ
ที่คุณใช้อยู่มันเก่าเกินไป” ก็ได้นะ
}
โดยคุณสามารถดูรายชื่อของฟีเจอร์ HTML5 ที่ Modenizr รองรับได้เพิ่มเติมที่ http://www.modernizr.com/docs/#features-html5 ซึ่งจะมีการอัพเดทอยู่ตลอดเวลาครับ
ที่มา: http://howtohtml5.wordpress.com/2011/09/07/ตอนที่-2-ตรวจเช็ค-html5-functions-กับ-modenizr/
