เผยแพร่: 15 ม.ค. 2025
ด้วย 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 ซึ่งเหมือนกับลักษณะการทำงานก่อนหน้า