Publicado em 15 de janeiro de 2025
A função attr() reprojetada
Com o CSS attr(), é possível usar o valor de um atributo HTML no CSS. Até agora, attr() só funcionava na propriedade content de pseudoelementos e só podia analisar valores em um <string> do CSS.
A função attr() redesenhada, disponível no Chrome 133, desbloqueia mais recursos. Agora é possível usar attr() com qualquer propriedade CSS, incluindo propriedades personalizadas, e analisar valores em tipos de dados diferentes de <string>.
Exemplos
No exemplo a seguir, o valor da propriedade color para div usa o valor do atributo data-color. Esse valor de atributo é analisado em um <color> usando attr() e type(). O valor padrão é definido como red.
<div data-foo="blue">test</div>
div {
color: attr(data-foo type(<color>), red);
}
No próximo exemplo, a propriedade view-transition-name é determinada pelo atributo id do elemento. O atributo é analisado em um <custom-ident>, que é o tipo necessário para view-transition-name. Sem attr(), você precisava declarar um view-transition-name para cada cartão, mas agora é possível fazer isso de uma só vez.
<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;
}
Também é possível analisar valores em um comprimento definindo o tipo como qualquer identificador que corresponda a uma unidade de dimensão CSS ou ao caractere %. No exemplo a seguir, o atributo data-size é analisado em um valor de pixel.
<div data-size="10">test</div>
div {
font-size: attr(data-size px);
}
Ao usar attr() sem nenhum tipo, o atributo é analisado em uma string CSS, que é o mesmo comportamento anterior.
Saiba mais
Saiba mais sobre attr() na especificação e no MDN.