Worklet paint lintas browser dan Houdini.how

Meningkatkan CSS Anda dengan worklet cat Houdini hanya dengan beberapa klik.

Una Kravets

Houdini CSS adalah istilah umum yang menjelaskan serangkaian API browser tingkat rendah yang memberi developer lebih banyak kontrol dan kendali atas gaya yang mereka tulis.

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

Bagian ini juga memperkenalkan worklet paint, tata letak, dan animasi, yang membuka banyak kemungkinan, dengan memudahkan penulis tertarik dengan proses penataan gaya dan tata letak mesin rendering browser.

Memahami {i>worklet<i} Houdini

Worklet Houdini adalah petunjuk browser yang menjalankan thread utama dan dapat dipanggil jika 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 didaftarkan dapat digunakan di CSS menurut nama.

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

Mengimplementasikan fitur Anda sendiri dengan CSS Painting API

CSS Painting API adalah contoh worklet (worklet Paint) semacam itu, dan memungkinkan developer menentukan fungsi melukis kustom seperti kanvas yang dapat digunakan langsung di CSS sebagai latar belakang, batas, mask, dan lainnya. CSS Paint dapat digunakan di berbagai antarmuka pengguna Anda.

Misalnya, daripada menunggu browser menerapkan fitur batas miring, Anda dapat menulis worklet Paint Anda sendiri, atau menggunakan worklet yang sudah dipublikasikan. Kemudian, daripada menggunakan radius batas, 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 adalah salah satu Houdini API yang didukung terbaik, dan spesifikasinya adalah rekomendasi kandidat W3C. Saat ini fitur ini diaktifkan di semua browser berbasis Chromium, didukung sebagian di Safari, dan sedang dipertimbangkan untuk Firefox.

Namun, bahkan tanpa dukungan browser penuh, Anda masih bisa berkreasi dengan Houdini Paint API dan melihat gaya Anda berfungsi di semua browser modern dengan CSS Paint Polyfill. Dan untuk menampilkan beberapa implementasi unik, serta untuk menyediakan library resource dan worklet, tim saya membuat houdini.how.

Houdini.how

Houdini.how adalah library dan referensi untuk worklet dan resource Houdini. Panduan ini menyediakan semua hal yang perlu Anda ketahui tentang CSS Houdini: dukungan browser, ringkasan berbagai API-nya, informasi penggunaan, resource tambahan, dan contoh worklet live paint. Setiap contoh di Houdini.how didukung oleh CSS Paint API, yang berarti masing-masing contoh tersebut dapat berfungsi di semua browser modern. Jadi, berputarlah!

Menggunakan Houdini

Worklet Houdini harus dijalankan melalui server secara lokal, atau di HTTPS dalam produksi. Agar dapat menggunakan worklet Houdini, Anda harus menginstalnya secara lokal atau menggunakan jaringan penayangan konten (CDN) seperti unpkg untuk menyajikan file. Kemudian, Anda harus mendaftarkan worklet secara lokal.

Ada beberapa cara untuk menyertakan Houdini.how menampilkan worklet di project web Anda sendiri. Anda dapat menggunakannya 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 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 ditetapkan ke worklet.js sebagai skrip utama, atau Anda dapat menentukannya sendiri. Unpkg tidak akan menyebabkan masalah CORS, karena disalurkan 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 fallback 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 secara otomatis memasukkan 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 tautan 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 pemaket.

Berikut adalah contoh cara menggunakan Houdini dengan polyfill paint di pemaket 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 mencoba beberapa contoh Houdini, sekarang giliran Anda untuk memberikan kontribusi sendiri. Houdini.how tidak menghosting worklet itu sendiri, melainkan menampilkan karya komunitas. Jika Anda memiliki worklet atau resource yang ingin dikirimkan, lihat repo github dengan panduan kontribusi. Kami ingin mengetahui pendapat Anda.