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

Bramus

منتشر شده: ۱۵ ژانویه ۲۰۲۵

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

تابع attr() که از نسخه ۱۳۳ کروم در دسترس است، قابلیت‌های بیشتری را ارائه می‌دهد. اکنون می‌توانید از 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;
}

همچنین می‌توانید با تنظیم نوع داده (type) به هر شناسه‌ای که با واحد ابعاد CSS یا کاراکتر % مطابقت دارد، مقادیر را به طول تجزیه کنید. در مثال زیر، ویژگی data-size به یک مقدار پیکسل تجزیه می‌شود.

<div data-size="10">test</div>

div {
  font-size: attr(data-size px);
}

هنگام استفاده از attr() بدون هیچ نوع داده‌ای، ویژگی به یک رشته CSS تجزیه می‌شود، که مشابه رفتار قبلی است.

بیشتر بدانید

اطلاعات بیشتر در مورد attr() را در مشخصات و MDN بیابید.