@property: memberikan kekuatan super ke variabel CSS

Una Kravets

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

Salah satu tambahan paling menarik pada CSS dalam payung Houdini adalah Properties and Values API.

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

Menulis properti kustom Houdini

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

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});

@property --colorPrimary {
  syntax: '';
  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 hanya dibaca sebagai string. Data itu memiliki data.

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), bukan mengabaikan baris.

Perhatikan contoh di bawah ini. Variabel --colorPrimary memiliki initial-value dari magenta. Namun, developer telah memberikan nilai "23" yang tidak valid. Tanpa @property, parser CSS akan mengabaikan kode yang tidak valid. Sekarang, parser akan kembali ke magenta. Hal ini memungkinkan penggantian dan pengujian 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)

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

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

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

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

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

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

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

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

Tindakan ini sekarang akan memungkinkan transisi gradien yang lancar.

Kesimpulan

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

• Apakah Houdini Sudah Siap?
• Referensi MDN Houdini
• Properti kustom yang lebih cerdas dengan API baru Houdini
• Antrean Masalah CSSWG Houdini

Foto oleh Cristian Escobar di Unsplash.