Trang này được dịch bởi Cloud Translation API.

Thuộc tính tuỳ chỉnh thông minh hơn nhờ API mới của Houdini

Hiệu ứng chuyển đổi và bảo vệ dữ liệu trong CSS

Sam Richard

Thuộc tính tuỳ chỉnh 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ù cực kỳ hữu ích hiện nay, nhưng các thuộc tính này có những hạn chế có thể khiến bạn khó sử dụng: 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 giá trị từ thành phần mẹ và bạn không thể chuyển đổi các thuộc tính này. Với API cấp 1 về Giá trị và thuộc tính CSS của Houdini, hiện có trong Chrome 78, những điểm yếu này đã được khắc phục, giúp các thuộc tính tuỳ chỉnh CSS trở nên mạnh mẽ vô cùng!

Houdini là gì?

Trước khi nói về API mới, hãy cùng tìm hiểu nhanh về Houdini. Nhóm tác vụ CSS-TAG Houdini, còn đượ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 kiểu và bố cục trên web". Bộ sưu tập 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 bạn hiểu rõ hơn về các kiểu và có thể mở rộng công cụ kết xuất. Cuối cùng, bạn có thể nhập các giá trị CSS trong JavaScript và polyfill hoặc tạo CSS mới mà không ảnh hưởng đến hiệu suất. Houdini có tiềm năng giúp bạn phát huy tối đa khả năng sáng tạo trên web.

API cấp 1 về thuộc tính và giá trị CSS

API cấp 1 về thuộc tính và giá trị CSS (Houdini Props và Vals) cho phép chúng ta cung cấp 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 các thuộc tính này có thể bị ghi đè theo 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);
}

Tại đây, vì --my-color không được nhập, nên nó không biết rằng URL không phải là giá trị màu hợp lệ! Khi chúng ta sử dụng, thuộc tính này sẽ quay lại các giá trị mặc định (đen cho color, trong suốt cho background). Với Houdini Props và Vals, bạn có thể đăng ký các thuộc tính tuỳ chỉnh để trình duyệt biết thuộc tính đó nên là gì!

Bây giờ, thuộc tính tuỳ chỉnh --my-color đã được đăng ký dưới dạng màu! Đ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 thành phần của một tài sản đã đăng ký

Cách đăng ký một tài sản như sau:

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

Trình bổ trợ này hỗ trợ các tuỳ 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ể tìm thấy 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 thuộc tính này có kế thừa giá trị của thuộc tính 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ố tuỳ chọn hợp lệ từ số đến màu sắc cho đến 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 nối + cho biết rằng hàm này chấp nhận danh sách giá trị được phân tách bằng dấu cách của cú pháp đó. Ví dụ: <length>+ sẽ là danh sách các chiều dài được phân tách bằng dấu cách
Việc nối# cho biết rằng hàm này chấp nhận 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 tuỳ chọn được cung cấp đều hợp lệ. Ví dụ: <color># | <url> | magic sẽ 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 ý với Houdini Props và Vals. Thứ nhất, sau khi xác định, bạn không thể cập nhậ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 một 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 được phân tích cú pháp. Thay vào đó, các giá trị này đượ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ử, đồng thời việc đưa một thuộc tính không hợp lệ vào 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 thuộc tính mặc định của thuộc tính đã đăng ký.

Tạo ảnh động cho thuộc tính tuỳ chỉnh

Một thuộc tính tuỳ chỉnh đã đăng ký sẽ mang lại một phần thưởng thú vị ngoài việc kiểm tra loại: khả năng tạo ảnh độ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 động 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 một giá trị và giá trị tiếp theo, do đó 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 để tạo hiệu ứng chuyển màu CSS động! Bạn có thể viết CSS sau đây 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 thuộc linear-gradient, từ đó tạo ảnh động cho hiệu ứng chuyển màu tuyến tính. Hãy xem Glitch bên dưới để xem toàn bộ mã đang hoạt động và tự mình thử nghiệm.

Kết luận

Houdini sắp ra mắt trên các trình duyệt, cùng với đó là các cách hoàn toàn mới để làm việc và mở rộng CSS. Với Paint API đã được phân phối và giờ đây là các thành phần tuỳ chỉnh và giá trị, 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 đã nhập và sử dụng các thuộc tính đó để tạo và tạo ảnh động cho các thiết kế mới và thú vị. Chúng tôi cũng sẽ ra mắt nhiều tính năng khác trong hàng đợi vấn đề về Houdini. Tại đây, bạn có thể đưa ra ý kiến phản hồi và xem những tính năng tiếp theo cho Houdini. Houdini ra đời để phát triển các tính năng giải thích "phép màu" của kiểu và bố cục trên web, vì vậy, hãy bắt tay vào sử dụng các tính năng kỳ diệu đó.

Ảnh chụp của Maik Jonietz trên Unsplash