Supports komandasi

@supports komandasi elementlarga brauzer tomonidan qo‘llab-quvvatlanadigan imkoniyatlar hisobga olgan holda uslub belgilaydi. Ushbu komanda ichida mantiqiy operatorlar not, and, or yordamida shartlar yaratish mumkin.

Sintaksis

css@supports shart {
  
}

Misol

Keling, shart qo‘yaylik: agar brauzeringiz display xususiyatining flex qiymatini qo‘llab-quvvatlasa, faqat mos matnli abzas ko‘rsatiladi, shu bilan birga uning shrift rangi havo rangida bo‘ladi:

html<p class="yes">Sizning brauzeringiz display: flex ni qo‘llab-quvvatlaydi.</p>
<p class="no">Sizning brauzeringiz display: flex ni qo‘llab-quvvatlamaydi.</p>

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

Результат:

Shuningdek qarang