CSS @supports regel

Definitie en gebruik

CSS @supports De regel wordt gebruikt om te testen of de browser een bepaalde CSS-functie ondersteunt en definieert alternatieve stijlen bij onondersteuning.

Voorbeeld

Als de browser display: grid ondersteunt, wordt toegepast @supports CSS binnen de regel. Als deze niet wordt ondersteund, wordt toegepast @supports Stijlen van de .container-klasse buiten de regel:

/* Als de browser display: grid niet ondersteunt, gebruik dan dit CSS */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}
/* Als de browser display: grid ondersteunt, gebruik dan dit CSS */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

Probeer het zelf

CSS-syntaxis

@supports (supports-condition) {
  /* Als de voorwaarde waar is, pas dit CSS toe */
}

Eigenschapswaarde

Waarde Beschrijving
supports-condition

Definieer voorwaarden met behulp van naam-waardeparen (property: value) of function() syntaxis.

Voorwaarden kunnen worden gecombineerd met and, or of not.
selector()

is function() syntaxis. Controleer of de browser de opgegeven selector-syntaxis ondersteunt.

Bijvoorbeeld, @supports selector(h2 > p) geeft true terug en past CSS-stijlen toe als de browser subcombinators ondersteunt.
font-tech()

is function() syntaxis. Controleer of de browser de opgegeven lettertype-techniek ondersteunt.

Bijvoorbeeld, @supports font-tech(color-svg) geeft true terug en past CSS-stijlen toe als de browser SVG meerkleurige tabellen ondersteunt.
font-format()

is function() syntaxis. Controleer of de browser de opgegeven lettertype-indeling ondersteunt.

Bijvoorbeeld, @supports font-format(woff) geeft true terug en past CSS-stijlen toe als de browser WOFF 1.0 ondersteunt.

Browserondersteuning

De cijfers in de tabel geven de browserversie aan die de @ regel volledig ondersteunt.

@ regel 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