Publicado: 15 de enero de 2025
Con CSS attr(), puedes usar el valor de un atributo HTML en tu CSS. Hasta ahora, attr() solo funcionaba dentro de la propiedad content de los seudoelementos y solo podía analizar valores en un <string> de CSS.
La función attr() rediseñada, disponible a partir de Chrome 133, desbloquea más capacidades. Ahora puedes usar attr() con cualquier propiedad de CSS, incluidas las propiedades personalizadas, y puede analizar valores en tipos de datos que no sean <string>.
Ejemplos
En el siguiente ejemplo, el valor de la propiedad color para div usa el valor del atributo data-color. El valor de este atributo se analiza en un <color> con attr() y type(). El valor de resguardo se establece en red.
<div data-foo="blue">test</div>
div {
color: attr(data-foo type(<color>), red);
}
En el siguiente ejemplo, la propiedad view-transition-name se determina según el atributo id del elemento. El atributo se analiza en un <custom-ident>, que es el tipo requerido para view-transition-name. Sin attr(), tenías que declarar un view-transition-name para cada tarjeta, mientras que ahora puedes hacerlo de una sola 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;
}
También puedes analizar valores en una longitud configurando el tipo en cualquier identificador que coincida con una unidad de dimensión de CSS o el carácter %. En el siguiente ejemplo, el atributo data-size se analiza en un valor de píxel.
<div data-size="10">test</div>
div {
font-size: attr(data-size px);
}
Cuando se usa attr() sin ningún tipo, se analiza el atributo como una cadena de CSS, que es el mismo comportamiento anterior.
Más información
Encontrarás más información sobre attr() en la especificación y en MDN.