Ngày xuất bản: 15 tháng 1 năm 2025
Hàm attr() được thiết kế lại
Với CSS attr(), bạn có thể sử dụng giá trị của một thuộc tính HTML trong CSS. Cho đến nay, attr() chỉ hoạt động trong thuộc tính content của các phần tử giả và chỉ có thể phân tích cú pháp các giá trị thành <string> CSS.
Hàm attr() được thiết kế lại (có trong Chrome 133) mở ra nhiều chức năng hơn. Giờ đây, bạn có thể sử dụng attr() với bất kỳ thuộc tính CSS nào (bao gồm cả thuộc tính tuỳ chỉnh) và thuộc tính này có thể phân tích cú pháp các giá trị thành các loại dữ liệu khác ngoài <string>.
Ví dụ
Trong ví dụ sau, giá trị của thuộc tính color cho div sử dụng giá trị từ thuộc tính data-color. Giá trị thuộc tính này được phân tích cú pháp thành <color> bằng attr() và type(). Giá trị dự phòng được đặt thành red.
<div data-foo="blue">test</div>
div {
color: attr(data-foo type(<color>), red);
}
Trong ví dụ tiếp theo, thuộc tính view-transition-name được xác định bởi thuộc tính id của phần tử. Thuộc tính này được phân tích cú pháp thành <custom-ident>, là loại bắt buộc cho view-transition-name. Nếu không có attr(), bạn phải khai báo view-transition-name cho từng thẻ, nhưng giờ đây, bạn có thể thực hiện việc này cùng một lúc.
<div class="cards">
<div class="card" id="card-1"></div>
<div class="card" id="card-2"></div>
<div class="card" id="card-3"></div>
<div class="card" id="card-4"></div>
</div>
.card {
view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, etc. */
view-transition-class: card;
}
Bạn cũng có thể phân tích cú pháp các giá trị thành độ dài bằng cách đặt loại thành bất kỳ giá trị nhận dạng nào khớp với đơn vị kích thước CSS hoặc ký tự %. Trong ví dụ sau, thuộc tính data-size được phân tích cú pháp thành giá trị pixel.
<div data-size="10">test</div>
div {
font-size: attr(data-size px);
}
Khi sử dụng attr() mà không có bất kỳ loại nào, thuộc tính này sẽ phân tích cú pháp thuộc tính thành một chuỗi CSS, giống như hành vi trước đó.