CSS attr() ارتقا می یابد

Bramus

تاریخ انتشار: 15 ژانویه 2025

attr() بازطراحی شده

با CSS attr() می توانید از مقدار یک ویژگی HTML در CSS خود استفاده کنید. تا به حال attr() فقط در ویژگی content شبه عناصر کار می کرد و فقط می توانست مقادیر را در یک CSS <string> تجزیه کند.

تابع بازطراحی شده attr() که در Chrome 133 موجود است، قابلیت های بیشتری را باز می کند. اکنون می‌توانید از attr() با هر ویژگی CSS - از جمله ویژگی‌های سفارشی - استفاده کنید و می‌تواند مقادیر را به انواع داده‌ای غیر از <string> تجزیه کند.

نمونه ها

در مثال زیر مقدار ویژگی color برای div از مقدار ویژگی data-color استفاده می کند. این مقدار مشخصه با استفاده از attr() و type() به یک <color> تجزیه می شود. مقدار بازگشتی روی 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 بیابید.