Interpolasi Variabel Numerik CSS

Kita dapat membuat variabel dalam CSS dengan cukup mudah:

:root {
  --scale: 1;
}

Dan kami dapat mendeklarasikannya pada elemen apa pun:

.thing {
  transform: scale(--scale);
}

Bahkan lebih baik untuk contoh seperti ini adalah menerapkan variabel pada interaksi pengguna, katakanlah :hover:

:root {
  --scale: 1;
}

.thing {
  height: 100px;
  transform: scale(--scale);
  width: 100px;
}

.thing:hover {
  --scale: 3;
}

Tapi jika kita ingin menggunakan variabel itu dalam animasi… nada.

:root {
  --scale: 1;
}

@keyframes scale {
  from { --scale: 0; }
  to { --scale: 3; }
}

/* Nope! */
.thing {
  animation: scale .25s ease-in;
  height: 100px;
  width: 100px;
}

Itu karena variabel dikenali sebagai string dan yang kita butuhkan adalah angka yang dapat diinterpolasi di antara dua nilai numerik. Di situlah kita bisa menelepon @property untuk tidak hanya mendaftarkan variabel sebagai properti khusus, tetapi mendefinisikan sintaksnya sebagai angka:

@property --scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

Sekarang kita mendapatkan animasinya!

Anda akan ingin periksa dukungan browser sejak @property hanya mendarat di Chrome (dimulai di versi 85) hingga tulisan ini dibuat. Dan jika Anda berharap untuk mengendusnya dengan @supports, saat ini kami kurang beruntung karena belum menerima at-rules sebagai nilai… belum. Itu akan berubah sekali at-rule()menjadi hal yang nyata.