Команда supports

@supports командасы браузер колдогон мүмкүнчүлүктөрдү эске алып, элементтерге стил берет. Бул командада шарттарды түзүү үчүн логикалык операторлор not, and, or колдонулушу мүмкүн.

Синтаксис

css@supports шарт {
  
}

Мисал

Сиздин браузериңиз display касиетинин flex маанисин колдосо, анда туура текст менен абзац гана көрсөтүлөт, ал эми анын шрифтинин түсү көгүш болот деген шартты аныктайлы:

html<p class="yes">Сиздин браузериңиз display: flex-ти колдойт.</p>
<p class="no">Сиздин браузериңиз display: flex-ти колдобойт.</p>

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

Результат:

Ошондой эле караңыз