Команда 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;
  }
}

Результат:

Смотрите также