Anda dapat meningkatkan performa CSS dengan worklet cat Houdini hanya dengan beberapa klik.
Houdini CSS adalah istilah umum yang menjelaskan serangkaian API browser tingkat rendah yang memberi developer lebih banyak kontrol dan kemampuan atas gaya yang mereka tulis.
Houdini memungkinkan CSS semantik yang lebih banyak dengan Model Objek Berjenis. Developer dapat menentukan properti khusus CSS lanjutan dengan sintaksis, nilai default, dan pewarisan melalui Properties and Values API.
Versi ini juga memperkenalkan worklet proses gambar, tata letak, dan animasi, yang membuka berbagai kemungkinan, dengan mempermudah penulis untuk terhubung ke proses gaya visual dan tata letak mesin rendering browser.
Memahami worklet Houdini
Worklet Houdini adalah petunjuk browser yang berjalan di luar thread utama dan dapat dipanggil saat diperlukan. Worklet memungkinkan Anda menulis CSS modular untuk menyelesaikan tugas tertentu, dan memerlukan satu baris JavaScript untuk diimpor dan didaftarkan. Sama seperti pekerja layanan untuk gaya CSS, worklet Houdini didaftarkan ke aplikasi Anda, dan setelah terdaftar dapat digunakan di CSS menurut namanya.
Menulis file worklet Mendaftarkan modul worklet (CSS.paintWorklet.addModule(workletURL)
) Menggunakan worklet
(background: paint(confetti)
)
Mengimplementasikan fitur Anda sendiri dengan CSS Painting API
CSS Painting API adalah contoh worklet tersebut (worklet Paint), dan memungkinkan developer menentukan fungsi gambar kustom seperti kanvas yang dapat digunakan langsung di CSS sebagai latar belakang, batas, masker, dan lainnya. Ada banyak kemungkinan cara menggunakan CSS Paint di antarmuka pengguna Anda sendiri.
Misalnya, daripada menunggu browser menerapkan fitur batas miring, Anda dapat menulis worklet Paint Anda sendiri, atau menggunakan worklet yang dipublikasikan. Kemudian, daripada menggunakan border-radius, terapkan worklet ini ke batas dan pemangkasan.
.angled {
--corner-radius: 15 0 0 0;
--paint-color: #6200ee;
--stroke-weight: 0;
/* Mask every angled button with fill mode */
-webkit-mask: paint(angled-corners, filled);
}
.outline {
--stroke-weight: 1;
/* Paint outline */
border-image: paint(angled-corners, outlined) 0 fill !important;
}
CSS Painting API saat ini adalah salah satu Houdini API yang paling didukung, spesifikasinya adalah rekomendasi kandidat W3C. Fitur ini saat ini diaktifkan di semua browser berbasis Chromium, sebagian didukung di Safari, dan sedang dipertimbangkan untuk Firefox.
Namun, meskipun tanpa dukungan browser penuh, Anda tetap dapat berkreasi dengan Houdini Paint API dan melihat gaya Anda berfungsi di semua browser modern dengan CSS Paint Polyfill. Selain itu, untuk menampilkan beberapa implementasi unik, serta menyediakan library resource dan worklet, tim saya membuat houdini.how.
Houdini.how
Houdini.how adalah library dan referensi untuk resource dan worklet Houdini. Panduan ini menyediakan semua yang perlu Anda ketahui tentang CSS Houdini: dukungan browser, ringkasan berbagai API-nya, informasi penggunaan, referensi tambahan, dan contoh worklet live paint. Setiap contoh di Houdini.how didukung oleh CSS Paint API, yang berarti setiap contoh berfungsi di semua browser modern. Coba fitur ini.
Menggunakan Houdini
Worklet Houdini harus dijalankan melalui server secara lokal, atau di HTTPS dalam produksi. Untuk menggunakan worklet Houdini, Anda harus menginstalnya secara lokal atau menggunakan jaringan penayangan konten (CDN) seperti unpkg untuk menayangkan file. Kemudian, Anda harus mendaftarkan worklet secara lokal.
Ada beberapa cara untuk menyertakan worklet showcase Houdini.how dalam project web Anda sendiri. Worklet dapat digunakan melalui CDN dalam kapasitas pembuatan prototipe, atau Anda dapat mengelola worklet sendiri menggunakan modul npm. Apa pun itu, sebaiknya Anda juga menyertakan CSS Paint Polyfill untuk memastikannya kompatibel lintas browser.
1. Membuat prototipe dengan CDN
Saat mendaftar dari unpkg, Anda dapat menautkan langsung ke file worklet.js tanpa perlu menginstal worklet secara lokal. Unpkg akan me-resolve ke worklet.js sebagai skrip utama, atau Anda dapat menentukannya sendiri. Unpkg tidak akan menyebabkan masalah CORS, karena ditayangkan melalui HTTPS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Perhatikan bahwa tindakan ini tidak mendaftarkan properti kustom untuk sintaksis dan nilai penggantian. Sebagai gantinya, masing-masing memiliki nilai penggantian yang disematkan ke dalam worklet.
Untuk mendaftarkan properti kustom secara opsional, sertakan juga file properties.js.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
Untuk menyertakan CSS Paint Polyfill dengan unpkg:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Mengelola worklet melalui NPM
Instal worklet Anda dari npm:
npm install <package-name>
npm install css-paint-polyfill
Mengimpor paket ini tidak otomatis memasukkan worklet cat. Untuk menginstal worklet, Anda harus membuat URL yang me-resolve ke worklet.js paket, dan mendaftarkannya. Anda melakukannya dengan:
CSS.paintWorklet.addModule(..file-path/worklet.js)
Nama dan link paket npm dapat ditemukan di setiap kartu worklet.
Anda juga harus menyertakan CSS Paint Polyfill melalui skrip atau mengimpornya secara langsung, seperti yang Anda lakukan dengan framework atau bundler.
Berikut adalah contoh cara menggunakan Houdini dengan polyfill cat di bundler modern:
import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';
CSS.paintWorklet.addModule(workletURL);
Kontribusi
Setelah Anda mencoba beberapa contoh Houdini, sekarang giliran Anda untuk berkontribusi dengan karya Anda sendiri. Houdini.how tidak menghosting worklet apa pun, tetapi menampilkan karya komunitas. Jika Anda memiliki worklet atau referensi yang ingin dikirimkan, lihat repo github dengan panduan kontribusi. Kami ingin segera melihat kreasi Anda.