เผยแพร่: 15 ม.ค. 2025
ฟังก์ชัน attr() ที่ออกแบบใหม่
เมื่อใช้ CSS attr() คุณจะใช้ค่าของแอตทริบิวต์ HTML ใน CSS ได้ ก่อนหน้านี้ attr() ใช้งานได้เฉพาะในพร็อพเพอร์ตี้ content ขององค์ประกอบจำลอง และสามารถแยกวิเคราะห์ค่าเป็น <string> ของ CSS เท่านั้น
ฟังก์ชัน attr() ที่ออกแบบใหม่ซึ่งพร้อมใช้งานใน Chrome 133 จะปลดล็อกความสามารถเพิ่มเติม ตอนนี้คุณใช้ attr() กับพร็อพเพอร์ตี้ CSS ใดก็ได้ รวมถึงพร็อพเพอร์ตี้ที่กำหนดเอง และสามารถแยกวิเคราะห์ค่าเป็นประเภทข้อมูลอื่นนอกเหนือจาก <string>
ตัวอย่าง
ในตัวอย่างต่อไปนี้ ค่าของพร็อพเพอร์ตี้ color สำหรับ div ใช้ค่าจากแอตทริบิวต์ data-color ระบบจะแยกวิเคราะห์ค่าแอตทริบิวต์นี้เป็น <color> โดยใช้ attr() และ type() ค่าสำรองจะตั้งค่าเป็น red
<div data-foo="blue">test</div>
div {
color: attr(data-foo type(<color>), red);
}
ในตัวอย่างถัดไป พร็อพเพอร์ตี้ view-transition-name จะกำหนดโดยแอตทริบิวต์ id ขององค์ประกอบ ระบบจะแยกวิเคราะห์แอตทริบิวต์เป็น <custom-ident> ซึ่งเป็นประเภทที่จำเป็นสำหรับ view-transition-name หากไม่มี attr() คุณจะต้องประกาศ view-transition-name สำหรับแต่ละการ์ด แต่ตอนนี้คุณประกาศพร้อมกันได้
<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;
}
นอกจากนี้ คุณยังแยกวิเคราะห์ค่าเป็นความยาวได้โดยการตั้งค่าประเภทเป็นตัวระบุที่ตรงกับหน่วยมิติข้อมูล CSS หรืออักขระ % ในตัวอย่างต่อไปนี้ ระบบจะแยกวิเคราะห์แอตทริบิวต์ data-size เป็นค่าพิกเซล
<div data-size="10">test</div>
div {
font-size: attr(data-size px);
}
เมื่อใช้ attr() โดยไม่ระบุประเภท ระบบจะแยกวิเคราะห์แอตทริบิวต์เป็นสตริง CSS ซึ่งเหมือนกับลักษณะการทำงานก่อนหน้านี้