Điều khoản @property CSS

Điều khoản @property CSS

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

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

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

@property --myColor {
  cú pháp: "<color>";
  inherits: true;
  initial-value: lightgray;
}

Định nghĩa trên có nghĩa là --myColor Là một thuộc tính màu, nó có thể kế thừa giá trị của phần tử cha, giá trị mặc định là lightgray.

Để sử dụng thuộc tính tùy chỉnh trong CSS, chúng ta sử dụng var() Hàm:

body {
  background-color: var(--myColor);
}

Sử dụng @property Lợi ích:

• Kiểm tra loại：Phải chỉ định loại dữ liệu của thuộc tính tùy chỉnh, chẳng hạn như <number>、<color>、<length>。Điều này giúp tránh lỗi và đảm bảo sử dụng thuộc tính tùy chỉnh đúng cách
• Đặt giá trị mặc định：Có thể thiết lập 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 phân phối giá trị không hợp lệ, trình duyệt sẽ sử dụng giá trị dự phòng được định nghĩa.
• Đặ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ị của phần tử cha của nó hay không.

Hỗ trợ trình duyệt

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

Ví dụ @property đơn giản

Ví dụ sau định nghĩa hai thuộc tính tùy chỉnh:--my-bg-color và --my-txt-color. Sau đó, div trong background-color và color sử dụng thuộc tính tùy chỉnh:

Mô hình

@property --my-bg-color {
  cú pháp: "<color>";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  cú pháp: "<color>";
  inherits: true;
  initial-value: darkblue;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

Thử nghiệm trực tiếp

một ví dụ @property khác

Trong ví dụ sau, chúng ta sử dụng thuộc tính tùy chỉnh mặc định trên phần tử <div>. Sau đó, chúng ta .fresh và .nature để che phủ thuộc tính tùy chỉnh (bằng cách thiết lập màu khác), hiệu quả rất tốt:

Mô hình

@property --my-bg-color {
  cú pháp: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

Thử nghiệm trực tiếp

bằng cách kiểm tra loại và giá trị dự phòng để tránh lỗi

Trong ví dụ sau, chúng ta sẽ .nature Thuộc tính tùy chỉnh trong lớp được thiết lập là số nguyên. Điều này là không hợp lệ, trình duyệt sẽ sử dụng trong initial-value Màu sắc dự phòng được định nghĩa trong thuộc tính (lightgray):

Mô hình

@property --my-bg-color {
  cú pháp: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

Thử nghiệm trực tiếp

sử dụng giá trị inherits

Trong ví dụ sau, chúng ta sẽ inherits Giá trị được thiết lập là falseĐiều này có nghĩa là thuộc tính tùy chỉnh sẽ không kế thừa giá trị từ phần tử cha của nó. Xem kết quả:

Mô hình

@property --my-bg-color {
  cú pháp: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Thử nghiệm trực tiếp

Ví dụ tiếp theo sẽ inherits Giá trị được thiết lập là trueĐiều này có nghĩa là thuộc tính tùy chỉnh sẽ kế thừa giá trị từ phần tử cha của nó. Xem kết quả:

Mô hình

@property --my-bg-color {
  cú pháp: "<color>";
  inherits: true;
  initial-value: lightgray;
}

Thử nghiệm trực tiếp

Sử dụng @property để tạo hoạt hình mượt mà

Sử dụng @property Cơ hội mới mà quy tắc có thể thực hiện là hoạt hình nội dung trước đây không thể hoạt hình: sự chuyển đổi. Xem ví dụ sau:

Mô hình

Để chỉ định hai thuộc tính tùy chỉnh cho sự chuyển đổi:

@property --startColor {
  cú pháp: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  cú pháp: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Thử nghiệm trực tiếp

Điều khoản @property CSS