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 Anda. Meskipun sangat berguna saat ini, properti tersebut memiliki kekurangan yang dapat membuatnya sulit digunakan: properti tersebut dapat mengambil nilai apa pun sehingga dapat secara tidak sengaja diganti dengan sesuatu yang tidak terduga, properti tersebut selalu mewarisi nilainya dari induknya, dan Anda tidak dapat melakukan transisi pada properti tersebut. 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 canggih.

Apa Itu Houdini?

Sebelum membahas API baru, mari kita bahas Houdini secara singkat. Gugus Tugas CSS-TAG Houdini, yang lebih dikenal sebagai CSS Houdini atau Houdini saja, ada untuk "mengembangkan fitur yang menjelaskan 'keajaiban' gaya dan tata letak di web". Kumpulan spesifikasi Houdini dirancang untuk membuka kemampuan mesin rendering browser, sehingga memberikan insight yang lebih mendalam tentang gaya kami dan kemampuan untuk memperluas mesin rendering kami. Dengan demikian, nilai CSS yang diketik di JavaScript dan polyfill atau penemuan CSS baru tanpa memengaruhi performa akhirnya dapat dilakukan. Houdini berpotensi meningkatkan 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 situasi saat ini saat menggunakan properti khusus:

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

Karena tidak memiliki jenis, properti kustom 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, --my-color tidak tahu bahwa URL bukan nilai warna yang valid. Saat kita menggunakannya, nilai akan kembali ke nilai default (hitam untuk color, transparan untuk background). Dengan Houdini Props and Vals, properti kustom dapat didaftarkan sehingga browser tahu apa yang seharusnya!

Sekarang, properti kustom --my-color terdaftar sebagai warna. Hal ini memberi tahu browser jenis nilai yang diizinkan dan cara mengetik serta 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 mewarisi nilai induknya. Default-nya adalah true.

initialValue: string

Nilai awal properti kustom.

Melihat lebih dekat syntax. 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 parameter tersebut menerima daftar nilai yang dipisahkan spasi dengan sintaksis tersebut. Misalnya, <length>+ akan berupa daftar panjang yang dipisahkan spasi
  • Menambahkan# menandakan bahwa parameter tersebut menerima daftar nilai yang dipisahkan koma dengan sintaksis tersebut. Misalnya, <color># akan berupa daftar warna yang dipisahkan koma
  • Menambahkan | di antara sintaksis atau ID menandakan bahwa salah satu opsi yang diberikan valid. Misalnya, <color># | <url> | magic akan mengizinkan daftar warna yang dipisahkan koma, URL, atau kata magic.

Gotcha

Ada dua hal yang perlu diperhatikan terkait Properti dan Nilai Houdini. Yang pertama adalah, setelah ditentukan, tidak ada cara untuk memperbarui properti terdaftar yang ada, dan mencoba mendaftarkan ulang properti akan memunculkan error yang menunjukkan bahwa properti tersebut telah ditentukan.

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

Menganimasikan properti kustom

Properti kustom terdaftar memberikan bonus menarik di luar 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 beranimasi dari merah ke hijau. Tanpa mendaftarkan properti, properti akan berpindah dari satu warna ke warna lain karena, tanpa didaftarkan, browser tidak tahu apa yang harus diharapkan antara satu nilai dan nilai berikutnya, sehingga tidak dapat menjamin kemampuan untuk melakukan transisi. 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 yang merupakan bagian dari linear-gradient, sehingga menganimasikan gradien linear. Lihat Codepen di bawah untuk melihat kode lengkapnya beroperasi dan bereksperimen sendiri.

Kesimpulan

Houdini sedang dalam perjalanan menuju browser, dan dengan Houdini, akan ada cara kerja yang benar-benar baru untuk menggunakan dan memperluas CSS. Dengan Paint API yang sudah diluncurkan dan kini Custom Props and Vals, toolbox kreatif kami semakin berkembang, sehingga kami dapat menentukan properti CSS yang diketik dan menggunakannya untuk membuat serta menganimasikan desain baru yang menarik. Ada banyak hal lainnya yang akan datang, juga, dalam antrean masalah Houdini tempat Anda dapat memberikan masukan dan melihat apa yang akan dilakukan Houdini selanjutnya. Houdini hadir untuk mengembangkan fitur yang menjelaskan "keajaiban" gaya dan tata letak di web, jadi gunakan fitur ajaib tersebut dengan baik.

Foto oleh Maik Jonietz di Unsplash