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

Hoạt động chuyển đổi và biện pháp bảo vệ dữ liệu trong CSS

Sam Richard

Thuộc tính tuỳ chỉnh CSS, còn được gọi là CSS biến, 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 chúng trong toàn bộ Dịch vụ so sánh giá (CSS). Mặc dù ngày nay các công cụ này cực kỳ hữu ích nhưng vẫn có những hạn chế có thể khiến khó xử lý: chúng có thể nhận bất kỳ giá trị nào nên chúng có thể vô tình bị ghi đè bằng yếu tố không mong muốn, nên chúng sẽ luôn kế thừa các giá trị từ thành phần mẹ của chúng và bạn không thể chuyển đổi chúng. Với thuộc tính CSS của Houdini và Giá trị API cấp 1, hiện đã có trong Chrome 78, những thiếu sót này đã được khắc phục, giúp CSS thuộc tính tuỳ chỉnh vô cùng hữu ích!

Houdini là gì?

Trước khi nói về API mới, hãy nói nhanh về Houdini. CSS-TAG Lực lượng đặc nhiệm Houdini, thường được gọi là CSS Houdini hoặc đơn giản là Houdini, có "phát triển các tính năng giải thích "sự kỳ diệu" về kiểu và bố cục trên web". Tập hợp các thông số của Houdini bao gồm nhằm 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ả hai hiểu rõ hơn về các kiểu và khả năng mở rộng công cụ kết xuất hình ảnh. Bằng cách này, các giá trị CSS đã nhập trong JavaScript và chèn polyfill hoặc sáng chế ra CSS mới mà không có lượt truy cập "hiệu suất" cuối cùng đều có thể xảy ra. Houdini có khả năng siêu năng lực sáng tạo trên web.

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

Cấp độ API Thuộc tính và Giá trị của CSS 1 (Đạo luật Houdini và Val) 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 khi sử dụng thuộc tính tuỳ chỉnh:

.thing {
  --my-color: green;
}

Vì thuộc tính tuỳ chỉnh không có loại, nên chúng có thể bị ghi đè trong trường hợp không mong muốn nhiều cách. Ví dụ: hãy xem xét đ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, do --my-color không được nhập nên không biết được URL không hợp lệ giá trị màu! Khi chúng ta sử dụng hàm này, giá trị này sẽ quay về các giá trị mặc định (màu đen cho color, trong suốt cho background). Với đạo cụ và giá trị Houdini, thuộc tính tuỳ chỉnh có thể được đăng ký để trình duyệt biết nên nội dung gì!

Bây giờ, thuộc tính tuỳ chỉnh --my-color đã được đăng ký dưới dạng một màu! Điều này cho biết cho trình duyệt những loại giá trị được phép cũng như cách trình duyệt có thể nhập và xử lý giá trị đó của riêng bạn!

Phân tích một tài sản đã đăng ký

Quy trình đăng ký tài sản trông giống 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ể sử dụng trong thông số kỹ thuật Giá trị và đơn vị CSS. Giá trị mặc định là *.

`inherits: boolean`

Liệu tệp có kế thừa giá trị của thành phần 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.

Hãy cùng tìm hiểu kỹ hơn về syntax. Có một số phương thức thanh toán hợp lệ các lựa chọn có phạm vi từ số đến màu sắc <custom-ident> loại. 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 + biểu thị rằng nó 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 phân tách bằng dấu cách lượt bơi
Việc thêm # cho biết rằng nó chấp nhận danh sách giá trị được phân tách bằng dấu phẩy cú pháp đó. Ví dụ: <color># sẽ là danh sách được phân tách bằng dấu phẩy màu
Việc thêm | giữa các cú pháp hoặc giá trị nhận dạng cho biết rằng bất kỳ giá trị nào được cung cấp là 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, URL hoặc từ magic.

Gotchas

Có hai trò chơi trong getcha với Houdini Props và Vals. Thứ nhất là, khi không có cách nào để cập nhật thuộc tính đã đăng ký hiện có và cố gắng khi đăng ký lại một tài sản, một tài sản sẽ báo lỗi cho biết tài sản đó đã được xác định.

Thứ hai, không giống như tài sản chuẩn, tài sản đã đăng ký không được xác thực khi thì sẽ được phân tích cú pháp. Thay vào đó, chúng được xác thực khi tính toán. Tức là cả hai rằng các 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 giá trị của phần tử và việc bao gồm một tài sản không hợp lệ sau khi có một tài sản hợp lệ sẽ không sử dụng lại thành đồng hồ hẹn giờ hợp lệ; tuy nhiên, thuộc tính không hợp lệ sẽ quay lại thuộc tính đã đăng ký mặc định của thuộc tính.

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

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 loại: khả năng tạo ảnh động! 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 này sẽ chuyển từ màu đỏ sang màu xanh lục! Không có khi đăng ký thuộc tính, nó sẽ chuyển từ màu này sang màu khác. mà không được đăng ký, trình duyệt không biết điều gì sẽ xảy ra giữa một và giá trị tiếp theo, do đó không thể đảm bảo khả năng chuyển đổi chúng. Tuy nhiên, ví dụ này có thể tiến thêm một bước để tạo hiệu ứng chuyển màu CSS! Chiến lược phát hành đĩa đơn CSS sau đây có thể được viết với 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, do đó tạo ảnh động chuyển màu tuyến tính. Xem sự cố nhỏ bên dưới để xem mã đầy đủ trong thực tế và tự mình thử nghiệm.

Kết luận

Houdini đang tiếp tục triển khai các trình duyệt và theo đó, những cách thức hoàn toàn mới để làm việc và mở rộng CSS. Với lớp Paint API đã được vận chuyển Còn bây giờ là Custom Prop and Vals (Giá trị và đạo cụ tuỳ chỉnh), bộ 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, đồng thời sử dụng các thuộc tính đó để tạo và tạo ảnh động mới mẻ và thú vị của chúng tôi. Vẫn còn nhiều điều khác sắp ra mắt trong số phát hành Houdini hàng đợi để bạn có thể đưa ra phản hồi và xem điều gì sẽ xảy ra tiếp theo cho Houdini. Houdini có mục đích phát triển các tính năng giải thích về "điều kỳ diệu" về định kiểu và bố cục trên web. Vì vậy, hãy truy cập vào trang web đó phát huy hiệu quả các tính năng kỳ diệu đó.

Người chụp ảnh Maik Jonietz về Không hiển thị nội dung