Worklet paint lintas browser dan Houdini.how

Meningkatkan performa CSS Anda dengan worklet paint Houdini hanya memerlukan beberapa klik.

Una Kravets

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 yang lebih semantik dengan Typed Object Model. Developer dapat menentukan properti kustom CSS lanjutan dengan sintaksis, nilai default, dan pewarisan melalui Properties and Values API.

Selain itu, API ini memperkenalkan worklet paint, tata letak, dan animasi, yang membuka berbagai kemungkinan, dengan mempermudah penulis untuk terhubung ke proses gaya 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 mengimpor dan mendaftar. Seperti service worker untuk gaya CSS, worklet Houdini didaftarkan ke aplikasi Anda, dan setelah didaftarkan dapat digunakan dalam CSS Anda berdasarkan nama.

Menulis file worklet Mendaftarkan modul worklet (CSS.paintWorklet.addModule(workletURL)) Menggunakan worklet (background: paint(confetti))

Menerapkan fitur Anda sendiri dengan CSS Painting API

CSS Painting API adalah contoh worklet semacam itu (worklet Paint), dan memungkinkan developer menentukan fungsi lukisan kustom seperti kanvas yang dapat digunakan langsung di CSS sebagai latar belakang, batas, mask, dan lainnya. Ada banyak kemungkinan cara Anda dapat 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 sudah dipublikasikan. Kemudian, daripada menggunakan border-radius, terapkan worklet ini ke batas dan kliping.

.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 merupakan salah satu Houdini API yang paling didukung, dengan spesifikasinya menjadi rekomendasi kandidat W3C. Saat ini diaktifkan di semua browser berbasis Chromium, didukung sebagian 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. Untuk menampilkan beberapa penerapan unik, serta menyediakan library worklet dan resource, tim saya membuat houdini.how.

Houdini.how

Houdini.how adalah library dan referensi untuk worklet dan resource Houdini. Dokumen ini menyediakan semua yang perlu Anda ketahui tentang CSS Houdini: dukungan browser, ringkasan berbagai API-nya, informasi penggunaan, referensi tambahan, dan contoh worklet paint langsung. Setiap contoh di Houdini.how didukung oleh CSS Paint API, yang berarti setiap contoh berfungsi di semua browser modern. Cobalah!

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 ini dapat digunakan melalui CDN untuk membuat prototipe, atau Anda dapat mengelola worklet sendiri menggunakan modul npm. Apa pun itu, Anda juga perlu menyertakan CSS Paint Polyfill untuk memastikan kompatibilitasnya di berbagai 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 di-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 hal ini tidak mendaftarkan properti kustom untuk sintaksis dan nilai penggantian. Sebagai gantinya, setiap nilai penggantian disematkan ke dalam worklet.

Untuk mendaftarkan properti kustom secara opsional, sertakan file properties.js juga.

<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 akan otomatis menyuntikkan worklet paint. Untuk menginstal worklet, Anda harus membuat URL yang di-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 paint 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. Houdini.how tidak menghosting worklet apa pun, tetapi menampilkan karya komunitas. Jika Anda memiliki worklet atau resource yang ingin dikirimkan, lihat repo github dengan pedoman kontribusi. Kami ingin segera melihat hasil kreasi Anda.