Tăng cường hiệu quả của CSS bằng các công cụ sơn Houdini chỉ bằng vài cú nhấp chuột.
CSS Houdini là một thuật ngữ bao quát mô tả một loạt API trình duyệt cấp thấp mang lại cho nhà phát triển nhiều quyền kiểm soát hơn và các kiểu mà các em viết.
Houdini cho phép CSS có ngữ nghĩa hơn bằng Đối tượng được nhập Kiểu máy. Nhà phát triển có thể xác định thuộc tính tuỳ chỉnh CSS nâng cao bằng cú pháp, giá trị mặc định và tính kế thừa thông qua Thuộc tính và API giá trị.
API này cũng giới thiệu tính năng vẽ, bố cục và ảnh động worklet, mở ra một vô vàn khả năng, bằng cách giúp tác giả dễ dàng hơn trong quá trình tạo kiểu và bố cục của công cụ kết xuất hình ảnh của trình duyệt.
Tìm hiểu về Worklet Houdini
Worklet Houdini là các lệnh của trình duyệt chạy ngoài luồng chính và có thể được gọi khi cần thiết. Worklet cho phép bạn viết CSS mô-đun để hoàn thành các tác vụ cụ thể và yêu cầu một CSS duy nhất dòng JavaScript để nhập và đăng ký. Giống như trình chạy dịch vụ cho kiểu CSS, worklet Houdini được đăng ký trong ứng dụng của bạn và sau khi đăng ký, bạn có thể sử dụng CSS theo tên.
Viết tệp worklet Đăng ký mô-đun worklet (CSS.paintWorklet.addModule(workletURL)) Sử dụng worklet
(background: paint(confetti))
Triển khai các tính năng của riêng bạn bằng CSS Painting API
CSS Painting API là một ví dụ cho worklet (worklet Paint) và cho phép nhà phát triển xác định chức năng vẽ tuỳ chỉnh giống như canvas có thể được sử dụng trực tiếp trong CSS làm nền, đường viền, mặt nạ và hơn thế nữa. Có cả thế giới khả năng về cách bạn có thể sử dụng CSS Paint trong giao diện người dùng của riêng bạn.
Ví dụ: thay vì đợi trình duyệt triển khai tính năng đường viền góc, bạn có thể viết worklet sơn của riêng bạn hoặc sử dụng worklet xuất bản hiện có. Sau đó, thay vì sử dụng landscape-radius áp dụng worklet này cho đường viền và đoạn cắt.
.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 hiện là một trong những API Houdini được hỗ trợ tốt nhất, thông số của API này là W3C đề xuất ứng cử viên. Tính năng này hiện được bật trên tất cả các trình duyệt dựa trên Chromium, một phần được hỗ trợ trong Safari và đang được xem xét cho Firefox.
Nhưng ngay cả khi không hỗ trợ trình duyệt đầy đủ, bạn vẫn có thể sáng tạo với Houdini Paint API và xem kiểu của bạn hoạt động trên tất cả các trình duyệt hiện đại bằng CSS Paint Polyfill. Ngoài ra, để giới thiệu một vài triển khai mới, cũng như cung cấp tài nguyên và thư viện worklet, nhóm của tôi đã xây dựng houdini.how.
Houdini.how
Houdini.how là một thư viện và tài nguyên tham khảo cho các chương trình làm việc và tài nguyên của Houdini. Nó cung cấp mọi thông tin bạn cần biết về CSS Houdini: hỗ trợ về trình duyệt, Overview (tổng quan) về các API, cách sử dụng thông tin, tài nguyên bổ sung và worklet vẽ trực tiếp mẫu. Mỗi mẫu trên Houdini.how đều được CSS Paint API hỗ trợ, nghĩa là đều hoạt động trên tất cả các trình duyệt hiện đại. Hãy thử xem!
Sử dụng Houdini
Worklet Houdini phải chạy qua máy chủ cục bộ hoặc trên HTTPS trong phiên bản chính thức. Để tương thích với worklet Houdini, bạn sẽ cần cài đặt cục bộ hoặc dùng công cụ phân phối nội dung mạng (CDN) như unpkg để phân phát tệp. Sau đó, bạn sẽ cần đăng ký cục bộ worklet.
Có một số cách để đưa các Worklet giới thiệu Houdini.how vào dự án web của riêng bạn. Chúng có thể được sử dụng thông qua CDN ở giai đoạn chạy thử hoặc bạn có thể tự quản lý worklet npm. Dù bằng cách nào, bạn cũng nên thêm CSS Paint Polyfill để đảm bảo chúng tương thích trên nhiều trình duyệt.
1. Tạo nguyên mẫu bằng CDN
Khi đăng ký từ unpkg, bạn có thể liên kết trực tiếp đến tệp worklet.js mà không cần phải cục bộ cài đặt worklet. Unpkg sẽ phân giải thành tập lệnh worklet.js dưới dạng tập lệnh chính, hoặc bạn có thể chỉ định tập lệnh đó chính bạn. Unpkg sẽ không gây ra vấn đề CORS vì nó được phân phát qua HTTPS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Xin lưu ý rằng thao tác này không đăng ký các thuộc tính tuỳ chỉnh cho cú pháp và các giá trị dự phòng. Thay vào đó, mỗi thuộc tính đều có giá trị dự phòng được nhúng vào worklet.
Để đăng ký thuộc tính tuỳ chỉnh (không bắt buộc), bạn cũng nên bao gồm tệp thuộc tính.js.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
Cách thêm CSS Paint Polyfill với unpkg:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Quản lý worklet qua kháng nghị thư
Cài đặt worklet từ npm:
npm install <package-name>
npm install css-paint-polyfill
Việc nhập gói này sẽ không tự động chèn worklet sơn. Để cài đặt worklet, bạn sẽ cần tạo một URL phân giải thành worklet.js của gói và đăng ký URL đó. Bạn có thể vậy bằng:
CSS.paintWorklet.addModule(..file-path/worklet.js)
Bạn có thể tìm thấy đường liên kết và tên gói npm trên mỗi thẻ worklet.
Bạn cũng sẽ cần phải bao gồm CSS Paint Polyfill thông qua tập lệnh hoặc nhập trực tiếp, như bạn thường làm thông qua một khung hoặc bộ gói.
Dưới đây là ví dụ về cách sử dụng Houdini với polyfill sơn trong các bộ gói hiện đại:
import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';
CSS.paintWorklet.addModule(workletURL);
Đóng góp
Giờ bạn đã thử các mẫu Houdini, đã đến lượt bạn đóng góp mẫu của riêng mình! Houdini.how không lưu trữ bất kỳ worklet nào mà thay vào đó, giới thiệu hoạt động của cộng đồng. Nếu bạn có một worklet hoặc tài nguyên muốn gửi, hãy xem github kho lưu trữ có nguyên tắc đóng góp. Chúng tôi rất muốn xem ý tưởng của bạn!