Veröffentlicht: 15. Januar 2025
Mit CSS attr() können Sie den Wert eines HTML-Attributs in Ihrem CSS verwenden. Bisher funktionierte attr() nur innerhalb der content-Eigenschaft von Pseudoelementen und konnte nur Werte in ein CSS-<string> parsen.
Die neu gestaltete Funktion attr(), die ab Chrome 133 verfügbar ist, bietet mehr Möglichkeiten. Sie können attr() jetzt mit jeder CSS-Eigenschaft verwenden, einschließlich benutzerdefinierter Eigenschaften. Außerdem können Werte in andere Datentypen als <string> geparst werden.
Beispiele
Im folgenden Beispiel wird für den Wert der Property color für div der Wert aus dem Attribut data-color verwendet. Dieser Attributwert wird mit attr() und type() in ein <color> geparst. Der Fallback-Wert wird auf red festgelegt.
<div data-foo="blue">test</div>
div {
color: attr(data-foo type(<color>), red);
}
Im nächsten Beispiel wird die view-transition-name-Eigenschaft durch das id-Attribut des Elements bestimmt. Das Attribut wird in ein <custom-ident> geparst, das der erforderliche Typ für view-transition-name ist. Ohne attr() mussten Sie für jede Karte eine view-transition-name deklarieren. Jetzt können Sie das in einem Schritt erledigen.
<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;
}
Sie können auch Werte in eine Länge parsen, indem Sie den Typ auf eine beliebige Kennung festlegen, die einer CSS-Einheit für Dimensionen oder dem Zeichen % entspricht. Im folgenden Beispiel wird das Attribut data-size in einen Pixelwert geparst.
<div data-size="10">test</div>
div {
font-size: attr(data-size px);
}
Wenn Sie attr() ohne Typ verwenden, wird das Attribut in einen CSS-String geparst. Das entspricht dem bisherigen Verhalten.
Weitere Informationen
Weitere Informationen zu attr() finden Sie in der Spezifikation und auf MDN.