Gepubliceerd: 15 januari 2025
De opnieuw ontworpen attr() functie
Met CSS attr() kunt u de waarde van een HTML-attribuut in uw CSS gebruiken. Tot nu toe werkte attr() alleen binnen de content eigenschap van pseudo-elementen en kon waarden alleen parseren in een CSS <string> .
De opnieuw ontworpen functie attr() , beschikbaar vanaf Chrome 133, ontgrendelt meer mogelijkheden. U kunt nu attr() gebruiken met elke CSS-eigenschap, inclusief aangepaste eigenschappen, en het kan waarden ontleden in andere gegevenstypen dan <string> .
Voorbeelden
In het volgende voorbeeld gebruikt de waarde van de eigenschap color voor div de waarde van het attribuut data-color . Deze attribuutwaarde wordt geparseerd in een <color> met behulp van attr() en type() . De fallback-waarde is 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 kenmerk wordt geparseerd in 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;
}
U kunt waarden ook in een lengte ontleden door het type in te stellen op een ID die overeenkomt met een CSS-dimensie-eenheid of het % -teken. In het volgende voorbeeld wordt het data-size attribuut geparseerd in een pixelwaarde.
<div data-size="10">test</div>
div {
font-size: attr(data-size px);
}
Wanneer attr() zonder enig type wordt gebruikt, wordt het attribuut geparseerd naar een CSS-tekenreeks, wat hetzelfde is als het vorige gedrag.
Meer informatie
Vind meer informatie over attr() in de specificatie en op MDN .