gacor: Gunakan @supports untuk peningkatan CSS bertahap

@supports memeriksa apakah browser mengenali deklarasi CSS. Gunakan fitur ini untuk menambahkan peningkatan di atas tata letak dasar yang tetap dapat digunakan tanpa fitur baru tersebut.

.card {
  display: block;
}

@supports (display: grid) {
  .card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

Deteksi fitur, bukan nama browser

• Uji properti yang tepat dan nilai kebutuhan peningkatannya.
• Jaga agar fallback tetap bermakna daripada menyembunyikan konten penting.
• Gunakan dan / atau / tidak untuk menggabungkan pemeriksaan ketika suatu fitur bergantung pada lebih dari satu deklarasi.

Ingatlah bahwa dukungan sintaksis bukanlah keseluruhan cerita

Pemeriksaan dukungan yang berhasil memberi tahu Anda bahwa browser mem-parsing sebuah deklarasi; ini tidak membuktikan setiap detail berfungsi dengan sempurna atau bahwa fitur tersebut cocok untuk halaman tersebut. Uji interaksi sebenarnya dan pertahankan fallback yang masuk akal.

Gunakan kueri fitur untuk penyempurnaan, bukan sebagai pengganti untuk memeriksa dukungan browser atau untuk menguji tata letak sebenarnya.