Atur @supports CSS

Definisi dan penggunaan

CSS @supports Aturan digunakan untuk menguji apakah browser mendukung fitur CSS tertentu dan mendefinisikan gaya cadangan jika tidak didukung.

Contoh

Jika browser mendukung display: grid, lakukan ini @supports CSS dalam aturan. Jika tidak didukung, lakukan ini @supports Gaya kelas .container luar aturan:

/* Jika browser tidak mendukung display: grid, gunakan ini CSS */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}
/* Jika browser mendukung display: grid, gunakan ini CSS */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

Coba sendiri

sintaks CSS

@supports (supports-condition) {
  /* Jika kondisi benar, lakukan ini CSS */
}

Nilai properti

Nilai Deskripsi
supports-condition

Kondisi didefinisikan dalam bentuk pasangan nama-nilai (property: value) atau sintaks function().

Kondisi dapat di gabungkan dengan and, or, atau not.
selector()

adalah sintaks function(). Memeriksa apakah browser mendukung sintaks pemilih yang ditentukan.

Contoh, @supports selector(h2 > p) jika browser mendukung pengecampuran anak, maka kembalikan true dan aplikasikan gaya CSS.
font-tech()

adalah sintaks function(). Memeriksa apakah browser mendukung teknologi font yang ditentukan.

Contoh, @supports font-tech(color-svg) jika browser mendukung tabel warna SVG, maka kembalikan true dan aplikasikan gaya CSS.
font-format()

adalah sintaks function(). Memeriksa apakah browser mendukung format font yang ditentukan.

Contoh, @supports font-format(woff) jika browser mendukung WOFF 1.0, maka kembalikan true dan aplikasikan gaya CSS.

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang sepenuhnya mendukung aturan @.

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