Perintah supports

Perintah @supports mengatur gaya pada elemen dengan mempertimbangkan fitur yang didukung oleh browser. Dalam perintah ini, kondisi dapat dibuat menggunakan operator logika not, and, or.

Sintaks

css@supports kondisi {
  
}

Contoh

Mari kita buat kondisi bahwa jika browser Anda mendukung properti display dengan nilai flex, maka hanya paragraf dengan teks yang sesuai yang akan ditampilkan, dengan warna font berwarna biru langit:

html<p class="yes">Browser Anda mendukung display: flex.</p>
<p class="no">Browser Anda tidak mendukung display: flex.</p>

css@supports (display: flex) {
  .no {
    display: none;
  }
  p {
    color: #467CBC;
  }
}
@supports not (display: flex) {
  .yes {
    display: none;
  }
}

Результат:

Lihat juga