เรามีวิธีการเช็คว่าสามารถใช้ CSS นั้นได้หรือไม่บนบราวเซอร์ผ่าน @supports หากใช้ไม่ได้เราจะเลือกแสดง CSS ด้วยกฎอื่นแทน เพื่อให้บราวเซอร์นั้นยังคงแสดงผลได้ตามที่เราต้องการ

ตัวอย่างเช่นเราต้องการใช้งาน display: grid แต่ไม่มั่นใจว่าบราวเซอร์ที่ผู้ใช้งานจะเปิด สนับสนุนการทำงานกับ CSS Grid Layout หรือไม่ เราจึงใช้ @supports เพื่อทำการตรวจสอบก่อน หากสนับสนุนก็แสดงผล display: flex ตามปกติ หากไม่แล้วก็เลือกแสดงผลเป็น display: flex แทน สามารถเขียนได้ดังนี้

1@supports (display: grid) {
2  div {
3    display: grid;
4  }
5}
6
7@supports not (display: grid) {
8  div {
9    display: flex;
10  }
11}

รูปแบบของไวยากรณ์ข้างต้นนั้นเราเรียกว่า Declaration Syntax

ในการใช้งาน @supports ยังมีอีกรูปแบบนึงที่เรียกว่า Function Syntax เช่นการทดสอบว่าสามารถใช้งาน selector ที่ชื่อว่า :is ได้หรือไม่ผ่านฟังก์ชัน selector ดังนี้

1@supports selector(: is) {
2  :is(header, main, footer) p {
3    color: red;
4  }
5}

ในส่วนของ Function Syntax นั้นให้ระวังในเรื่องการใช้งานกับบราวเซอร์ โดยเฉพาะกับ Safari ที่จะเริ่มใช้งานไวยากรณ์นี้ได้ในเวอร์ชั่น 14 เป็นต้นไป