@property rule dùng để làm gì?

@property đăng ký kiểu dữ liệu cho một custom property, để browser hiểu nó là màu, góc hay độ dài — thay vì chỉ là chuỗi.

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.card {
  --angle: 0deg;
  background: conic-gradient(from var(--angle), var(--accent), transparent);
  transition: --angle 0.6s linear;
}
.card:hover { --angle: 360deg; }   /* animate được, vì browser biết đây là góc */

Không có @property, custom property chỉ là chuỗi vô kiểu: browser không biết nội suy từ 0deg sang 360deg như thế nào, nên transition không có tác dụng — biến nhảy thẳng sang giá trị cuối.

Ba trường trong khai báo:
- syntax — '<color>', '<angle>', '<length>', '<number>', '<percentage>', hoặc '*' (vô kiểu, không animate được).
- initial-value — bắt buộc trừ khi syntax: '*'.
- inherits — có truyền xuống con hay không.

Ứng dụng hay gặp: animate gradient, viền chuyển màu chạy vòng, đổi hue mượt, thanh tiến độ theo phần trăm.

Lợi ích phụ ít người nhắc: có kiểu nghĩa là giá trị sai bị bỏ qua an toàn, trở về initial-value thay vì làm hỏng cả khai báo.

Hỗ trợ: Baseline 2024 (Chrome 85+, Safari 16.4+, Firefox 128+).