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

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 chúng trong toàn bộ CSS. Mặc dù vô cùng hữu ích hiện nay, nhưng chúng vẫn có những nhược điểm 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ởi một điều gì đó không mong muốn, chúng luôn kế thừa các giá trị từ mẹ và bạn không thể chuyển đổi chúng. Với API Giá trị và thuộc tính CSS cấp 1 của Houdini (hiện có trong Chrome 78), những hạn chế 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 CSS-TAG Houdini, hay còn gọi là CSS Houdini hay đơn giản là Houdini, tồn tại để "phát triển các tính năng giải thích "sự kỳ diệu" của kiểu và bố cục trên web". Tập hợp thông số kỹ thuật của 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 có được thông tin chi tiết chuyên sâu hơn về kiểu và khả năng mở rộng công cụ kết xuất của chúng tôi. Với phương pháp này, cuối cùng bạn cũng có thể nhập các giá trị CSS vào JavaScript và tạo polyfilling hoặc phát minh ra CSS mới mà không có ảnh hưởng đến hiệu suất. Houdini có tiềm năng làm nên siêu năng lực 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 (Houdini Props và Vals) cho phép chúng tôi cung cấp cấu trúc cho các thuộc tính tuỳ chỉnh của mình. Đây là tình huống hiện tại khi sử dụng các 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 ngoài dự kiế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 hệ thống không biết rằng URL không phải là một giá trị màu sắc hợp lệ! Khi sử dụng thuộc tính này, thuộc tính này sẽ trở về các giá trị mặc định (màu đen cho color, 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 đó là 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 sẽ cho trình duyệt biết loại giá trị nào được phép cũng như 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ý

Quy trình đăng ký tài sản sẽ có dạng như sau:

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

API 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 thông số kỹ thuật Giá trị và đơn vị của CSS. Giá trị mặc định là *.

`inherits: boolean`

Liệu mã này có kế thừa giá trị của cấp độ gốc 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.

Chúng tôi đang tìm hiểu kỹ hơn về syntax. Có một số tuỳ chọn hợp lệ, từ số, màu cho đến loại <custom-ident>. Bạn cũng có thể sửa đổi những 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 mã 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à một danh sách độ dài được phân tách bằng dấu cách
Việc thêm# cho biết rằng lệ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à một 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 thấy mọi tuỳ chọn đã 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.

Trò chơi lấy bối cảnh

Có hai yêu cầu bắt buộc với Houdini Props và Vals. Thứ nhất là sau khi được xác định, không có cách nào để 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 ra 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, 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 biến này được xác thực khi tính toán. Điều đó có nghĩa là cả hai giá trị không hợp lệ đó đều 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ử, cũng như việc bao gồm một thuộc tính không hợp lệ sau khi một thuộc tính hợp lệ sẽ không quay lại giá trị hợp lệ; tuy nhiên, thuộc tính không hợp lệ sẽ quay lại chế độ 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ý mang đến một lợi ích thú vị khác 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 qua nút này, nút sẽ tạo hiệu ứng động từ màu đỏ sang màu xanh lục! Nếu không đăng ký thuộc tính, thuộc tính sẽ chuyển từ màu này sang màu khác. Vì 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 đó 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 trong ví dụ này để tạo hiệu ứng chuyển màu 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 trên linear-gradient, từ đó tạo hiệu ứng chuyển màu tuyến tính. Hãy xem sự cố nhỏ bên dưới để xem mã đầy đủ đang hoạt động và tự mình khám phá.

Kết luận

Houdini đang trong quá trình triển khai cho các trình duyệt, và cùng với trình duyệt này là những cách thức 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à nay là Custom Props và Vals, bộ công cụ sáng tạo của chúng tôi sẽ 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 cũng như 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 các nội dung tiếp theo dành cho Houdini. Houdini phát triển các tính năng giúp giải thích "sự kỳ diệu" của cách tạo kiểu và bố cục trên web. Vì vậy, hãy ra mắt và tận dụng những tính năng kỳ diệu đó.

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