Hiệu ứng chuyển đổi và biện pháp bảo vệ dữ liệu trong CSS
Các thuộc tính tuỳ chỉnh của CSS (còn gọi là biến CSS) cho phép bạn xác định các thuộc tính của riêng mình trong CSS và sử dụng các giá trị của các thuộc tính đó trong toàn bộ CSS. Mặc dù rất hữu ích hiện nay, nhưng chúng có những điểm hạn chế có thể khiến bạn khó làm việc: chúng có thể nhận bất kỳ giá trị nào nên có thể vô tình bị ghi đè bằng một giá trị không mong muốn, chúng luôn kế thừa các giá trị từ thành phần mẹ và bạn không thể chuyển đổi chúng. Với CSS Properties and Values API Level 1 (API cấp 1 về thuộc tính và giá trị CSS) của Houdini hiện có trong Chrome 78, những thiếu sót này đã được khắc phục, giúp các thuộc tính tuỳ chỉnh CSS trở nên cực kỳ mạnh mẽ!
Houdini là gì?
Trước khi nói về API mới, hãy nói nhanh về Houdini. Nhóm đặc trách CSS-TAG Houdini (thường được gọi là CSS Houdini hoặc đơn giản là Houdini) được thành lập để "phát triển các tính năng giải thích "phép màu" của việc tạo kiểu và bố cục trên web". Tập hợp các quy cách Houdini được thiết kế để khai thác sức mạnh của công cụ kết xuất của trình duyệt, cho phép cả thông tin chi tiết hơn về các kiểu của chúng ta và khả năng mở rộng công cụ kết xuất. Nhờ đó, cuối cùng bạn có thể nhập các giá trị CSS trong JavaScript và polyfill hoặc phát minh ra CSS mới mà không ảnh hưởng đến hiệu suất. Houdini có tiềm năng mang đến sức mạnh siêu phàm cho hoạt động sáng tạo trên web.
CSS Properties and Values API cấp 1
CSS Properties and Values API Level 1 (Houdini Props and Vals) cho phép chúng ta tạo cấu trúc cho các thuộc tính tuỳ chỉnh. Đây là tình huống hiện tại khi sử dụng thuộc tính tuỳ chỉnh:
.thing {
--my-color: green;
}
Vì các thuộc tính tuỳ chỉnh không có loại, nên chúng có thể bị ghi đè theo những cách không mong muốn. Ví dụ: hãy xem xét điều gì sẽ xảy ra nếu bạn xác định --my-color bằng một URL.
.thing {
--my-color: url('not-a-color');
color: var(--my-color);
}
Ở đây, vì --my-color không được nhập, nên nó không biết rằng một URL không phải là giá trị màu hợp lệ! Khi chúng ta sử dụng, nó sẽ quay về các giá trị mặc định (màu đen cho color, màu trong suốt cho background). Với Houdini Props và Vals, các thuộc tính tuỳ chỉnh có thể được đăng ký để trình duyệt biết nên là gì!
Giờ đây, thuộc tính tuỳ chỉnh --my-color được đăng ký dưới dạng màu sắc! Điều này cho trình duyệt biết những loại giá trị được phép và cách trình duyệt có thể nhập và xử lý thuộc tính đó!
Phân tích một tài sản đã đăng ký
Việc đăng ký một tài sản sẽ như sau:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});
Tham số này hỗ trợ các lựa chọn sau:
name: string
Tên của thuộc tính tuỳ chỉnh.
syntax: string
Cách phân tích cú pháp thuộc tính tuỳ chỉnh. Bạn có thể xem danh sách đầy đủ các giá trị có thể có trong quy cách Giá trị và đơn vị CSS. Giá trị mặc định là *.
inherits: boolean
Liệu giá trị này có kế thừa giá trị của phần tử mẹ hay không. Giá trị mặc định là true.
initialValue: string
Giá trị ban đầu của thuộc tính tuỳ chỉnh.
Tìm hiểu kỹ hơn về syntax. Có một số lựa chọn hợp lệ, từ số đến màu sắc và các loại <custom-ident>. Bạn cũng có thể sửa đổi các cú pháp này bằng cách sử dụng các giá trị sau
- Việc thêm
+cho biết rằng tham số này chấp nhận một danh sách các giá trị được phân tách bằng dấu cách theo cú pháp đó. Ví dụ:<length>+sẽ là danh sách các độ dài được phân tách bằng dấu cách - Việc thêm
#cho biết rằng tham số này chấp nhận một danh sách các giá trị được phân tách bằng dấu phẩy của cú pháp đó. Ví dụ:<color>#sẽ là danh sách màu được phân tách bằng dấu phẩy - Việc thêm
|giữa các cú pháp hoặc giá trị nhận dạng cho biết rằng mọi lựa chọn được cung cấp đều hợp lệ. Ví dụ:<color># | <url> | magicsẽ cho phép một danh sách màu được phân tách bằng dấu phẩy, một URL hoặc từmagic.
Các lỗi thường gặp
Có hai điểm cần lưu ý đối với Houdini Props và Vals. Thứ nhất, sau khi xác định, bạn không thể cập nhật một thuộc tính đã đăng ký hiện có và việc cố gắng đăng ký lại một thuộc tính sẽ gửi lỗi cho biết thuộc tính đó đã được xác định.
Thứ hai, không giống như các thuộc tính chuẩn, các thuộc tính đã đăng ký không được xác thực khi chúng được phân tích cú pháp. Thay vào đó, các giá trị này sẽ được xác thực khi được tính toán. Điều đó có nghĩa là cả hai giá trị không hợp lệ sẽ không xuất hiện dưới dạng không hợp lệ khi kiểm tra các thuộc tính của phần tử và việc thêm một thuộc tính không hợp lệ sau một thuộc tính hợp lệ sẽ không quay lại thuộc tính hợp lệ; tuy nhiên, một thuộc tính không hợp lệ sẽ quay lại giá trị mặc định của thuộc tính đã đăng ký.
Tạo ảnh động cho các thuộc tính tuỳ chỉnh
Một thuộc tính tuỳ chỉnh đã đăng ký mang đến một phần thưởng thú vị ngoài việc kiểm tra kiểu: khả năng tạo hiệu ứng cho thuộc tính đó! Ví dụ về ảnh động cơ bản sẽ có dạng như sau:
<script>
CSS.registerProperty({
name: '--stop-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script>
<style>
button {
--stop-color: red;
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
</style>
Khi bạn di chuột lên nút này, nút sẽ chuyển từ màu đỏ sang màu xanh lục! Nếu không đăng ký thuộc tính, thuộc tính này sẽ chuyển từ màu này sang màu khác. Vì nếu không được đăng ký, trình duyệt sẽ không biết điều gì sẽ xảy ra giữa giá trị này và giá trị tiếp theo, do đó, trình duyệt không thể đảm bảo khả năng chuyển đổi các giá trị đó. Tuy nhiên, bạn có thể tiến thêm một bước nữa trong ví dụ này để tạo ảnh động cho các màu chuyển tiếp CSS! Bạn có thể viết CSS sau bằng cùng một thuộc tính đã đăng ký:
button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
Thao tác này sẽ tạo ảnh động cho thuộc tính tuỳ chỉnh của chúng ta (thuộc linear-gradient), từ đó tạo ảnh động cho chuyển màu tuyến tính. Hãy xem Codepen bên dưới để xem toàn bộ mã đang hoạt động và tự mình khám phá.
Kết luận
Houdini sắp ra mắt trên các trình duyệt, và cùng với đó là những cách hoàn toàn mới để làm việc và mở rộng CSS. Với Paint API đã được phát hành và hiện có Custom Props và Vals, hộp công cụ sáng tạo của chúng tôi đang mở rộng, cho phép chúng tôi xác định các thuộc tính CSS được nhập và sử dụng chúng để tạo cũng như tạo hiệu ứng cho các thiết kế mới và thú vị. Ngoài ra, còn nhiều nội dung khác trong hàng đợi vấn đề Houdini. Tại đây, bạn có thể gửi ý kiến phản hồi và xem những nội dung tiếp theo dành cho Houdini. Houdini ra đời để phát triển những tính năng giải thích "phép màu" của việc tạo kiểu và bố cục trên web. Vì vậy, hãy bắt đầu và sử dụng hiệu quả những tính năng kỳ diệu đó.
Ảnh chụp của Maik Jonietz trên Unsplash