Properti kustom yang lebih cerdas dengan API baru Houdini

Transisi dan perlindungan data di CSS

Sam Richard

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

Apa itu Houdini?

Sebelum membahas API baru, mari kita bahas Houdini dengan cepat. CSS-TAG Houdini Task Force, yang lebih dikenal sebagai CSS Houdini atau hanya Houdini, ada untuk "mengembangkan fitur yang menjelaskan 'keajaiban' gaya visual dan tata letak di web". Kumpulan spesifikasi Houdini dirancang untuk membuka kemampuan 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 polyfilling atau menemukan CSS baru tanpa penurunan performa akhirnya dapat dilakukan. Houdini berpotensi meningkatkan kreativitas di web.

API Level 1 Properti dan Nilai CSS

CSS Properties and Values API Level 1 (Houdini Props dan 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, --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 Props dan Vals Houdini, properti kustom dapat didaftarkan sehingga browser mengetahui harus seperti apa.

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

Anatomi properti terdaftar

Pendaftaran 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 nilai yang mungkin di spesifikasi Unit dan Nilai CSS. Nilai defaultnya adalah *.

inherits: boolean

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

initialValue: string

Nilai awal properti kustom.

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

  • Menambahkan + menunjukkan bahwa parameter ini menerima daftar nilai sintaksis yang dipisahkan spasi. Misalnya, <length>+ akan berupa daftar panjang yang dipisahkan spasi
  • Menambahkan # menandakan bahwa kode tersebut menerima daftar nilai yang dipisahkan koma dari sintaksis tersebut. Misalnya, <color># akan berupa daftar warna yang dipisahkan koma
  • Menambahkan | di antara sintaksis atau ID menunjukkan 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 gotcha dengan Houdini Props dan Vals. Yang pertama adalah, setelah ditentukan, tidak ada cara untuk memperbarui properti terdaftar yang 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. Sebaliknya, 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 nilai yang valid. Namun, properti yang tidak valid akan kembali ke default properti yang terdaftar.

Menganimasikan properti kustom

Properti kustom terdaftar memberikan bonus yang menyenangkan di luar pemeriksaan jenis: kemampuan untuk menganimasinya. 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 tersebut akan beranimasi dari merah menjadi hijau. Tanpa mendaftarkan properti, properti akan berpindah dari satu warna ke warna lainnya. Karena, tanpa didaftarkan, browser tidak tahu apa yang akan terjadi antara satu nilai dan nilai berikutnya sehingga tidak dapat menjamin kemampuan untuk mentransisikan properti tersebut. Namun, contoh ini dapat ditingkatkan 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 mengalami animasi gradien linear. Lihat Glitch di bawah ini untuk melihat cara kerja kode lengkap dan mencobanya sendiri.

Kesimpulan

Houdini sedang dalam perjalanan ke browser, dan dengan itu, cara baru sepenuhnya untuk menggunakan dan memperluas CSS. Dengan Paint API yang telah dikirimkan dan sekarang Properti dan Nilai Kustom, kotak alat materi iklan kami diperluas, sehingga kami dapat menentukan properti CSS yang diketik dan menggunakannya untuk membuat serta menganimasikan desain baru dan menarik. Masih ada banyak lagi yang akan hadir di antrean masalah Houdini tempat Anda dapat memberikan masukan dan melihat apa yang akan terjadi selanjutnya untuk Houdini. Houdini ada untuk mengembangkan fitur yang menjelaskan "keajaiban" gaya visual dan tata letak di web, jadi gunakan fitur ajaib tersebut dengan sebaik-baiknya.

Foto oleh Maik Jonietz di Unsplash