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

Bramus

تاريخ النشر: 15 كانون الثاني (يناير) 2025

دالة attr() التي تمت إعادة تصميمها

باستخدام 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.