Arahan supports

Arahan @supports menetapkan gaya untuk elemen dengan mengambil kira keupayaan yang disokong oleh pelayar. Dalam arahan ini, anda boleh mencipta syarat menggunakan pengendali logik not, and, or.

Sintaks

css@supports syarat {
  
}

Contoh

Mari kita tetapkan syarat bahawa jika pelayar anda menyokong sifat display dengan nilai flex, maka hanya perenggan dengan teks yang sepadan akan dipaparkan, dengan warna fon berwarna biru muda:

html<p class="yes">Pelayar anda menyokong display: flex.</p>
<p class="no">Pelayar anda tidak menyokong display: flex.</p>

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

Результат:

Lihat juga