Bạn có thể tăng hiệu quả cho CSS của mình bằng 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 các 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ó nhiều quyền kiểm soát hơn đối với các kiểu chữ mà họ viết.
Houdini hỗ trợ nhiều CSS hơn về ngữ nghĩa bằng Mô hình đối tượng được nhập. Nhà phát triển có thể xác định các thuộc tính tuỳ chỉnh nâng cao của CSS bằng cú pháp, giá trị mặc định và tính kế thừa thông qua API Thuộc tính và giá trị.
Ngoài ra, tính năng này còn ra mắt công việc vẽ, bố cục và ảnh động, mở ra vô số khả năng bằng cách giúp tác giả dễ dàng khai thác quy 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 cho trình duyệt chạy ngoài luồng chính và có thể được gọi khi cần. Worklet cho phép bạn viết CSS mô-đun để hoàn thành các nhiệm vụ cụ thể và yêu cầu một dòng JavaScript duy nhất để nhập và đăng ký. Tương tự như trình chạy dịch vụ cho kiểu CSS, các worklet Houdini được đăng ký cho ứng dụng của bạn và có thể dùng tên đã đăng ký trong CSS của bạn.
Ghi 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 Painter API
CSS Canvas API là một ví dụ về một worklet như vậy (công việc Paint) và cho phép nhà phát triển xác định các chức năng vẽ tuỳ chỉnh giống như canvas có thể sử dụng trực tiếp trong CSS dưới dạng nền, đường viền, mặt nạ, v.v. Có rất nhiều cách để bạn sử dụng CSS Paint trong giao diện người dùng của riêng mình.
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 trình làm việc Paint của riêng mình hoặc sử dụng một worklet đã xuất bản hiện có. Sau đó, thay vì sử dụng bán kính đường viền, hãy áp dụng công việc này cho đường viền và 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 Painter API hiện là một trong những API Houdini được hỗ trợ tốt nhất. Thông số kỹ thuật của API này là đề xuất đề xuất của W3C. 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, được hỗ trợ một phần 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ể thoả sức sáng tạo với Houdini Paint API và xem các kiểu của mình hoạt động trên tất cả các trình duyệt hiện đại nhờ CSS Paint Polyfill. Để giới thiệu một số cách triển khai độc đáo cũng như để cung cấp thư viện tài nguyên và 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 liệu tham khảo cho các công việc và tài nguyên Houdini. Tài liệu này cung cấp mọi thông tin bạn cần phải biết về CSS Houdini: khả năng hỗ trợ trình duyệt, thông tin tổng quan về nhiều API, thông tin sử dụng, tài nguyên bổ sung và mẫu trong worklet. Mỗi mẫu trên Houdini.how đều được CSS Paint API hỗ trợ, nghĩa là mỗi mẫu đều hoạt động trên tất cả các trình duyệt hiện đại. Hãy thử xem nào!
Sử dụng Houdini
Worklet Houdini phải chạy qua máy chủ cục bộ hoặc trên HTTPS khi phát hành chính thức. Để làm việc với một worklet Houdini, bạn cần cài đặt công việc đó trên máy hoặc sử dụng một mạng phân phối nội dung (CDN) như unpkg để phân phát các tệp. Sau đó, bạn sẽ cần đăng ký worklet trên máy.
Bạn có một số cách để đưa tập thể dục giới thiệu Houdini.how vào các dự án web của riêng mình. Bạn có thể sử dụng các công cụ này thông qua CDN ở khả năng tạo nguyên mẫu hoặc bạn có thể tự quản lý các worklet bằng cách sử dụng các mô-đun 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 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 cài đặt worklet trên máy. 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ể tự chỉ định tập lệnh đó. Việc huỷ pkg sẽ không gây ra sự cố CORS vì sự cố này đượ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à giá trị dự phòng. Thay vào đó, mỗi phương thức đều có các giá trị dự phòng được nhúng vào worklet.
Để đăng ký các thuộc tính tuỳ chỉnh (không bắt buộc), bạn cũng cần bao gồm cả tệp thuộc tính.js.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
Cách thêm CSS Paint Polyfill có unpkg:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Quản lý worklet qua CN
Cài đặt worklet từ npm:
npm install <package-name>
npm install css-paint-polyfill
Việc nhập gói này không tự động chèn tập lệnh sơn. Để cài đặt worklet, bạn cần tạo một URL phân giải đến worklet.js của gói và đăng ký URL đó. Bạn có thể thực hiện việc nà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 thêm CSS Paint Polyfill thông qua tập lệnh hoặc nhập trực tiếp, như cách bạn thực hiện với khung hoặc trình đóng gói.
Dưới đây là ví dụ về cách sử dụng Houdini với lớp phủ sơn trong các trình đóng 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
Sau khi thử một số mẫu Houdini, đến lượt bạn đóng góp mẫu của riêng mình! Houdini.how không tự lưu trữ tác phẩm nào, mà giới thiệu các tác phẩm 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 kho lưu trữ github có các nguyên tắc về nội dung đóng góp. Chúng tôi muốn xem ý định của bạn!