CSS properties and values API

Module CSS properties and values API định nghĩa một phương pháp để đăng ký các thuộc tính CSS mới, xác định kiểu dữ liệu của thuộc tính, hành vi kế thừa và tùy chọn giá trị ban đầu. API này mở rộng module CSS custom properties for cascading variables, cho phép tác giả định nghĩa các thuộc tính tùy chỉnh trong CSS bằng cú pháp hai gạch ngang (--). CSS properties and values API là một phần của nhóm API CSS Houdini.

Các thuộc tính tùy chỉnh cho phép bạn tái sử dụng các giá trị xuyên suốt một dự án, giúp đơn giản hóa các stylesheet phức tạp hoặc lặp lại. Các thuộc tính tùy chỉnh cơ bản được định nghĩa trong module CSS custom properties for cascading variables. CSS properties and values API mở rộng module đó, cho phép thêm metadata vào các thuộc tính tùy chỉnh bằng CSS thông qua at-rule @property, hoặc thay thế bằng phương thức JavaScript CSS.registerProperty.

Dù được đăng ký bằng CSS hay JavaScript, việc thiết lập metadata cho thuộc tính tùy chỉnh cung cấp kiểu dữ liệu mong đợi mà trình duyệt có thể sử dụng tùy theo ngữ cảnh, xác định giá trị ban đầu và cho phép kiểm soát tính kế thừa.

Việc đăng ký thuộc tính tùy chỉnh theo CSS properties and values API mạnh mẽ hơn cách khai báo biến CSS cascading đơn giản, đặc biệt khi chuyển tiếp và animation các giá trị, vì trình duyệt có thể nội suy giữa các giá trị tùy chỉnh của kiểu này, trong khi các thuộc tính dùng cú pháp hai gạch ngang (--) hoạt động giống như thay thế chuỗi.

Properties and values API trong hoạt động

Để xem cách các thuộc tính và giá trị tùy chỉnh có thể được sử dụng qua API, hãy di chuột qua hộp bên dưới.

CSS.registerProperty({
  name: "--stop-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "cornflowerblue",
});

.box {
  padding: 1rem;
  width: 90%;
  height: 4rem;
  font-family: sans-serif;
  font-size: large;
  color: white;
  border-radius: 0.5rem;
}

.box {
  background: linear-gradient(to right, var(--stop-color), lavenderblush);
  transition: --stop-color 2s;
}

.box:hover {
  --stop-color: aquamarine;
}

<div class="box"><p>Linear gradient with transition</p></div>

Hộp có background bao gồm linear gradient từ --stop-color (thuộc tính tùy chỉnh) đến lavenderblush. Giá trị của --stop-color ban đầu được đặt là cornflowerblue, nhưng khi di chuột qua hộp, --stop-color chuyển tiếp sang aquamarine trong hai giây (linear-gradient(to right, aquamarine, lavenderblush)).

Tham khảo

At-rules và descriptors

@property
- syntax descriptor
  - + and # multipliers
  - | combinator
- inherits descriptor
- initial-value descriptor

Interfaces và APIs

Hướng dẫn

Đăng ký thuộc tính tùy chỉnh CSS: Trình bày cách đăng ký thuộc tính tùy chỉnh CSS bằng at-rule @property và giải thích lợi ích của việc làm đó.
Sử dụng CSS properties and values API: Giải thích cách đăng ký thuộc tính tùy chỉnh trong CSS và JavaScript, cùng các gợi ý xử lý giá trị không xác định và không hợp lệ, fallback và kế thừa.
CSS Houdini: Tài liệu tham khảo về tài nguyên Houdini bao gồm các module CSS, hướng dẫn API và tài nguyên bên ngoài.
Houdini APIs: Giải thích CSS Houdini là gì và các lợi thế của nó, cùng danh sách các API có sẵn và trạng thái của chúng.

Khái niệm liên quan

Đặc tả kỹ thuật

Specification
CSS Properties and Values API Level 1

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content