Veröffentlicht: 15. Januar 2025
Die überarbeitete attr()-Funktion
Mit CSS attr() können Sie den Wert eines HTML-Attributs in Ihrem CSS verwenden. Bisher konnte attr() nur innerhalb des Attributs content von Pseudoelementen verwendet werden und Werte nur in eine CSS-<string> geparst werden.
Die neu gestaltete attr()-Funktion, die seit Chrome 133 verfügbar ist, bietet mehr Möglichkeiten. Sie können attr() jetzt mit jeder CSS-Property verwenden, einschließlich benutzerdefinierter Properties. 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>-Element geparst. Der Fallback-Wert ist 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> analysiert, was 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 auf einmal tun.
<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 Werte auch in eine Länge parsen, indem Sie den Typ auf eine beliebige Kennung festlegen, die einer CSS-Dimensionseinheit 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 im MDN.