Aturan @supports (display: grid) menguji apakah browser klien mendukung fitur tertentu sebelum menerapkan kodenya.
CSS @supports
Contoh Kode CSS @supports:
<!DOCTYPE html>
<html>
<head>
<style>
.dukungan-fitur {
padding: 20px;
background: #fee2e2;
color: #991b1b;
font-family: sans-serif;
border-radius: 8px;
}
@supports (display: grid) {
.dukungan-fitur {
background: #dcfce7;
color: #166534;
}
}
</style>
</head>
<body>
<div class="dukungan-fitur">
Peramban ini sepenuhnya mendukung CSS Grid Layout!
</div>
</body>
</html>
Uji dan amati bagaimana deklarasi CSS CSS @supports mengubah tampilan elemen di atas.