CSS Houdini là một thuật ngữ chung bao gồm một nhóm các API cấp thấp hiển thị các phần của công cụ kết xuất CSS và cấp cho nhà phát triển quyền truy cập vào Mô hình đối tượng CSS. Đây là một thay đổi lớn đối với hệ sinh thái CSS, vì nó cho phép nhà phát triển cho trình duyệt biết cách đọc và phân tích cú pháp CSS tuỳ chỉnh mà không cần chờ nhà cung cấp trình duyệt cung cấp tính năng hỗ trợ tích hợp cho các tính năng này. Thật thú vị!
Một trong những điểm bổ sung thú vị nhất cho CSS trong phạm vi Houdini là API Thuộc tính và giá trị.
API này tăng cường các thuộc tính tuỳ chỉnh CSS (còn thường được gọi là biến CSS) bằng cách cung cấp cho các thuộc tính này ý nghĩa ngữ nghĩa (được xác định bằng cú pháp) và thậm chí là giá trị dự phòng, cho phép kiểm thử CSS.
Viết thuộc tính tuỳ chỉnh Houdini
Sau đây là ví dụ về cách thiết lập thuộc tính tuỳ chỉnh (ví dụ: biến CSS), nhưng giờ đây, thuộc tính này có cú pháp (loại), giá trị ban đầu (phương thức dự phòng) và boolean kế thừa (có kế thừa giá trị từ thuộc tính mẹ hay không?). Cách hiện tại để thực hiện việc này là thông qua CSS.registerProperty() trong JavaScript, nhưng trong các trình duyệt hỗ trợ, bạn có thể sử dụng @property:
CSS.registerProperty({
name: '--colorPrimary',
syntax: '<color>',
initialValue: 'magenta',
inherits: false
});
@property --colorPrimary {
syntax: '<color>';
initial-value: magenta;
inherits: false;
}
Giờ đây, bạn có thể truy cập vào --colorPrimary như mọi thuộc tính tuỳ chỉnh CSS khác thông qua var(--colorPrimary). Tuy nhiên, sự khác biệt ở đây là --colorPrimary không chỉ được đọc dưới dạng một chuỗi. Nó có dữ liệu!
Giá trị dự phòng
Giống như bất kỳ thuộc tính tuỳ chỉnh nào khác, bạn có thể nhận (sử dụng var) hoặc đặt (ghi/ghi lại) giá trị. Tuy nhiên, với thuộc tính tuỳ chỉnh Houdini, nếu bạn đặt một giá trị falsey khi ghi đè giá trị đó, thì công cụ hiển thị CSS sẽ gửi giá trị ban đầu (giá trị dự phòng) thay vì bỏ qua dòng.
Hãy xem ví dụ dưới đây. Biến --colorPrimary có initial-value là magenta. Tuy nhiên, nhà phát triển đã cung cấp giá trị không hợp lệ "23". Nếu không có @property, trình phân tích cú pháp CSS sẽ bỏ qua mã không hợp lệ. Bây giờ, trình phân tích cú pháp sẽ quay lại magenta. Điều này cho phép
dự phòng và kiểm thử thực sự trong CSS. Tuyệt vời!
.card {
background-color: var(--colorPrimary); /* magenta */
}
.highlight-card {
--colorPrimary: yellow;
background-color: var(--colorPrimary); /* yellow */
}
.another-card {
--colorPrimary: 23;
background-color: var(--colorPrimary); /* magenta */
}
Cú pháp
Với tính năng cú pháp, giờ đây, bạn có thể viết CSS ngữ nghĩa bằng cách chỉ định một loại. Sau đây là các loại dữ liệu được phép hiện tại:
lengthnumberpercentagelength-percentagecolorimageurlintegerangletimeresolutiontransform-listtransform-functioncustom-ident(chuỗi giá trị nhận dạng tuỳ chỉnh)
Việc đặt cú pháp cho phép trình duyệt kiểm tra kiểu thuộc tính tuỳ chỉnh. Việc này mang lại nhiều lợi ích.
Để minh hoạ điều này, tôi sẽ hướng dẫn bạn cách tạo hiệu ứng chuyển màu động. Hiện tại, không có cách nào để tạo ảnh động (hoặc nội suy) một cách mượt mà giữa các giá trị độ dốc, vì mỗi nội dung khai báo về độ dốc được phân tích cú pháp dưới dạng một chuỗi.
Trong ví dụ này, tỷ lệ phần trăm dừng chuyển màu được tạo ảnh động từ giá trị bắt đầu là 40% đến giá trị kết thúc là 100% thông qua một lượt tương tác khi di chuột. Bạn sẽ thấy màu chuyển màu trên cùng chuyển đổi mượt mà xuống dưới.
Trình duyệt ở bên trái hỗ trợ API Giá trị và thuộc tính Houdini, cho phép chuyển đổi điểm dừng chuyển màu mượt mà. Trình duyệt ở bên phải thì không. Trình duyệt không hỗ trợ chỉ có thể hiểu thay đổi này dưới dạng một chuỗi từ điểm A đến điểm B. Không có cơ hội nội suy các giá trị, do đó, bạn không thấy quá trình chuyển đổi mượt mà đó.
Tuy nhiên, nếu khai báo loại cú pháp khi viết thuộc tính tuỳ chỉnh, sau đó sử dụng các thuộc tính tuỳ chỉnh đó để bật ảnh động, bạn sẽ thấy hiệu ứng chuyển đổi. Bạn có thể tạo thực thể cho thuộc tính tuỳ chỉnh --gradPoint như sau:
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
Và khi đến lúc tạo ảnh động, bạn có thể cập nhật giá trị từ 40% ban đầu thành 100%:
.post:hover,
.post:focus {
--gradPoint: 100%;
}
Thao tác này sẽ cho phép chuyển đổi hiệu ứng chuyển màu mượt mà.
Kết luận
Quy tắc @property giúp bạn dễ dàng tiếp cận một công nghệ thú vị hơn nữa bằng cách cho phép bạn viết CSS có ý nghĩa ngữ nghĩa trong chính CSS. Để tìm hiểu thêm về CSS Houdini và API thuộc tính và giá trị, hãy xem các tài nguyên sau:
- Houdini đã sẵn sàng chưa?
- Tài liệu tham khảo về Houdini của MDN
- Tính năng tuỳ chỉnh thông minh hơn nhờ API mới của Houdini
- Danh sách vấn đề của Houdini CSSWG
Ảnh của Cristian Escobar trên Unsplash.