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

Una Kravets

Bersiaplah untuk kekuatan tambahan CSS. Aturan @property, yang merupakan bagian dari lingkup API Houdini CSS, kini didukung sepenuhnya di semua browser modern. Fitur inovatif ini membuka tingkat kontrol dan fleksibilitas baru untuk properti khusus CSS (juga dikenal sebagai variabel CSS), membuat stylesheet Anda lebih cerdas dan dinamis.

Dukungan Browser

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Sumber

Manfaat @property

  • Arti semantik: Gunakan @property untuk menentukan jenis (sintaksis) untuk properti kustom Anda. Atribut ini memberi tahu browser tentang jenis data yang disimpan oleh properti kustom Anda (misalnya, warna, panjang, atau angka), mencegah hasil yang tidak terduga, dan mendukung kemungkinan baru seperti menganimasikan 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 ditentukan dengan baik.
  • Penanganan error yang lebih baik: Keamanan jenis yang ditingkatkan dan kemampuan untuk menetapkan penggantian membuka peluang baru untuk pengujian dan validasi secara langsung dalam CSS Anda.

Membuat properti kustom lanjutan

Untuk membuat "standar" properti khusus, atur nama properti yang diawali dengan -- dan berikan nilai untuk 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 dari "properti khusus lanjutan" ini, termasuk semantik di luar string, daftarkan properti khusus CSS Anda ke @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 lebih banyak detail daripada sekadar nama dan nilai. Fungsi ini mencakup jenis sintaksis dan menetapkan pewarisan ke benar atau salah.

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

Demo: Latar belakang gradien berkelap-kelip

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

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

Hal ini dapat dilakukan 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 akan 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 khusus yang terdaftar di CSS merupakan fitur yang sangat canggih dan memperluas bahasa CSS dengan memberikan arti dan konteks pada variabel CSS. Sekarang, dengan @property yang berada di dasar pengukuran, kekuatan super CSS ini semakin kuat.

Bacaan Tambahan