Properti kustom yang lebih cerdas dengan API baru Houdini

Transisi dan perlindungan data di CSS

Sam Richard

Properti kustom CSS, yang juga dikenal sebagai variabel CSS, memungkinkan Anda menentukan properti sendiri di CSS dan menggunakan nilainya di seluruh CSS. Meskipun sangat berguna saat ini, properti kustom memiliki kekurangan yang dapat membuatnya sulit digunakan: properti kustom dapat mengambil nilai apa pun sehingga dapat diganti secara tidak sengaja dengan sesuatu yang tidak terduga, properti kustom selalu mewarisi nilainya dari induknya, dan Anda tidak dapat mentransisikannya. Dengan CSS Properties and Values API Level 1 Houdini, yang kini tersedia di Chrome 78, kekurangan ini dapat diatasi, sehingga properti kustom CSS menjadi sangat efektif.

Apa itu Houdini?

Sebelum membahas API baru, mari kita bahas Houdini secara singkat. CSS-TAG Houdini Task Force, yang lebih dikenal sebagai CSS Houdini atau Houdini saja, ada untuk "mengembangkan fitur yang menjelaskan 'keajaiban' gaya visual dan tata letak di web". Kumpulan spesifikasi Houdini dirancang untuk membuka kecanggihan mesin rendering browser, sehingga memungkinkan insight yang lebih mendalam tentang gaya kita dan kemampuan untuk memperluas mesin rendering kita. Dengan ini, nilai CSS yang diketik dalam JavaScript dan polyfill atau penemuan CSS baru tanpa penurunan performa akhirnya dapat dilakukan. Houdini berpotensi memberikan kekuatan super pada kreativitas di web.

CSS Properties and Values API Level 1

CSS Properties and Values API Level 1 (Houdini Props and Vals) memungkinkan kita memberikan struktur pada properti kustom. Berikut adalah situasi saat ini saat menggunakan properti kustom:

.thing {
  --my-color: green;
}

Karena properti kustom tidak memiliki jenis, properti tersebut dapat diganti dengan cara yang tidak terduga. Misalnya, pertimbangkan apa yang terjadi jika Anda menentukan --my-color dengan URL.

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

Di sini, karena --my-color tidak diketik, ia tidak tahu bahwa URL bukanlah nilai warna yang valid. Saat kita menggunakannya, properti ini akan kembali ke nilai default (hitam untuk color, transparan untuk background). Dengan Houdini Props dan Vals, properti kustom dapat didaftarkan sehingga browser mengetahui apa yang seharusnya dilakukan.

Sekarang, properti kustom --my-color terdaftar sebagai warna. Hal ini memberi tahu browser jenis nilai yang diizinkan dan cara browser dapat mengetik dan memperlakukan properti tersebut.

Anatomi properti terdaftar

Mendaftarkan properti akan terlihat seperti ini:

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

Ini mendukung opsi berikut:

name: string

Nama properti kustom.

syntax: string

Cara mengurai properti kustom. Anda dapat menemukan daftar lengkap kemungkinan nilai dalam spesifikasi Nilai dan Unit CSS. Nilai defaultnya adalah *.

inherits: boolean

Apakah setelan ini mewarisi nilai induknya. Default-nya adalah true.

initialValue: string

Nilai awal properti kustom.

Mempelajari syntax lebih lanjut. Ada sejumlah opsi yang valid, mulai dari angka hingga warna hingga jenis <custom-ident>. Sintaksis ini juga dapat diubah menggunakan nilai berikut

• Menambahkan + menandakan bahwa properti tersebut menerima daftar nilai yang dipisahkan spasi dari sintaksis tersebut. Misalnya, <length>+ akan menjadi daftar panjang yang dipisahkan spasi
• Penambahan # menandakan bahwa parameter tersebut menerima daftar nilai yang dipisahkan koma dari sintaksis tersebut. Misalnya, <color># akan menjadi daftar warna yang dipisahkan koma
• Menambahkan | di antara sintaksis atau ID menandakan bahwa salah satu opsi yang disediakan valid. Misalnya, <color># | <url> | magic akan mengizinkan comma separated list warna, URL, atau kata magic.

Gotchas

Ada dua hal yang perlu diperhatikan terkait Houdini Props dan Vals. Pertama, setelah ditentukan, properti terdaftar yang ada tidak dapat diperbarui, dan mencoba mendaftarkan ulang properti akan menampilkan error yang menunjukkan bahwa properti tersebut telah ditentukan.

Kedua, tidak seperti properti standar, properti terdaftar tidak divalidasi saat diurai. Namun, nilai tersebut divalidasi saat dihitung. Artinya, nilai yang tidak valid tidak akan muncul sebagai tidak valid saat memeriksa properti elemen, dan menyertakan properti yang tidak valid setelah properti yang valid tidak akan kembali ke properti yang valid; namun, properti yang tidak valid akan kembali ke default properti yang terdaftar.

Menganimasikan properti kustom

Properti kustom terdaftar memberikan bonus yang menyenangkan selain pemeriksaan jenis: kemampuan untuk menganimasikannya. Contoh animasi dasar terlihat seperti ini:

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

Saat Anda mengarahkan kursor ke tombol, tombol akan berubah warna dari merah menjadi hijau. Tanpa mendaftarkan properti, properti akan melompat dari satu warna ke warna lain. Karena, tanpa didaftarkan, browser tidak tahu apa yang diharapkan antara satu nilai dan nilai berikutnya, sehingga tidak dapat menjamin kemampuan untuk mentransisikannya. Namun, contoh ini dapat dikembangkan lebih lanjut untuk menganimasikan gradien CSS. CSS berikut dapat ditulis dengan properti terdaftar yang sama:

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

Tindakan ini akan menganimasikan properti kustom kita yang merupakan bagian dari linear-gradient, sehingga menganimasikan gradien linear kita. Lihat Codepen di bawah untuk melihat kode lengkapnya dan mencobanya sendiri.

Kesimpulan

Houdini sedang dalam proses untuk hadir di browser, dan dengannya, cara yang sepenuhnya baru untuk menggunakan dan memperluas CSS. Dengan Paint API yang sudah dikirimkan dan sekarang Properti dan Nilai Kustom, toolbox kreatif kami berkembang, sehingga memungkinkan kami menentukan properti CSS yang diketik dan menggunakannya untuk membuat dan menganimasikan desain baru yang menarik. Masih banyak lagi yang akan hadir di antrean masalah Houdini, tempat Anda dapat memberikan masukan dan melihat apa yang akan hadir selanjutnya untuk Houdini. Houdini hadir untuk mengembangkan fitur yang menjelaskan "keajaiban" gaya dan tata letak di web, jadi manfaatkan fitur ajaib tersebut dengan baik.