Ulepszona funkcja CSS attr()

Bramus

Data publikacji: 15 stycznia 2025 r.

Za pomocą CSS attr() możesz użyć wartości atrybutu HTML w CSS. Do tej pory funkcja attr() działała tylko w ramach właściwości content pseudoelementów i mogła analizować wartości tylko w arkuszu stylów CSS <string>.

Przeprojektowana funkcja attr(), dostępna w Chrome 133, odblokowuje więcej możliwości. Teraz możesz używać funkcji attr() z dowolną właściwością CSS, w tym z właściwościami niestandardowymi, i może ona analizować wartości w typach danych innych niż <string>.

Przykłady

W poniższym przykładzie wartość właściwości color dla div korzysta z wartości atrybutu data-color. Wartość tego atrybutu jest analizowana w <color> za pomocą attr() i type(). Wartość rezerwowa jest ustawiona na red.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

W następnym przykładzie właściwość view-transition-name jest określana przez atrybut id elementu. Atrybut jest analizowany w <custom-ident>, który jest wymaganym typem dla view-transition-name. Bez attr() trzeba było deklarować view-transition-name dla każdej karty, a teraz można to zrobić za jednym razem.

<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;
}

Możesz też analizować wartości pod kątem długości, ustawiając typ na dowolny identyfikator pasujący do jednostki wymiaru CSS lub znaku %. W poniższym przykładzie atrybut data-size jest analizowany jako wartość piksela.

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

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

Jeśli używasz attr() bez żadnego typu, atrybut jest analizowany jako ciąg CSS, co jest zgodne z poprzednim działaniem.

Więcej informacji

Więcej informacji o attr() znajdziesz w specyfikacji i na stronie MDN.