Ngày xuất bản: 12 tháng 7 năm 2024
Hãy sẵn sàng để tăng cường CSS! Quy tắc @property, một phần của nhóm API CSS Houdini, hiện được hỗ trợ đầy đủ trên tất cả trình duyệt hiện đại. Tính năng thay đổi cuộc chơi này mở ra các cấp độ kiểm soát và linh hoạt mới cho các thuộc tính tuỳ chỉnh CSS (còn gọi là biến CSS), giúp các trang kiểu của bạn thông minh và linh động hơn.
Lợi ích của @property
- Ý nghĩa ngữ nghĩa: Sử dụng
@propertyđể xác định một loại (cú pháp) cho các thuộc tính tuỳ chỉnh. Thao tác này cho trình duyệt biết loại dữ liệu mà thuộc tính tuỳ chỉnh của bạn chứa (ví dụ: màu sắc, độ dài hoặc số), ngăn chặn kết quả không mong muốn và hỗ trợ các khả năng mới như tạo hiệu ứng chuyển màu động. - Giá trị dự phòng: Không còn kiểu nào biến mất nữa! Sử dụng
@propertyđể đặt giá trị ban đầu cho một thuộc tính tuỳ chỉnh. Nếu sau đó bạn chỉ định một giá trị không hợp lệ, trình duyệt sẽ sử dụng giá trị dự phòng mà bạn đã xác định một cách linh hoạt. - Cải thiện khả năng xử lý lỗi: Tính năng tăng cường an toàn kiểu và khả năng đặt phương án dự phòng mở ra cơ hội mới để kiểm thử và xác thực ngay trong CSS.
Tạo thuộc tính tuỳ chỉnh nâng cao
Để tạo một thuộc tính tuỳ chỉnh "tiêu chuẩn", hãy đặt tên thuộc tính có tiền tố là -- và đặt giá trị cho thuộc tính này. Giá trị của các thuộc tính tuỳ chỉnh này được trình duyệt phân tích cú pháp dưới dạng chuỗi.
Ví dụ sau đây cho thấy cách khởi tạo một thuộc tính tuỳ chỉnh mặc định (dựa trên chuỗi).
:root {
--myColor: hotpink;
}
Để tận dụng các "thuộc tính tuỳ chỉnh nâng cao" này, bao gồm cả ngữ nghĩa ngoài chuỗi, hãy đăng ký thuộc tính tuỳ chỉnh CSS bằng @property.
Trong ví dụ này, cùng một thuộc tính tuỳ chỉnh được khởi tạo bằng @property.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Thuộc tính tuỳ chỉnh được khởi chạy bằng @property cung cấp nhiều thông tin chi tiết hơn là chỉ tên và giá trị. Thuộc tính này bao gồm loại cú pháp và đặt tính kế thừa thành true hoặc false.
Lợi ích của phương pháp này là với thuộc tính chuẩn, bạn muốn thuộc tính đó chứa một màu dưới dạng giá trị và sẽ sử dụng màu đó ở nơi khác trong tệp kiểu. Nếu ai đó cập nhật thuộc tính đó để có một số làm giá trị, thì mọi hoạt động sử dụng thuộc tính đó ở nơi khác sẽ không thành công. Khi sử dụng @property, bạn sẽ thấy một màu dự phòng được xác định, cùng với syntax khai báo thuộc tính này phải chứa một giá trị màu. Nếu bạn sử dụng giá trị không phải màu, thì giá trị dự phòng sẽ được sử dụng.
Bản minh hoạ: Nền chuyển màu lấp lánh
Một trong những ứng dụng gọn gàng của @property là ảnh động mượt mà của các thuộc tính trước đây không thể chuyển đổi, chẳng hạn như hiệu ứng chuyển màu mà trình duyệt coi là hình ảnh. Tuy nhiên, nếu bạn cung cấp cho các biến ý nghĩa cú pháp thông qua @property, thì các biến này có thể được sử dụng trong câu lệnh chuyển màu. Bây giờ, bạn đang mô tả một ảnh động giữa hai giá trị đã khai báo trong hiệu ứng chuyển màu, cho phép ảnh động. Hãy xem ví dụ sau: một thẻ có ảnh động nền tinh tế bao gồm hai hiệu ứng chuyển màu dạng hình tròn chuyển đổi màu sắc trên các tiến trình khác nhau:
@property để tạo kiểu cho màu ảnh động trong hiệu ứng chuyển màu nền.Bạn có thể thực hiện việc này bằng cách thiết lập giá trị thuộc tính tuỳ chỉnh dưới dạng màu:
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: lavender;
}
@property --shine-1 {
syntax: "<color>";
inherits: false;
initial-value: wheat;
}
@property --shine-2 {
syntax: "<color>";
inherits: false;
initial-value: lightpink;
}
Sau đó, bạn truy cập vào các lớp này để tạo nền chuyển màu ban đầu:
.card {
background: radial-gradient(
300px circle at 55% 60% in oklab,
var(--shine-2), transparent 100% 100%),
radial-gradient(farthest-side circle at 75% 30% in oklab,
var(--shine-1) 0%, var(--card-bg) 100%);
}
Ngoài ra, bạn sẽ cập nhật các giá trị trong khung hình chính:
@keyframes animate-color-1 {
to {
--shine-1: orange;
}
}
@keyframes animate-color-2 {
to {
--shine-2: hotpink;
}
}
Và tạo ảnh động cho từng phần:
animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;
Kết luận
Thuộc tính tuỳ chỉnh đã đăng ký CSS là một tính năng rất mạnh mẽ giúp mở rộng ngôn ngữ CSS bằng cách cung cấp ý nghĩa và ngữ cảnh cho các biến CSS. Giờ đây, với @property hạ cánh ở đường cơ sở, siêu năng lực CSS này đang ngày càng mạnh mẽ hơn.