[HTML5 CSS3] Modernizr JavaScript Library สำหรับทำเว็บ HTML5 CSS3

December 26, 2011 1:51 pm CSS HTML , , , ,

คงน่าเสียดายที่เว็บ HTML5 CSS3 ที่เราทำมามันจะถูกจำกัดให้ Browser เก่า ๆ แสดงผลได้ไม่เหมือนกับที่เราต้องการ ดังนั้นจึงมีตัวช่วยอย่าง Modernizr ออกมา

โดย 1 ในความสามารถของ Modernizr ซึ่งเป็น Javascript Library นั้นจะช่วยเช็คว่า Browser ที่ทำงานอยู่สนับสนุนการทำงานของ HTML5 CSS3 อย่างไรบ้าง เราจะใช้งานในลักษณะแบบนี้

[html]
<script src="js/modernizr.min.js"></script>
[/html]

และกำหนดที่ html ให้มี class เป็นแบบนี้

[html]
<html class="no-js">
[/html]

และเมื่อตัว Modernizr ทำงาน class ของ html ก็จะเปลี่ยนไปเป็นลักษณะแบบนี้ครับ

[html]
<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">
[/html]

จะเห็นว่า class ที่เปลี่ยนไปนั้น จะบอกถึงคุณสมบัติต่าง ๆ ที่ Browser ตัวนี้สนับสนุน เพื่อที่เราจะได้นำ class เหล่านี้ไปประยุกต์ให้ Browser เก่า ๆ สามารถแสดงผลได้ใกล้เคียงกับที่ 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 เลยครับ
  • http://www.facebook.com/inhumba Pathompong Sangkajit

    ตัวนี้ใช้แล้วจัดการง่ายดี

    • Anonymous

      มีอะไรเสริมมั้ยอะ เพราะยังไม่ได้ลองแบบจริง ๆ จัง ๆ เลยอะ

      • http://www.facebook.com/inhumba Pathompong Sangkajit

        ตัวนี้มันช่วยให้เราจัดการ style ให้ IE ที่ไม่รองรับ html5 ให้สามารถแสดงผลได้ถูกต้อง เช่น header {…} footer {…}

        ส่วน class ที่พ่นออกมาใน tag html จะช่วยให้เราเขียน css ควบคุมการแสดงผลของ browser ได้ละเอียดขึ้น
        อันนี้มีตัวอย่างเข้าใจดี http://webdesignernotebook.com/css/how-to-use-modernizr/

  • i am Draft

    ใช้ยังไงหรอครับ 

    • Anonymous

      ก็เรียกใช้ตามที่ข้างบนอธิบายไว้คร่าว ๆ นั่นละครับ

      ถ้าละเอียด ๆ หน่อย ลองดูในเว็บของมันได้เลยครับ >_<

    • i am Draft

      ผมลองใช้แล้วมันไม่ทำงานอะครับ

      • Anonymous

        ลองดูใน document ของมันอะครับ มันอธิบายวิธีการใช้งานไว้อยู่อะครับ

      • Anonymous

        เพราะผมทำตามแล้วมันได้นะ เลยไม่รู้จะอธิบายว่ามันมีปัญหายังไงเหมือนกันอะครับ T-T

  • i am Draft

    ผมลองใช้แล้วมันไม่ทำงานอะครับ