Fecha de publicación: 15 de enero de 2025
La función attr() rediseñada
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 pseudoelementos y solo podía analizar valores en un <string> de CSS.
La función attr() rediseñada, disponible a partir de Chrome 133, brinda más capacidades. Ahora puedes usar attr() con cualquier propiedad CSS, incluidas las propiedades personalizadas, y puede analizar valores en tipos de datos distintos de <string>.
Ejemplos
En el siguiente ejemplo, el valor de la propiedad color para div usa el valor del atributo data-color. Este valor de atributo se analiza en una <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 está determinada por el atributo id del elemento. El atributo se analiza en un <custom-ident>, que es el tipo requerido para view-transition-name. Sin attr(), debías 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 si estableces el tipo en cualquier identificador que coincida con una unidad de dimensión CSS o el carácter %. En el siguiente ejemplo, el atributo data-size se analiza en un valor de píxeles.
<div data-size="10">test</div>
div {
font-size: attr(data-size px);
}
Cuando usas attr() sin ningún tipo, analiza el atributo en una cadena de CSS, que es igual que el comportamiento anterior.
Más información
Obtén más información sobre attr() en la especificación y en MDN.