CSS
Zapytania dotyczące funkcji

Składnia

• @supports [warunek] {/ * Zasady CSS do zastosowania * /}

Parametry

Uwagi

Podstawowe użycie @ obsługuje

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

Pod względem składni @supports jest bardzo podobne do @media , ale zamiast wykrywania rozmiaru ekranu i orientacji, @supports wykryje, czy przeglądarka może obsłużyć daną regułę CSS.

Zamiast robić coś takiego jak @supports (flex) , zwróć uwagę, że reguła to @supports (display: flex) .

Wykrywanie funkcji łączenia

Aby wykryć wiele funkcji jednocześnie, użyj operatora and .

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

Istnieje również or operator, a not operator:

@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(...) */
}

Aby uzyskać najlepszą @supports , spróbuj pogrupować wyrażenia logiczne w nawiasach:

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

Działa to, jeśli przeglądarka

1. Obsługuje display: block ORAZ zoom: 1 lub
2. Obsługuje display: flex AND NOT display: table-cell , lub
3. Obsługuje transform: translateX(1px) .