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