Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

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 giá trị của các thuộc tính đó trong toàn bộ CSS. Mặc dù cực kỳ hữu ích, nhưng các thuộc tính này có những thiếu sót có thể khiến chúng khó xử lý: 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ừ phần tử mẹ và bạn không thể chuyển đổi chúng. Với API Thuộc tính và Giá trị CSS cấp 1 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 vô cùng mạnh mẽ!

Houdini là gì?

Trước khi nói về API mới, hãy nói nhanh về Houdini. Lực lượng đặc nhiệm Houdini CSS-TAG, thường được gọi là CSS Houdini hoặc đơn giản là Houdini, tồn tại để "phát triển các tính năng giải thích "phép thuật" của kiểu dáng và bố cục trên web". Tập hợ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 cả thông tin chi tiết hơn về kiểu của chúng tôi và khả năng mở rộng công cụ kết xuất. Nhờ đó, cuối cùng bạn cũng 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 tăng cường khả năng sáng tạo trên web.

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

API Thuộc tính và Giá trị CSS Cấp độ 1 (Thuộc tính và Giá trị Houdini) cho phép chúng ta tạo cấu trúc cho các thuộc tính tuỳ chỉnh. Sau đâ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 điều gì 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 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 về giá trị mặc định (màu đen cho color, trong suốt cho background). Với Houdini Props and Vals, các thuộc tính tuỳ chỉnh có thể được đăng ký để trình duyệt biết giá trị nên là gì!

Giờ đây, 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 loại giá trị nào được cho phép, cũng như cách trình duyệt có thể nhập và xử lý thuộc tính đó!

Cấu trúc của một thuộc tính đã đăng ký

Việc đăng ký một tài sản sẽ có dạng như sau:

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

Tham số 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ể xem danh sách đầy đủ các giá trị có thể có trong thông số kỹ thuật Giá trị và đơn vị CSS. Giá trị mặc định là *.

`inherits: boolean`

Liệu 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.

Đang xem xét kỹ hơn về syntax. Có một số lựa 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 thêm + cho biết rằng thuộc tính này chấp nhận danh sách các 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 độ dài được phân tách bằng dấu cách
Việc thêm # cho biết rằng thuộc tính 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 các 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> | magic sẽ cho phép danh sách màu được phân tách bằng dấu phẩy, URL hoặc từ magic.

Gotchas

Có hai điểm cần lưu ý về Thuộc tính và Giá trị Houdini. Thứ nhất, sau khi được 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 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ử 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

Thuộc tính tuỳ chỉnh đã đăng ký 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! Ví dụ về ảnh động cơ bản 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 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 ảnh động cho dải chuyển màu CSS! 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 dải 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 thử nghiệm.

Kết luận

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

Thuộc tính tuỳ chỉnh thông minh hơn nhờ API mới của Houdini Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.