Каманда supports

Каманда @supports задае стыль элементам з улікам магчымасцей, якія падтрымліваюцца браўзерам. У гэтай камандзе можна ствараць умовы з дапамогай лагічных аператараў not, and, or.

Сінтаксіс

css@supports умова {
  
}

Прыклад

Давайце зададзім умову, што калі ваш браўзер падтрымлівае ўласцівасць display са значэннем flex, то адлюструецца толькі абзац з адпаведным тэкстам, пры гэтым колер яго шрыфту будзе блакітнага колеру:

html<p class="yes">Your browser support display: flex.</p>
<p class="no">Your browser does not support display: flex.</p>

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

Результат:

Глядзіце таксама