CSS @supports คืออะไร + สอนวิธีใช้ทำ Feature Detection

หลายๆ คนคงจะเคยเจอปัญหาเกี่ยวกับการรองรับ css3 features ต่างๆ ที่ไม่เท่ากันในแต่ละ web browsers บางครั้งเราอยากใช้อะไรใหม่ๆ แต่ก็ใช้ไม่ได้ เพราะติดตรง web browsers เก่าๆ นั้นยังไม่รองรับ หลายๆ คนถึงกับบ่นว่า มัวแต่รออย่างนี้แล้วเมื่อไรจะได้ใช้สักที

Javascript กับการทำ Feature Detection

ด้วยเหตุนี้เอง จึงทำให้เกิด “Feature Detection” ขึ้น โดยเราจะใช้ javascript เข้ามาช่วยทำหน้าที่ตรวจสอบดูว่า web browser นั้นๆ รองรับ feature นี้ได้แล้วหรือยัง ถ้ารองรับแล้วจะให้ทำอะไร ถ้ายังไม่รองรับจะให้ทำอะไร javascript ที่นิยมใช้ทำ css3 feature detection นี้มีชื่อว่า “Modernizr” สมมติว่าเราจะ test ว่า web browser นี้ รองรับ css transforms แล้วหรือยัง เราจะเขียนโค้ด javascript แบบนี้

การเข้ามาของ Modernizr นั้นมีประโยชน์มาก เราสามารถใช้ความสามารถของ css3 ได้อย่างเต็มที่ ในขณะเดียวกัน เราก็สามารถกำหนด fallbacks ให้กับ web browsers ที่ยังไม่รองรับได้ด้วย อย่างไรก็ตาม การทำ feature detection ด้วย javascript นี้ ก็มีข้อเสียตรงที่เราจำเป็นจะต้องโหลดไฟล์ library ของ Modernizr เข้ามา และยังทำให้หน้าเว็บแสดงผลช้าลงเพราะต้องมา execute โค้ด javascript อีกด้วย

CSS @supports Rule

เราจะเห็นว่า css นั้นรองรับ “graceful degradation” อยู่แล้ว หาก browser เจอ property หรือ value อะไรที่มันไม่รู้จัก มันก็จะข้ามไป แถมเรายังสามารถกำหนด fallback ได้อีกด้วย โดยที่มันยังสามารถทำงานได้ตามปกติ เหมือนไม่มีอะไรเกิดขึ้น

แม้ css จะรองรับ graceful degradation อยู่แล้ว แต่กระบวนการนี้ก็ยังไม่ค่อยมีประสิทธิภาพมากนัก หากเราต้องการ apply สไตล์จำนวนมากๆ นอกจากนั้น นักพัฒนาบางคนอาจเขียน css ด้วยวิธี progressive enhancement

@supports rule จะเข้ามาช่วยแก้ปัญหาเหล่านี้ การทำงานของมันจะคล้ายกับ media queries มาก เพียงแต่ว่ามันจะเป็น feature queries นั่นเอง โดยมันจะสามารถตรวจเช็คได้ว่า web browser นี้ รองรับ css property และ value นี้ แล้วหรือยัง นั่นหมายความว่า เราสามารถเตรียมสไตล์ชีทให้กับ web browser ที่รองรับแล้วได้ รวมไปถึงสไตล์ชีทสำหรับ web browser ที่ยังไม่รองรับด้วยเช่นกัน

Syntax

syntax ของ @supportsrule นั้นจะคล้ายกับ media queries มาก เราแค่เปลี่ยนจาก media feature มาเป็น css declaration เท่านั้นเอง

สมมติเราจะทดสอบว่า web browser นี้ ใช้ “transition: 1s” ได้แล้วหรือยัง เราก็จะเขียน @supports rule แบบนี้

Operators

เราสามารถใช้ operators กับ @supports rule เช่นเดียวกับ media queries โดย operators นั้นจะมี 3 แบบ ด้วยกัน ดังนี้

not

การใช้ not นำหน้าเงื่อนไข จะเป็นการเช็คว่า web browser นั้น ยัง “ไม่” รองรับเงื่อนไขนี้ใช่หรือไม่ ถ้ายังก็ให้ apply สไตล์ชีทต่อไปนี้

and

เราจะใช้ and ในการเชื่อม 2 expressions เข้าด้วยกัน โดยเงื่อนไขจะ test ผ่านก็ต่อเมื่อทั้ง 2 expressions นั้น มีค่าเป็น true

จากตัวอย่างด้านบน เงื่อนไขจะผ่านก็ต่อเมื่อ web browser รองรับทั้ง display: flex และ transition: 1s

or

การใช้ or นั้นจะใช้เชื่อม 2 expressions เข้าด้วยกันเหมือนกับ and เพียงแต่ว่าเงื่อนไขที่ใช้ or นั้นจะ test ผ่านทันที เมื่อ expressions อย่างน้อย 1 expressions มีค่าเป็น true ซึ่งจะมีประโยชน์อย่างมากเมื่อใช้กับ vendor-prefixed properties ดังตัวอย่างต่อไปนี้

Browser compatibility

เนื่องจาก @supports rule เพิ่งจะเป็น W3C Candidate Recommendation ได้ไม่นานนัก web browsers ที่รองรับจึงมีเพียงแค่เวอร์ชั่นใหม่ๆ เท่านั้น ไม่ว่าจะเป็น Chrome 28.0 และ Firefox 22.0 เราสามารถติดตามการอัพเดทได้ที่ Can I use CSS Feature Queries

บทสรุปการใช้ CSS @supports Rule

@supports rule ช่วยให้เราทำ css feature detection ได้โดยไม่ต้องพึ่ง javascript อย่างไรก็ตาม web browsers ที่รองรับ @supports rule แล้ว ยังคงมีน้อยอยู่ แต่ก็มีแนวโน้มว่าจะเพิ่มขึ้นเรื่อยๆ เนื่องจากได้เป็น W3C Candidate Recommendation แล้ว หากถามว่าเราควรใช้ @supports rule ตอนนี้เลยจะดีหรือไม่ ? ตอบได้เลยว่ายังไม่ดี เรายังคงต้องใช้ Modernizr ช่วยอยู่ เพียงแต่เราควรเปลี่ยนมาเขียน javascript เพื่อ test ก่อนว่า web browser นี้ รองรับ @supports rule แล้วหรือยัง ถ้ายังไม่รองรับ เราจึงค่อยโหลด Modernizr เข้ามา วิธีนี้จะดีกว่าการบังคับให้ users ต้องมาโหลด Modernizr ทุกครั้งไป

(Visited 1,641 times, 1 visits today)

Leave a Reply