שדרוג של הפונקציה attr() ב-CSS

Bramus

תאריך פרסום: 15 בינואר 2025

פונקציית attr() בעיצוב החדש

בעזרת attr() ב-CSS אפשר להשתמש בערך של מאפיין 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, בדומה להתנהגות הקודמת.

מידע נוסף

מידע נוסף על attr() זמין במפרט וב-MDN.