RULE CSS @supports memungkinkan untuk melakukan deteksi fitur di browser langsung dari stylesheet yang beralih ke polyfill pihak ketiga.

Dengan menggunakan RULE CSS @supports, dapat dilakukan tes dan kemudian menjalankan aturan CSS normal yang ditempatkan di dalam blok tergantung pada apakah tes mengembalikan nilai true atau tidak.

Aturan RULE CSS @supports adalah aturan grup bersyarat yang kondisinya menguji apakah agen pengguna mendukung properti CSS: pasangan nilai. Ini berarti bahwa, tidak seperti kebanyakan alat deteksi fitur JavaScript, aturan @supports memerlukan properti dan nilai yang ditentukan. Misalnya, deklarasi RULE CSS @supports sederhana terlihat seperti ini:

 

Contoh di atas memeriksa apakah browser mendukung properti tampilan dengan nilai flex. Jika ya, jika kondisi mengembalikan nilai true, aturan gaya yang dinyatakan di dalam blok RULE CSS @support akan diterapkan.

Bukan Kata Kunci (The not Keyword)

Sama seperti dapat memeriksa apakah suatu fitur didukung, RULE CSS @supports dapat memeriksa apakah fitur tidak didukung, menggunakan operator bukan. Misalnya, dapat menggabungkan uji dukungan Flexbox di atas dengan pengujian lain yang menyediakan gaya alternatif ketika Flexbox tidak didukung.

 

Cek dengan beberapa kondisi

Anda dapat memeriksa beberapa dukungan fitur dalam aturan RULE CSS @supports menggunakan dan dan atau operator.

Sebagai contoh, jika properti tertentu didukung dengan awalan di beberapa browser dan tidak diperbaiki pada yang lain, mungkin ingin memeriksa dukungan untuk salah satu versi awalan dan tidak diperbaiki. Contoh berikut ini memeriksa dukungan untuk Flexbox, termasuk memeriksa dukungan untuk versi yang dipatenkan vendor.

 

Kalian juga dapat memeriksa dukungan untuk dua fitur di browser menggunakan kata kunci dan. Misalnya, Anda mungkin ingin memeriksa dukungan browser untuk transformasi dan transisi CSS 3D untuk membuat semacam efek tiga dimensi:

Kalian juga dapat menggabungkan dan dan atau kata kunci dalam satu deklarasi @supports untuk melakukan beberapa deteksi fitur.

Untuk menghindari kebingungan yang disebabkan oleh aturan diutamakan, Anda sekarang diperbolehkan untuk menggabungkan dan, atau, dan bukan tanpa menggunakan lapisan tanda kurung. Ini berarti deklarasi berikut tidak valid:

Kalian diizinkan untuk menggabungkan kondisional menggunakan tanda kurung, seperti yang Anda lakukan dengan bahasa pemrograman lain, untuk mendahulukan yang jelas. Jadi, contoh di atas menjadi sah untuk Anda melakukan ini: