CSS Houdini là một thuật ngữ bao quát một tập hợp các API cấp thấp hiển thị các phần của công cụ kết xuất CSS, đồng thời cho phép nhà phát triể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 các 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ờ các 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ú vị quá!
Một trong những tính năng bổ sung thú vị nhất cho CSS trong ô Houdini là Properties and Values API.
API này tăng cường các thuộc tính tuỳ chỉnh CSS của bạn (còn gọi là biến CSS) bằng cách cung cấp cho các thuộc tính đó ý nghĩa ngữ nghĩa (được xác định bằng cú pháp) và thậm chí cả các giá trị dự phòng, nhờ đó có thể kiểm thử CSS.
Viết thuộc tính tùy chỉnh Houdini
Dưới đây là ví dụ về cách đặt một thuộc tính tuỳ chỉnh (ví dụ: biến CSS). Tuy nhiên, giờ đây, bạn có thể sử dụng cú pháp (loại), giá trị ban đầu (dự phòng) và boolean kế thừa (thuộc tính này có kế thừa giá trị của thuộc tính mẹ hay không?). Hiện tại, bạn có thể thực hiện việc này 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: '',
initialValue: 'magenta',
inherits: false
});
@property --colorPrimary {
syntax: '';
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 chuỗi. Ứng dụng này có dữ liệu!
Giá trị dự phòng
Giống như mọi thuộc tính tuỳ chỉnh khác, bạn có thể nhận (bằng cách sử dụng var) hoặc đặt (ghi/ghi lại) giá trị, nhưng với các thuộc tính tuỳ chỉnh Houdini, nếu bạn đặt một giá trị falsey khi ghi đè thuộc tính đó, công cụ hiển thị CSS sẽ gửi giá trị ban đầu (giá trị dự phòng của nó) thay vì bỏ qua dòng này.
Hãy xem ví dụ dưới đây. Biến --colorPrimary có initial-value là magenta. Tuy nhiên, nhà phát triển đã gán giá trị không hợp lệ 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 sử dụng magenta. Điều này cho phép tạo bản 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 hình đượ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 sẽ cho phép trình duyệt kiểm tra loại thuộc tính tuỳ chỉnh. Việc này có nhiều lợi ích.
Để minh hoạ cho điểm này, tôi sẽ hướng dẫn bạn cách tạo hiệu ứng chuyển màu. Hiện tại, không có cách nào để tạo ảnh động (hoặc nội suy) một cách suôn sẻ giữa các giá trị chuyển màu, vì mỗi nội dung khai báo chuyển màu đượ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 sẽ đượ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 tương tác di chuột. Bạn sẽ thấy sự chuyển đổi mượt mà của màu chuyển màu trên cùng xuống dưới.
Trình duyệt ở bên trái hỗ trợ Houdini Properties and Values API (API Giá trị và thuộc tính Houdini), cho phép chuyển đổi điểm 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 đi từ điểm A đến điểm B. Không có cơ hội để nội suy các giá trị và do đó, bạn sẽ không thấy quá trình chuyển đổi suôn sẻ đó.
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, thì 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:
/* Check for Houdini support & register property */
@supports (background: paint(something)) {
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
}
Sau đó, đến lúc tạo ảnh động, bạn có thể cập nhật giá trị từ 40% ban đầu thành 100%:
@supports (background: paint(something)) {
.post:hover,
.post:focus {
--gradPoint: 100%;
}
}
Bây giờ, thao tác này sẽ bật hiệu ứng chuyển đổi chuyển màu mượt mà.
Kết luận
Quy tắc @property giúp một công nghệ thú vị dễ tiếp cận hơn nữa bằng cách cho phép bạn viết CSS có ý nghĩa về mặt ngữ nghĩa trong chính CSS. Để tìm hiểu thêm về CSS Houdini cũng như API Thuộc tính và giá trị, hãy tham khảo các tài nguyên sau:
- Houdini đã sẵn sàng chưa?
- Tài liệu tham khảo về MDN Houdini
- Thuộc tính tuỳ chỉnh thông minh hơn nhờ API mới của Houdini
- Hàng đợi vấn đề của Houdini CSSWG
Ảnh chụp của Cristian Escobar trên Unsplash.