Worklet paint lintas browser dan Houdini.how

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.

Lapisan Houdini

Houdini memungkinkan CSS semantik yang lebih banyak dengan Model Objek Berjenis. Developer dapat menentukan properti kustom CSS lanjutan dengan sintaksis, nilai default, dan pewarisan melalui Properties and Values API.

Versi ini juga memperkenalkan worklet proses menggambar, tata letak, dan animasi, yang membuka berbagai kemungkinan, dengan memudahkan 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. Dengan Worklet, Anda dapat 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 semacam itu (worklet Paint), dan memungkinkan developer menentukan fungsi melukis kustom seperti kanvas yang dapat digunakan langsung di CSS sebagai latar belakang, batas, mask, 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 yang ada. Kemudian, daripada menggunakan border-radius, terapkan worklet ini ke batas dan pemangkasan.

Contoh di atas menggunakan worklet cat yang sama dengan argumen yang berbeda (lihat kode di bawah) untuk mencapai hasil ini. Demo tentang Glitch.
.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 API Houdini 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.

Dukungan Caniuse
CSS Painting API saat ini didukung di browser berbasis Chromium.

Namun, meskipun tanpa dukungan browser penuh, Anda masih 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

Screenshot halaman Worklet.
Screenshot dari halaman beranda Houdini.how.

Houdini.how adalah library dan referensi untuk worklet dan resource 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. Selanjutnya, 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, Anda juga perlu menyertakan CSS Paint Polyfill untuk memastikannya kompatibel dengan 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)

Link dan nama 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.