CSS reguła @supports

Definicja i użycie

CSS @supports Reguła służy do testowania, czy przeglądarka obsługuje pewną cechę CSS, i definiuje alternatywny styl, jeśli nie jest obsługiwany.

Przykład

Jeśli przeglądarka obsługuje display: grid, zastosuj @supports CSS wewnątrz reguły. Jeśli nie jest obsługiwane, zastosuj @supports Styl klasy .container poza regułą:

/* Jeśli przeglądarka nie obsługuje display: grid, zastosuj ten CSS */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}
/* Jeśli przeglądarka obsługuje display: grid, zastosuj ten CSS */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

Spróbuj sam

Gramatyka CSS

@supports (supports-condition) {
  /* Jeśli warunek jest prawdziwy, zastosuj ten CSS */
}

Wartość atrybutu

Wartość Opis
supports-condition

Definiuje warunki przedstawione jako pary nazwa-wartość (property: value) lub gramatykę function().

Warunki mogą być łączone za pomocą and, or lub not.
selector()

jest gramatyką function(). Sprawdza, czy przeglądarka obsługuje określony语法选择器.

Na przykład, @supports selector(h2 > p) jeśli przeglądarka obsługuje podselektory, zwraca true i stosuje styl CSS.
font-tech()

jest gramatyką function(). Sprawdza, czy przeglądarka obsługuje określone techniki czcionki.

Na przykład, @supports font-tech(color-svg) jeśli przeglądarka obsługuje wielokolorowe tabele SVG, zwraca true i stosuje styl CSS.
font-format()

jest gramatyką function(). Sprawdza, czy przeglądarka obsługuje określony format czcionki.

Na przykład, @supports font-format(woff) jeśli przeglądarka obsługuje WOFF 1.0, zwraca true i stosuje styl CSS.

Obsługa przeglądarki

Liczby w tabeli oznaczają wersję przeglądarki, która w pełni obsługuje tę @ regułę.

@ reguła Chrome Edge Firefox Safari Opera
@supports 28 12 22 9 12.1
font-format() 108 108 106 17 94
font-tech() 108 108 106 17 94
selector() 83 83 69 14.1 69