Mise à niveau de la fonction CSS attr()

Bramus

Publié le 15 janvier 2025

Fonction attr() repensée

Avec le CSS attr(), vous pouvez utiliser la valeur d'un attribut HTML dans votre CSS. Jusqu'à présent, attr() ne fonctionnait que dans la propriété content des pseudo-éléments et ne pouvait analyser que des valeurs dans un <string> CSS.

La fonction attr() repensée, disponible à partir de Chrome 133, offre plus de fonctionnalités. Vous pouvez désormais utiliser attr() avec n'importe quelle propriété CSS, y compris les propriétés personnalisées. Il peut analyser les valeurs en types de données autres que <string>.

Exemples

Dans l'exemple suivant, la valeur de la propriété color pour div utilise la valeur de l'attribut data-color. La valeur de cet attribut est analysée dans un <color> à l'aide de attr() et type(). La valeur de remplacement est définie sur red.

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

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

Dans l'exemple suivant, la propriété view-transition-name est déterminée par l'attribut id de l'élément. L'attribut est analysé en <custom-ident>, qui est le type requis pour view-transition-name. Sans attr(), vous deviez déclarer un view-transition-name pour chaque fiche, alors que vous pouvez désormais le faire en une seule fois.

<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;
}

Vous pouvez également analyser des valeurs en longueur en définissant le type sur n'importe quel identifiant correspondant à une unité de dimension CSS ou au caractère %. Dans l'exemple suivant, l'attribut data-size est analysé en valeur de pixel.

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

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

Lorsque vous utilisez attr() sans type, l'attribut est analysé en tant que chaîne CSS, ce qui correspond au comportement précédent.

En savoir plus

Pour en savoir plus sur attr(), consultez la spécification et MDN.