Ulepszona funkcja CSS attr()

Bramus

Data publikacji: 15 stycznia 2025 r.

Zmieniona funkcja attr()

Dzięki atrybucie CSS attr() możesz używać w CSS wartości atrybutu HTML. Do tej pory funkcja attr() działała tylko w ramach właściwości content pseudoelementów i mogła tylko analizować wartości w elementach <string> w CSS.

Zmieniona funkcja attr(), dostępna od wersji 133 Chrome, oferuje więcej możliwości. Teraz możesz używać attr() z dowolną właściwością CSS, w tym z właściwościami niestandardowymi, a wartości mogą być interpretowane jako typy danych inne niż <string>.

Przykłady

W poniższym przykładzie wartość właściwości color dla elementu div korzysta z wartości atrybutu data-color. Ta wartość atrybutu jest analizowana w <color> za pomocą attr() i type(). Wartość zastępcza to red.

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

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

W tym przykładzie właściwość view-transition-name jest określana przez atrybut id elementu. Atrybut jest analizowany jako <custom-ident>, który jest wymaganym typem dla view-transition-name. Bez attr() musisz deklarować view-transition-name dla każdej karty, a teraz możesz to zrobić 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;
}

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

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

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

Gdy używasz atrybutu attr() bez podawania typu, jest on parsowany jako ciąg znaków CSS, co jest zgodne z poprzednim działaniem.

Więcej informacji

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