ทดสอบ feature JavaScript library, HTML, CSS รุ่นใหม่ใน Browser ด้วย Modernizr… Actions!

Modernizr มันคืออะไร

Modernizr คือ JavaScript library ขนาดกระทัดลัด ที่ช่วยตรวจสอบ browser ที่ต้อง  render web application ที่เราพัฒนาขึ้นมาว่า สนับสนุน JavaScript, HTML, CSS รุ่นใหม่นี้หรือไม่ เพราะ JavaScript รุ่นใหม่ๆที่เรา load มาใช้อาจจะต้องใช้ feature ใหม่ใน HTML5 หรือ CSS3 ดังนั้น Modernizr จึงเกิดขึ้นมาช่วยเราทดสอบ browser ว่าสนับสนุนคุณลักษณะ(test feature)ใหม่ทั้ง JavaScript และ CSS ที่จะเพิ่มเข้าไปนี้หรือไม่ แล้วถ้าไม่จะจัดการอย่างไรให้ web application ของเรายังคงทำงานได้ถูกต้องตลอดไป(working)

เริ่มต้นติดตั้ง

เข้าไป load file Modenizr javascript จาก Download ที่หน้านี้จะมี options test feature list ให้เลือก เริ่มจาก CSS3, HTML5 และก็พวก OpenSource javascript library ต่างๆอีกจำนวนหนึ่ง ก็เลือกกันไปตาม library ที่เราต้องการทดสอบ หลังจากนั้นก็กด GENERATE มันจะแสดง javascript ของ Modenizr ออกมาเยอะแยะ ดูคร่าวๆก็เกี่ยวกับ pattern ของการทดสอบ feature ที่เราได้เลือก options ไว้แต่ต้น ดูเสร็จก็ DOWNLOAD ไปเก็บไว้ใน folder javascript ใน projects web ของเรา แล้วใช้งานกันได้เลย

ทำความเข้าใจ Modernizr จากตัวอย่างง่ายๆ

ดูตัวอย่าง javascript ตามข้างล่างนี้

Modernizr.load({
  test: Modernizr.geolocation,
  yep : ‘geo.js’,
  nope: ‘geo-polyfill.js’
});

บรรทัดแรก Modernizr.load มันคือ resource loader (CSS และ JavaScript) เจ้า loader นี้จะ load ทรัพยากรให้เราอย่างมีประสิทธิภาพมากขึ้น ทำให้ render หน้า web ของเราได้เร็วขึ้นอีก (Modernizr ขยายตัว loader จาก yepnope.js) จาก code ตัวอย่าง loader จะ load js file ที่ต่างกันขึ้นอยู่กับ browser นี้ว่าสนับสนุน geolocation มั้ย (ดูบรรทัดนี้ test: Modernizr.geolocation) ถ้าใช่(yep) จะ load ไฟร์ geo.js ถ้าไม่(nope)จะ load ไฟร์ geo-polyfill.js(fallback file) (ซึ่ง geo.js กับ geo-polyfill.js ทำงานได้เหมือนกันแต่มัน implement ข้างในต่างกัน คือมันเป็น polymorphism กันนั่นเอง)

อีกตัวอย่างจะ load jQuery จาก website http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js ถ้า load ไม่สำเร็จด้วยสาเหตุอะไรก็แล้วแต่ ให้ load ไฟร์ jquery-1.6.1.min.js จาก website ของเราแทน

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title>Modernizr Load</title>
</head>
<body>
    <div>
        <input id=”message” type=”text” readonly=”readonly”/>
    </div>
</body>
<script src=”js/modernizr.custom.58195.js” type=”text/javascript”></script>
<script type=”text/javascript”>
    Modernizr.load({
        load: ‘//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js’,
        nope: ‘js/jquery-1.5.1.min.js’,//fallback files
        complete: function () {
            $(function () {
                $(“#message”).val(“Ok. Support. jQuery ” + $().jquery);
            });
        }
    });
</script>
</html>

มันใช้กับ browser อะไรได้บ้าง

Modernizr ใช้ได้กับ  IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome.
บน  mobile Modernizr ใช้ได้กับ iOS mobile Safari, Android’s WebKit browser, Opera Mobile, Firefox Mobile
และกำลังพัฒนา ทดสอบเพิ่มไปเรื่อยๆ รวมทั้ง Blackberry 6+ ด้วย

ขอขอบคุณ: Modernizr

แหล่งข้อมูลเพิ่มเติม: Safely use HTML 5 and CSS 3 Today with Modernizr

 

ขอบคุณครับ 🙂

การพัฒนา Web Application ที่ work แล้วมันทำให้คุณ

ทำงานน้อยลง ง่ายขึ้น และประหยัดมากขึ้น แต่… มันให้ผลลัพย์ที่มากเกินคาดคิดเลยทีเดียว

— Chav:P — 

Advertisements

#css, #html, #javascript