CSS: phương thức tĩnh registerProperty()

Cú pháp

CSS.registerProperty(propertyDefinition)

Tham số

propertyDefinition

Một đối tượng chứa các thuộc tính sau:

name

Một chuỗi biểu diễn tên <dashed-ident> của thuộc tính đang được định nghĩa.

syntax Optional

Một chuỗi biểu diễn cú pháp mong đợi của thuộc tính được định nghĩa. Mặc định là "*". Xem syntax.

inherits

Giá trị boolean xác định thuộc tính được định nghĩa có nên được kế thừa (true) hay không (false). Mặc định là false.

initialValue Optional

Một chuỗi biểu diễn giá trị ban đầu của thuộc tính được định nghĩa.

Giá trị trả về

undefined.

Ngoại lệ

InvalidModificationError DOMException

name đã cho đã được đăng ký từ trước.

SyntaxError DOMException

name đã cho không phải là tên thuộc tính tùy chỉnh hợp lệ (bắt đầu bằng hai dấu gạch ngang, ví dụ --foo).

TypeError

Thành phần bắt buộc name và/hoặc inherits của dictionary không được cung cấp.

Ví dụ

Ví dụ sau sẽ đăng ký một thuộc tính tùy chỉnh, --my-color, bằng registerProperty(), định nghĩa nó là một màu, cung cấp giá trị mặc định, và không cho nó kế thừa giá trị:

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

Trong ví dụ này, thuộc tính tùy chỉnh --my-color đã được đăng ký với cú pháp <color>. Giờ đây chúng ta có thể dùng thuộc tính đó để tạo chuyển tiếp cho một dải màu khi hover hoặc focus. Lưu ý rằng với thuộc tính đã đăng ký, hiệu ứng chuyển tiếp hoạt động, nhưng với thuộc tính chưa đăng ký thì không.

.registered {
  --my-color: #c0ffee;
  background-image: linear-gradient(to right, white, var(--my-color));
  transition: --my-color 1s ease-in-out;
}

.registered:hover,
.registered:focus {
  --my-color: #b4d455;
}

.unregistered {
  --unregistered: #c0ffee;
  background-image: linear-gradient(to right, white, var(--unregistered));
  transition: --unregistered 1s ease-in-out;
}

.unregistered:hover,
.unregistered:focus {
  --unregistered: #b4d455;
}
button {
  font-size: 3vw;
}

Chúng ta có thể thêm các kiểu này vào một vài nút:

<button class="registered">Background Registered</button>
<button class="unregistered">Background Not Registered</button>

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Sử dụng CSS properties and values API
• CSS
• CSS.supports()
• CSS.escape()
• Các hàm factory của CSS
• CSS @property