Gepubliceerd: 15 januari 2025
Met CSS attr() kun je de waarde van een HTML-attribuut in je CSS gebruiken. Tot nu toe werkte attr() alleen binnen de content eigenschap van pseudo-elementen en kon het alleen waarden omzetten naar een CSS <string> .
De vernieuwde attr() functie , beschikbaar vanaf Chrome 133, biedt meer mogelijkheden. Je kunt attr() nu gebruiken met elke CSS-eigenschap, inclusief aangepaste eigenschappen, en de functie kan waarden omzetten naar andere gegevenstypen dan <string> .
Voorbeelden
In het volgende voorbeeld gebruikt de waarde van de eigenschap color voor div de waarde uit het data-color attribuut. Deze attribuutwaarde wordt omgezet in een <color> met behulp van attr() en type() . De terugvalwaarde wordt ingesteld op red .
<div data-foo="blue">test</div>
div {
color: attr(data-foo type(<color>), red);
}
In het volgende voorbeeld wordt de eigenschap view-transition-name bepaald door het id attribuut van het element. Het attribuut wordt geparseerd naar een <custom-ident> , wat het vereiste type is voor view-transition-name . Zonder attr() moest je voor elke kaart een view-transition-name declareren, terwijl je dat nu in één keer kunt doen.
<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;
}
Je kunt waarden ook omzetten naar een lengte door het type in te stellen op een identifier die overeenkomt met een CSS-afmetingseenheid of het teken % . In het volgende voorbeeld wordt het attribuut data-size omgezet naar een pixelwaarde.
<div data-size="10">test</div>
div {
font-size: attr(data-size px);
}
Wanneer attr() zonder type wordt gebruikt, wordt het attribuut geparseerd naar een CSS-string, wat hetzelfde gedrag is als voorheen.
Leer meer
Meer informatie over attr() is te vinden in de specificatie en op MDN .