CSS @supports -sääntö

määrittely ja käyttö

CSS @supports Sääntöä käytetään selaimen tukemisen testaamiseen jossain CSS-ominaisuudessa ja määrittelee varasyylin, jos tukea ei ole.

esimerkki

Jos selain tukee display: grid, soveltaa @supports Säännön sisällä oleva CSS. Jos tukea ei ole, soveltaa @supports Säännön ulkopuolella oleva .container-luokan tyyli:

/* Jos selain ei tue display: grid, käytä tätä CSS:ää */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}
/* Jos selain tukee display: grid, käytä tätä CSS:ää */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

Kokeile itse

CSS-syntaksi

@supports (supports-condition) {
  /* Jos ehto on totta, soveltaa tätä CSS:ää */
}

ominaisuusarvo

arvo kuvaus
supports-condition

Määritellään nimellinen-arvopari (property: value) tai function() -syntaksin avulla ilmaistut ehdot.

Ehdot voidaan yhdistää and, or tai not -avainsanoilla.
selector()

on function()-syntaksia. Tarkistaa, tukeeko selain määritettyä valitsijasyntaksia.

Esimerkiksi, @supports selector(h2 > p) jos selain tukee alikomponentteja, palauttaa true ja soveltaa CSS-tyylejä.
font-tech()

on function()-syntaksia. Tarkistaa, tukeeko selain määritettyä fonttiteknologiaa.

Esimerkiksi, @supports font-tech(color-svg) jos selain tukee SVG-monivärisiä taulukoita, palauttaa true ja soveltaa CSS-tyylejä.
font-format()

on function()-syntaksia. Tarkistaa, tukeeko selain määritettyä fonttipäätä.

Esimerkiksi, @supports font-format(woff) jos selain tukee WOFF 1.0, palauttaa true ja soveltaa CSS-tyylejä.

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen täysin tukevan @säännön selaimen version.

@sääntö 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