Quy tắc @property CSS

Định nghĩa và cách sử dụng

CSS @property Cụm từ này được sử dụng để định nghĩa thuộc tính CSS tùy chỉnh trực tiếp trong bảng樣式 mà không cần chạy bất kỳ JavaScript nào.

@property Cụm từ này có chức năng kiểm tra loại dữ liệu và ràng buộc, có thể đặt giá trị mặc định và định nghĩa thuộc tính có thể kế thừa giá trị.

Sử dụng @property Lợi ích của nó:

• Kiểm tra loại dữ liệu và ràng buộc: Phải chỉ định loại dữ liệu của thuộc tính tùy chỉnh, ví dụ <number>, <color>, <length> v.v. Điều này có thể ngăn chặn lỗi và đảm bảo việc sử dụng đúng thuộc tính tùy chỉnh.
• Cài đặt giá trị mặc định: Có thể đặt giá trị mặc định cho thuộc tính tùy chỉnh. Điều này đảm bảo rằng nếu sau này gán giá trị không hợp lệ, trình duyệt sẽ sử dụng giá trị thay thế đã định nghĩa.
• Cài đặt hành vi kế thừa: Phải chỉ định thuộc tính tùy chỉnh có thể kế thừa giá trị từ phần tử cha không.

Ví dụ: Định nghĩa thuộc tính tùy chỉnh

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

Định nghĩa trên biểu thị rằng --my-color là một thuộc tính màu, nó có thể kế thừa giá trị từ phần tử cha và giá trị mặc định là lightgray.

Sử dụng thuộc tính tùy chỉnh trong CSS:

body {}}
  backgound-color: var(--my-color);
}

Mẫu

Ví dụ 1

Đ指定 hai thuộc tính tùy chỉnh - và sử dụng chúng để hoạt hình độ dốc:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Thử ngay

Ví dụ 2

Đ指定 hai thuộc tính tùy chỉnh: một cho kích thước mục, một cho màu sắc mục:

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Thử ngay

Ngữ pháp CSS

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

Giá trị thuộc tính

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hoàn toàn hỗ trợ quy tắc @ này.

Trang liên quan

Hướng dẫn:Quy tắc @property CSS