CSS
Запросы функций

Синтаксис

• @supports [условие] {/ * Правила CSS для применения * /}

параметры

замечания

Основное использование @supports

@supports (display: flex) {
  /* Flexbox is available, so use it */
  .my-container {
    display: flex;
  }
}

С точки зрения синтаксиса @supports очень похож на @media , но вместо определения размера экрана и ориентации, @supports будет определять, может ли браузер обрабатывать заданное правило CSS.

Вместо того, чтобы делать что-то вроде @supports (flex) , обратите внимание, что это правило @supports (display: flex) .

Обнаружение признаков цепочки

Для того, чтобы обнаружить несколько функций одновременно, использовать and оператор.

@supports (transform: translateZ(1px)) and (transform-style: preserve-3d) and (perspective: 1px) {
  /* Probably do some fancy 3d stuff here */
}

Существует также оператор or оператор, а not оператор:

@supports (display: flex) or (display: table-cell) {
  /* Will be used if the browser supports flexbox or display: table-cell */
}
@supports not (-webkit-transform: translate(0, 0, 0)) {
  /* Will *not* be used if the browser supports -webkit-transform: translate(...) */
}

Для получения максимального опыта @supports попробуйте группировать логические выражения с круглыми скобками:

@supports ((display: block) and (zoom: 1)) or ((display: flex) and (not (display: table-cell))) or (transform: translateX(1px)) {
  /* ... */
}

Это будет работать, если браузер

1. Поддерживает display: block И zoom: 1 , или
2. Поддерживает display: flex AND NOT display: table-cell , или
3. Поддерживает transform: translateX(1px) .