תאריך פרסום: 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, בדומה להתנהגות הקודמת.