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

Результат:

Вижте също