@property: memberikan kekuatan super ke variabel CSS

Una Kravets

CSS Houdini adalah istilah umum yang mencakup sekumpulan API tingkat rendah yang mengekspos bagian-bagian mesin rendering CSS, serta memberikan akses developer ke CSS Object Model. Ini adalah pengalaman untuk ekosistem CSS, karena memungkinkan developer memberi tahu browser cara untuk membaca dan mengurai CSS khusus tanpa menunggu vendor browser menyediakan dukungan bawaan untuk fitur ini. Menarik sekali!

Salah satu tambahan paling menarik pada CSS dalam payung Houdini adalah Properti dan Nilai Google Cloud Platform.

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

Menulis properti kustom Houdini

Berikut adalah contoh cara menetapkan properti khusus (misalnya: variabel CSS), tetapi sekarang dengan sintaksis (jenis), nilai awal (penggantian), dan boolean pewarisan (melakukan ia mewarisi nilai dari induknya atau tidak?). Cara saat ini untuk melakukannya adalah hingga CSS.registerProperty() di JavaScript, tetapi dalam browser pendukung, 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 khusus CSS lainnya, melalui var(--colorPrimary). Namun, perbedaannya di sini adalah --colorPrimary tidak dibaca sebagai suatu {i>string<i}. Datanya ada!

Nilai penggantian

Seperti properti khusus lainnya, Anda bisa mendapatkan (menggunakan var) atau menetapkan (tulis/tulis ulang), tetapi dengan properti khusus Houdini, jika Anda menetapkan nilai falsey saat menggantinya, mesin rendering CSS akan mengirimkan nilai awal (nilai penggantiannya) alih-alih mengabaikan baris.

Perhatikan contoh di bawah ini. Variabel --colorPrimary memiliki initial-value dari magenta. Namun, developer telah memberikan "23". Tanpa @property, parser CSS akan mengabaikan kode tidak valid. Sekarang, parser akan melakukan penggantian 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 suatu jenis data. 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 untuk melakukan pemeriksaan jenis properti kustom. Hal ini memiliki banyak manfaat.

Untuk menggambarkan hal ini, saya akan menunjukkan cara menganimasikan gradien. Saat ini, tidak ada cara untuk menganimasikan (atau menginterpolasi) dengan lancar antar nilai gradien, karena setiap deklarasi gradien diuraikan sebagai string.

Menggunakan properti khusus dengan "angka" sintaksis, gradien di sebelah kiri menunjukkan lapisan transisi di 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 titik awal 40% hingga nilai akhir 100% melalui interaksi pengarahan kursor. Anda akan melihat transisi yang mulus dari warna gradien atas ke bawah.

Browser di sebelah kiri mendukung Houdini Properties and Values API, yang memungkinkan transisi berhenti gradien yang mulus. Browser di sebelah kanan tidak demikian. Tujuan browser yang tidak mendukung hanya dapat memahami perubahan ini sebagai {i>string<i} yang dari titik A ke titik B. Tidak ada kesempatan untuk menginterpolasi nilai-nilai, dan sehingga Anda tidak melihat transisi yang mulus.

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

@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%;
}

Ini sekarang akan memungkinkan transisi gradien yang mulus tersebut.

Transisi batas gradien dengan lancar. Lihat Demo tentang Glitch

Kesimpulan

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

Foto oleh Cristian Escobar di Unsplash.