@property: memberikan kekuatan super ke variabel CSS

Una Kravets

CSS Houdini adalah istilah umum yang mencakup serangkaian API tingkat rendah yang mengekspos bagian dari mesin rendering CSS, dan memberi developer akses ke CSS Object Model. Ini adalah perubahan besar untuk ekosistem CSS, karena memungkinkan developer memberi tahu browser cara membaca dan mengurai CSS kustom tanpa menunggu vendor browser memberikan dukungan bawaan untuk fitur ini. Sungguh menarik!

Salah satu tambahan yang paling menarik untuk CSS dalam cakupan Houdini adalah Properties and Values API.

API ini meningkatkan performa properti khusus CSS Anda (juga biasa disebut sebagai variabel CSS) dengan memberinya makna semantik (ditentukan oleh sintaksis) dan bahkan nilai penggantian, sehingga memungkinkan pengujian CSS.

Menulis properti kustom Houdini

Berikut adalah contoh penetapan properti kustom (misalnya: variabel CSS), tetapi sekarang dengan sintaksis (jenis), nilai awal (fallback), dan boolean pewarisan (apakah properti mewarisi nilai dari induknya atau tidak?). Cara saat ini untuk melakukannya adalah melalui CSS.registerProperty() di JavaScript, tetapi di browser yang mendukung, Anda dapat menggunakan @property:

File JavaScript terpisah (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
Disertakan dalam file CSS (Chromium 85)
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Sekarang Anda dapat mengakses --colorPrimary seperti properti kustom CSS lainnya, melalui var(--colorPrimary). Namun, perbedaannya di sini adalah --colorPrimary tidak hanya dibaca sebagai string. Datanya ada!

Nilai penggantian

Seperti properti kustom lainnya, Anda bisa mendapatkan (menggunakan var) atau menetapkan (menulis/menulis ulang) nilai, tetapi dengan properti kustom Houdini, jika Anda menetapkan nilai salah saat menggantinya, mesin rendering CSS akan mengirim nilai awal (nilai penggantiannya), bukan mengabaikan baris.

Perhatikan contoh di bawah. Variabel --colorPrimary memiliki initial-value magenta. Namun, developer telah memberikan nilai "23" yang tidak valid. Tanpa @property, pengurai CSS akan mengabaikan kode yang tidak valid. Sekarang, parser kembali ke magenta. Hal ini memungkinkan penggantian dan pengujian yang sebenarnya dalam CSS. Keren!

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

Sintaksis

Dengan fitur sintaksis, Anda kini dapat menulis CSS semantik dengan menentukan jenis. Jenis saat ini yang diizinkan meliputi:

  • length
  • number
  • percentage
  • length-percentage
  • color
  • image
  • url
  • integer
  • angle
  • time
  • resolution
  • transform-list
  • transform-function
  • custom-ident (string ID kustom)

Menetapkan sintaksis memungkinkan browser memeriksa jenis properti kustom. Hal ini memiliki banyak manfaat.

Untuk mengilustrasikan hal ini, saya akan menunjukkan cara menganimasikan gradien. Saat ini, tidak ada cara untuk menganimasikan (atau melakukan interpolasi) dengan lancar di antara nilai gradien, karena setiap deklarasi gradien diuraikan sebagai string.

Dengan menggunakan properti kustom dengan sintaksis "angka", gradien di sebelah kiri menunjukkan transisi yang mulus antara nilai perhentian. Gradien di sebelah kanan menggunakan properti kustom default (tidak ada sintaksis yang ditentukan) dan menunjukkan transisi yang tiba-tiba.

Dalam contoh ini, persentase perhentian gradien dianimasikan dari nilai awal 40% ke nilai akhir 100% melalui interaksi pengarahan kursor. Anda akan melihat transisi warna gradien atas yang halus ke bawah.

Browser di sebelah kiri mendukung Houdini Properties and Values API, yang memungkinkan transisi perhentian gradien yang lancar. Browser di sebelah kanan tidak. Browser yang tidak mendukung hanya dapat memahami perubahan ini sebagai string yang mengarah dari titik A ke titik B. Tidak ada kesempatan untuk menginterpolasi nilai, dan oleh karena itu Anda tidak melihat transisi yang lancar.

Namun, jika Anda mendeklarasikan jenis sintaksis saat menulis properti kustom, lalu menggunakan properti kustom tersebut untuk mengaktifkan animasi, Anda akan melihat transisi. Anda dapat membuat instance properti kustom --gradPoint seperti ini:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

Kemudian, jika sudah saatnya menganimasikannya, Anda dapat memperbarui nilai dari 40% awal menjadi 100%:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

Tindakan ini sekarang akan mengaktifkan transisi gradien yang lancar.

Transisi batas gradien yang lancar. Lihat Demo di Glitch

Kesimpulan

Aturan @property membuat teknologi yang menarik menjadi lebih mudah diakses dengan memungkinkan Anda menulis CSS yang bermakna secara semantik dalam CSS itu sendiri. Untuk mempelajari CSS Houdini dan Properties and Values API lebih lanjut, lihat referensi berikut:

Foto oleh Cristian Escobar di Unsplash.