Aturan @property adalah fitur modern CSS Houdini yang memberikan tipe sintaks dan nilai awal pada custom properties.
CSS @property
Contoh Kode CSS @property:
<!DOCTYPE html>
<html>
<head>
<style>
@property --sudut-gradien {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.kartu-berputar {
background: linear-gradient(var(--sudut-gradien), #0d2e5c, #04AA6D);
color: white;
padding: 25px;
border-radius: 12px;
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div class="kartu-berputar">
<h4>CSS @property Houdini</h4>
<p>Mendukung tipe data ketat di dalam stylesheet modern.</p>
</div>
</body>
</html>
Uji dan amati bagaimana deklarasi CSS CSS @property mengubah tampilan elemen di atas.