CSS3 Media Queries คืออะไร

หลังจากที่ผมได้เคยพูดถึง Media Queries ไปแล้วในหลายๆ บทความ แต่ไม่ได้ลงรายละเอียดมากนัก บทความนี้เราลองมาพูดถึง Media Queries กันดีกว่าครับ โดยผมจะเน้นไปที่ความเป็นมา และวิธีใช้งานเบื้องต้นครับ

รู้จัก Media Types แล้วหรือยัง?

ก่อนอื่นต้องขอพูดถึง Media Types ก่อนครับ Media Types นั้นมีจุดประสงค์เพื่อให้เราสามารถเตรียม style sheets สำหรับบาง media type โดยเฉพาะได้ครับ ยกตัวอย่างเช่น ถ้าผู้ใช้งาน ดูเว็บเราผ่านทางหน้าจอ (screen) ให้อ่าน style sheets ตัวนี้นะ แต่ถ้าเค้าต้องการจะ Print ให้อ่าน style sheets อีกตัวนะ ซึ่งเราได้เตรียมไว้เพื่อให้เหมาะสำหรับการ Print โดยเฉพาะ เป็นต้น

โลกเปลี่ยนไป Media Types อย่างเดียวไม่พอ!

Media Types นั้นจะรองรับ media types ต่างๆ ไม่ว่าจะเป็น  ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’ แต่ในปัจจุบัน devices ต่างๆ มีความซับซ้อนมากยิ่งขึ้น จน media types เดิมที่เคยใช้อยู่ อาจกินความกว้างไปในการใช้งานจริง ยกตัวอย่างเช่น media type “screen” หมายถึง จอคอมพิวเตอร์ทั่วไป แต่ในปัจจุบัน ขนาดของหน้าจอ มีความหลากหลายมาก ต่างจากสมัยก่อน ที่มีขนาดเีพียงไม่กี่นิ้ว ซึ่งข้อจำกัดตรงนี้ ทำให้นักพัฒนาลำบากในการออกแบบเว็บไซต์ให้แสดงผลได้อย่างเหมาะสมใน device ต่างๆ

Media Queries = Media Types + Expression(s)

ในที่สุด ปัญหาดังกล่าวก็หมดไปด้วย CSS3 Media Queries ครับ ซึ่งก็คือการเพิ่ม expression บางอย่างพ่วงเข้าไปกับ Media Types นั่นเอง จากตัวอย่างเดิม เราใช้แค่ media type “screen” อาจยังกว้างไปหน่อย แต่ถ้าเราเพิ่มเงื่อนไขต่อท้ายเข้าไปละ เช่น screen and (min-width:1024px) ก็จะได้ว่าเป็น “หน้าจอ” ที่มี “ความกว้างอย่างน้อย 1024px” จะเห็นว่า expression ที่เราเพิ่มเข้ามา ช่วยให้จำแนก device ต่างๆ ได้ดียิ่งขึ้น

แล้ว Web Browser ไหน ยังไม่รองรับ Media Queries?

Web Browser รุ่นใหม่ๆ รองรับ Media Queries หมดแล้วครับ แต่จะมีปัญหากับบาง Web Browser ที่ยังไม่รองรับ CSS3 ดังตารางด้านล่างนี้

ซึ่งถ้าหากเราอยากทำให้ Web Browser ที่ไม่รองรับ สามารถใช้  Media Queries ได้ ก็มีวิธีครับ โดยใช้ “HTML5 Cross Browser Polyfills” ซึ่งผมจะเขียนบทความเกี่ยวกับเรื่องนี้มาให้อ่านภายหลังครับ

รู้จัก Media Queries แล้ว เอาไงต่อละ!?

ตอนนี้คาดว่าทุกคนคงจะมีพื้นฐานเกี่ยวกับ Media Queries แล้ว ขั้นตอนต่อไป จะเป็นการเรียกใช้ Media Queries ในหน้าเว็บเพจของเรา ซึ่งจะมีอยู่ 3 วิธีด้วยกัน ผมขอจบบทความไว้เพียงเท่านี้ก่อน แล้วพบกันใหม่ ตอนหน้านะครับ