Properti kustom yang lebih cerdas dengan API baru Houdini

Transisi dan perlindungan data di CSS

Sam Richard

Properti khusus CSS, yang disebut juga variabel CSS, memungkinkan Anda menentukan properti sendiri di CSS dan menggunakan nilainya di seluruh CSS. Meskipun sangat berguna saat ini, model ini memiliki kekurangan yang dapat menyulitkan mereka untuk menanganinya: nilai apa pun dapat diambil secara tidak sengaja sehingga mungkin secara tidak sengaja diganti dengan sesuatu yang tidak terduga. Nilai-nilai tersebut selalu mewarisi nilai-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 ditambahkan, sehingga membuat 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 sekadar Houdini, hadir untuk "mengembangkan fitur yang menjelaskan 'keajaiban' gaya visual dan tata letak di web". Kumpulan spesifikasi Houdini dirancang untuk membuka kekuatan mesin rendering browser, sehingga memungkinkan wawasan lebih dalam tentang gaya kami dan kemampuan untuk memperluas mesin rendering kami. Dengan begitu, nilai CSS yang diketik di JavaScript dan polyfill atau membuat CSS baru tanpa hit performa akhirnya dapat dilakukan. Houdini memiliki potensi untuk meningkatkan kreativitas di web.

Properti dan Nilai CSS API Level 1

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

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

Karena properti khusus 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, maka URL tidak mengetahui bahwa URL bukan nilai warna yang valid. Saat digunakan, properti tersebut akan kembali ke nilai default (hitam untuk color, transparan untuk background). Dengan Houdini Props dan Vals, properti kustom dapat didaftarkan sehingga browser tahu apa seharusnya.

Sekarang, properti khusus --my-color didaftarkan sebagai warna. Hal ini memberi tahu browser jenis nilai apa yang diizinkan dan bagaimana browser dapat 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 di spesifikasi Nilai dan Unit CSS. Nilai defaultnya adalah *.

inherits: boolean

Apakah turunan tersebut mewarisi nilai induknya. Default-nya adalah true.

initialValue: string

Nilai awal properti kustom.

Lihat syntax lebih dekat. Ada sejumlah opsi yang valid, mulai dari angka, warna, hingga jenis <custom-ident>. {i>Syntax<i} ini juga dapat dimodifikasi dengan menggunakan nilai-nilai berikut

• Menambahkan + menandakan bahwa metode tersebut menerima daftar nilai yang dipisahkan spasi dari sintaksis tersebut. Misalnya, <length>+ akan berupa daftar panjang yang dipisahkan spasi
• Menambahkan # menandakan bahwa metode tersebut menerima daftar nilai yang dipisahkan koma dari sintaksis tersebut. Misalnya, <color># akan menjadi daftar warna yang dipisahkan dengan 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 getcha dengan Houdini Props dan Vals. Yang pertama adalah, setelah ditentukan, tidak ada cara untuk memperbarui properti terdaftar yang sudah ada, dan mencoba mendaftarkan ulang properti akan menampilkan error yang menunjukkan bahwa properti tersebut sudah ditentukan.

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

Menganimasikan properti kustom

Properti kustom yang terdaftar memberikan bonus menarik 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 beranimasi dari merah menjadi hijau! Tanpa mendaftarkan properti, properti akan melompat dari satu warna ke warna lainnya. 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 diambil selangkah lebih jauh 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 Glitch di bawah ini untuk melihat cara kerja kode lengkap dan bermain-main dengannya sendiri.

Kesimpulan

Houdini akan segera membuka browser, dan dengannya, cara yang benar-benar baru untuk bekerja dengan dan memperluas CSS. Dengan Paint API yang sudah dikirimkan dan kini Custom Props and Vals, toolbox kreatif kami berkembang, sehingga kami dapat menentukan properti CSS yang diketik dan menggunakannya untuk membuat serta menganimasikan desain baru dan menarik. Selain itu, masih banyak lagi yang akan ditawarkan, di antrean masalah Houdini tempat Anda dapat memberikan masukan dan melihat apa yang akan terjadi selanjutnya untuk Houdini. Houdini hadir untuk mengembangkan fitur yang menjelaskan "keajaiban" gaya dan tata letak di web. Jadi, keluarlah dan gunakan fitur-fitur ajaib tersebut dengan baik.

Foto oleh Maik Jonietz di Unsplash