@property: Variabel CSS generasi berikutnya kini dengan dukungan browser universal

Una Kravets

Dipublikasikan: 12 Juli 2024

Bersiaplah untuk peningkatan CSS. Aturan @property, yang merupakan bagian dari payung API CSS Houdini, kini didukung sepenuhnya di semua browser modern. Fitur yang mengubah permainan ini membuka tingkat kontrol dan fleksibilitas baru untuk properti kustom CSS (juga dikenal sebagai variabel CSS), sehingga membuat stylesheet Anda lebih cerdas dan dinamis.

Manfaat @property

  • Makna semantik: Gunakan @property untuk menentukan jenis (sintaksis) properti kustom Anda. Hal ini memberi tahu browser jenis data yang disimpan properti kustom Anda (misalnya, warna, panjang, atau angka), sehingga mencegah hasil yang tidak terduga dan mendukung kemungkinan baru seperti animasi gradien.
  • Nilai penggantian: Tidak ada lagi gaya yang menghilang. Gunakan @property untuk menetapkan nilai awal properti kustom. Jika nilai yang tidak valid ditetapkan nanti, browser akan menggunakan penggantian yang Anda tentukan dengan baik.
  • Penanganan error yang lebih baik: Keamanan jenis yang ditingkatkan dan kemampuan untuk menetapkan penggantian membuka peluang baru untuk pengujian dan validasi langsung dalam CSS Anda.

Membuat properti kustom lanjutan

Untuk membuat properti kustom "standar", tetapkan nama properti yang diawali dengan -- dan berikan nilai pada properti ini. Nilai properti kustom ini diuraikan sebagai string oleh browser.

Contoh berikut menunjukkan cara properti kustom default (berbasis string) diinisialisasi.

:root {
 --myColor: hotpink;
}

Untuk mendapatkan manfaat "properti kustom lanjutan" ini, termasuk semantik di luar string, daftarkan properti kustom CSS Anda dengan @property.

Dalam contoh ini, properti kustom yang sama diinisialisasi dengan @property.

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

Properti kustom yang diinisialisasi dengan @property memberikan detail yang jauh lebih banyak daripada sekadar nama dan nilai. Ini mencakup jenis sintaksis dan menetapkan pewarisan ke benar atau salah.

Manfaat pendekatan ini adalah dengan properti standar, Anda mengharapkan properti tersebut berisi warna sebagai nilai, dan akan menggunakan warna tersebut di tempat lain dalam stylesheet. Jika seseorang memperbarui properti tersebut agar memiliki angka sebagai nilai, penggunaan properti di tempat lain akan gagal. Dengan menggunakan @property, ada warna penggantian yang ditentukan, beserta syntax yang mendeklarasikan bahwa properti ini harus menyimpan nilai warna. Jika nilai non-warna digunakan, penggantian akan digunakan sebagai gantinya.

Demo: Latar belakang gradien berkedip

Salah satu aplikasi @property yang rapi adalah animasi properti yang lancar yang sebelumnya tidak dapat ditransisikan, seperti gradien, yang dianggap sebagai gambar oleh browser. Namun, jika Anda memberikan makna sintaksis variabel melalui @property, variabel ini dapat digunakan dalam pernyataan gradien. Sekarang Anda mendeskripsikan animasi antara dua nilai yang dideklarasikan dalam gradien, yang memungkinkan animasi. Ambil contoh berikut: kartu dengan animasi latar belakang halus yang terdiri dari dua gradien radial yang mengubah warna pada linimasa yang berbeda:

Menggunakan @property untuk menata gaya warna animasi dalam gradien latar belakang.

Hal ini dapat dicapai dengan menyiapkan nilai properti kustom sebagai warna:

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: lavender;
}

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

Kemudian, Anda mengaksesnya untuk membuat latar belakang gradien awal:

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

Selain itu, Anda kemudian memperbarui nilai dalam keyframe:

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

Dan animasikan setiap:

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

Kesimpulan

Properti kustom terdaftar CSS adalah fitur yang sangat canggih yang memperluas bahasa CSS dengan memberikan makna dan konteks ke variabel CSS. Sekarang, dengan @property yang diluncurkan di dasar pengukuran, kekuatan CSS ini semakin meningkat.

Bacaan Tambahan