Um recurso que está sendo enviado no Chrome 133 – que se tornará estável em 4 de fevereiro – é um attr(. Do Chrome 133 em diante, você pode usar attr()com qualquer propriedade CSS — não apenas content— e ele pode analisar valores em tipos de dados diferentes de <string>.
~
Aqui está um exemplo que analisa o data-clr atributo em um <color>.
<style>
div {
color: attr(data-clr type(<color>), red);
}
</style>
<div data-clr="blue">My text color is blue</div>
<div>My text color is red (the fallback value)</div>~
Aqui está um exemplo mais avançado que analisa um atributo em um <custom-ident>. Útil para transições de exibição quando você já deu aos elementos um id. exclusivo na marcação: basta pegar isso ide usar como o view-transition-name.
<style>
.card[id] {
view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, … */
view-transition-class: card;
}
</style>
<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>Aqui está uma demonstração ao vivo. Cada .cardelemento obtém um view-transition-namederivado do idatributo.
~
Dando suporte ao (próximo) lançamento desta função `attr()` mais poderosa, publiquei uma postagem no blog do Chrome para desenvolvedores e também atualizei o MDN: