Worklet paint lintas browser dan Houdini.how

Pengisian daya super cepat CSS Anda dengan pekerjaan cat Houdini hanya perlu beberapa klik.

Una Kravets

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

Houdini memungkinkan lebih banyak CSS semantik dengan Typed Object Model Anda. Developer dapat menentukan properti khusus CSS lanjutan dengan sintaks, nilai default, dan pewarisan melalui Properties and Values API.

Kursus ini juga memperkenalkan cat, tata letak, dan animasi worklet, yang membuka berbagai kemungkinan, dengan memudahkan penulis untuk terhubung ke dalam proses penataan gaya dan tata letak dari mesin rendering browser.

Memahami worklet Houdini

Worklet Houdini adalah instruksi browser yang berjalan dari 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 terdaftar ke aplikasi Anda, dan setelah terdaftar, 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 dari worklet (worklet Paint), dan memungkinkan developer menentukan fungsi pengecatan kustom seperti kanvas yang dapat digunakan langsung di CSS sebagai latar belakang, batas, {i>mask<i}, dan banyak lagi. Ada seluruh dunia kemungkinan bagaimana Anda bisa menggunakan CSS Paint di antarmuka pengguna Anda sendiri.

Misalnya, alih-alih menunggu browser menerapkan fitur batas bersudut, Anda bisa menulis worklet Paint Anda sendiri, atau menggunakan worklet yang sudah ada. Kemudian, alih-alih menggunakan radius batas, menerapkan worklet ini ke {i>border<i} dan {i>clipping<i}.

.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 terbaik yang didukung, spesifikasinya adalah W3C rekomendasi kandidat. Saat ini, Chrome diaktifkan di semua browser berbasis Chromium, sebagian didukung di Safari, dan sedang dipertimbangkan untuk Firefox.

Namun 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 serta menyediakan sumber daya dan pustaka worklet, tim saya membuat houdini.how.

Houdini.how

Houdini.how adalah library dan referensi untuk worklet dan resource Houdini. Ini menyediakan semua yang perlu Anda ketahui tentang CSS Houdini: dukungan browser, ringkasan berbagai API, penggunaan informasi, resource tambahan, dan worklet cat langsung contoh. Setiap sampel di Houdini.how didukung oleh CSS Paint API, yang berarti keduanya berfungsi pada semua {i>browser<i} modern. Jadi, berputarlah!

Menggunakan Houdini

Worklet Houdini harus dijalankan melalui server secara lokal, atau di HTTPS dalam produksi. Untuk bekerja dengan worklet Houdini, Anda harus menginstalnya secara lokal atau menggunakan jaringan (CDN) seperti unpkg untuk menayangkan file. Anda kemudian harus mendaftarkan worklet secara lokal.

Ada beberapa cara untuk menyertakan worklet menampilkan Houdini.how dalam project web Anda sendiri. Mereka dapat 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 memastikan kompatibel dengan lintas browser.

1. Pembuatan prototipe dengan CDN

Saat mendaftar dari unpkg, Anda dapat menautkan langsung ke file worklet.js tanpa harus mengonfigurasi menginstal worklet. Unpkg akan me-resolve ke worklet.js sebagai skrip utama, atau Anda dapat menentukannya diri Anda sendiri. Unpkg tidak akan menyebabkan masalah CORS, karena disalurkan melalui HTTPS.

CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");

Perhatikan bahwa hal ini tidak mendaftarkan properti kustom untuk sintaksis dan nilai penggantian. Sebaliknya, mereka masing-masing memiliki nilai fallback yang tertanam 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 cat. Untuk menginstal worklet, Anda harus membuat URL yang ditetapkan ke worklet.js paket, dan mendaftarkannya. Anda jadi dengan:

CSS.paintWorklet.addModule(..file-path/worklet.js)

Link dan nama paket npm dapat ditemukan di setiap kartu worklet.

Anda juga perlu menyertakan Polyfill CSS Paint melalui skrip atau mengimpornya secara langsung, seperti yang Anda lakukan dengan framework atau pemaket.

Berikut adalah contoh cara menggunakan Houdini dengan polyfill cat dalam 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 Anda bermain-main dengan beberapa sampel Houdini, sekarang giliran Anda untuk berkontribusi! Houdini.how tidak menghosting worklet apa pun, melainkan menampilkan karya komunitas. Jika Anda memiliki worklet atau referensi yang ingin dikirimkan, lihat github repo dengan panduan kontribusi. Kami ingin melihat ide Anda.