תאריך פרסום: 15 בינואר 2025
באמצעות CSS attr() אפשר להשתמש בערך של מאפיין HTML ב-CSS. עד עכשיו, attr() פעל רק בתוך המאפיין content של פסאודו-אלמנטים, ויכול היה לנתח ערכים רק לתוך CSS <string>.
הפונקציה 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, כמו בהתנהגות הקודמת.