Properti kustom yang lebih cerdas dengan API baru Houdini

Transisi dan perlindungan data di CSS

Sam Richard

Properti khusus CSS, yang juga dikenal sebagai CSS variabel, memungkinkan Anda mendefinisikan properti Anda sendiri di CSS dan menggunakan nilainya di seluruh di CSS. Meskipun sangat berguna saat ini, mereka memiliki kekurangan yang dapat membuat mereka sulit digunakan: mereka dapat mengambil nilai berapa pun sehingga mungkin secara tidak sengaja diganti dengan sesuatu yang tidak terduga, mereka selalu mewarisi nilai mereka dari orang tua mereka, dan Anda tidak dapat mentransisikan mereka. Dengan Properti CSS dan Houdini Nilai API Level 1, kini tersedia di Chrome 78, kekurangan ini juga berguna, sehingga CSS dan properti kustom sangat bermanfaat.

Apa itu Houdini?

Sebelum membahas API baru, mari kita bahas Houdini secara singkat. CSS-TAG Houdini Task Force, lebih dikenal sebagai CSS Houdini atau sederhananya Houdini, hadir untuk "mengembangkan fitur yang menjelaskan 'keajaiban' gaya dan tata letak di web". Kumpulan spesifikasi Houdini dirancang untuk membuka kekuatan mesin render browser, memungkinkan wawasan yang lebih mendalam mengenai gaya kami dan kemampuan untuk memperluas mesin rendering kami. Dengan demikian, Anda dapat mengetik nilai CSS dalam JavaScript dan membuat polyfill atau membuat CSS baru tanpa adanya hit performa akhirnya bisa dilakukan. Houdini berpotensi untuk mendukung kreativitas di web.

Properti CSS dan Nilai API Level 1

Properti CSS dan Values API Level 1 (Props Houdini dan Vals) memungkinkan kita memberikan struktur pada properti kustom. Ini adalah situasi saat menggunakan properti khusus:

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

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

Sekarang, properti khusus --my-color terdaftar sebagai warna. Fungsi ini memberi tahu jenis nilai apa yang diizinkan dan bagaimana nilai tersebut dapat mengetik dan memperlakukannya properti baru.

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 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 skor yang valid opsi mulai dari angka hingga warna hingga <custom-ident> jenis datanya. Sintaks ini juga dapat dimodifikasi menggunakan nilai-nilai berikut

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

Gotchas

Ada dua gotcha dengan Houdini Props dan Vals. Yang pertama adalah, setelah tidak ada cara untuk memperbarui properti terdaftar yang sudah ada, dan mencoba mendaftarkan ulang properti akan memunculkan {i>error<i} yang menunjukkan bahwa properti sudah didefinisikan.

Kedua, tidak seperti properti standar, properti yang terdaftar tidak divalidasi ketika mereka akan diuraikan. Sebaliknya, divalidasi saat dihitung. Artinya, baik bahwa nilai-nilai yang tidak valid tidak akan tampak sebagai tidak valid saat memeriksa atribut properti, dan menyertakan properti yang tidak valid setelah properti yang valid tidak akan hilang ke yang valid; properti yang tidak valid akan dikembalikan ke pada default properti.

Menganimasikan properti kustom

Properti khusus yang terdaftar memberikan bonus menarik yang lebih dari sekadar 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 tersebut, tombol tersebut akan bergerak dari merah ke hijau! Tanpa mendaftarkan properti, itu akan melompat dari satu warna ke warna lainnya. Karena, tanpa terdaftar, browser tidak tahu apa yang akan terjadi di antara satu berikutnya, sehingga tidak dapat menjamin kemampuan untuk mentransisikannya. Namun, contoh ini dapat diambil selangkah lebih maju untuk menganimasikan gradien CSS. Tujuan 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;
}

Ini akan menganimasikan properti kustom kita yang merupakan bagian dari linear-gradient, sehingga menganimasikan gradien linier kita. Lihat Glitch di bawah untuk melihat kode lengkapnya beraksi dan bermain-main dengannya sendiri.

Kesimpulan

Houdini sedang dalam proses ke browser, dan bersamanya, cara yang benar-benar baru untuk bekerja dengan dan memperluas CSS. Dengan Cat API sudah dikirimkan dan kini Custom Props and Vals, kotak peralatan kreatif kami semakin berkembang, yang memungkinkan kami untuk mendefinisikan properti CSS yang diketik dan menggunakannya untuk membuat dan menganimasikan baru dan menarik desain. Masih ada banyak hal lain yang akan dibahas dalam masalah Houdini antrean tempat Anda dapat memberi masukan dan melihat apa yang akan dilakukan Houdini selanjutnya. Houdini dibuat untuk mengembangkan fitur yang menjelaskan "keajaiban" {i>style<i} dan {i>layout<i} di web, jadi keluarlah dan menggunakan fitur-fitur ajaib tersebut dengan baik.

Foto oleh Maik Jonietz nyala Buka Pembukaan