ترقية دالة attr() في CSS

Bramus

تاريخ النشر: 15 يناير 2025

باستخدام CSS attr()، يمكنك استخدام قيمة سمة HTML في CSS. حتى الآن، كانت السمة attr() تعمل فقط ضمن السمة content للعناصر الزائفة، وكان بإمكانها تحليل القيم فقط إلى <string> CSS.

تتيح وظيفة attr() المعاد تصميمها، المتوفّرة بدءًا من الإصدار 133 من Chrome، المزيد من الإمكانات. يمكنك الآن استخدام 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.