attr()
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Hinweis:
Die attr()
-Funktion kann mit jeder CSS-Eigenschaft verwendet werden. Der Support für andere Eigenschaften als content
ist jedoch experimentell.
Die attr()
CSS Funktion wird verwendet, um den Wert eines Attributs des ausgewählten Elements abzurufen und in einem Eigenschaftswert zu verwenden, ähnlich wie die var()
Funktion einen benutzerdefinierten Eigenschaftswert ersetzt. Sie kann auch mit Pseudo-Elementen verwendet werden, in diesem Fall wird der Attributwert des ursprünglichen Elements des Pseudo-Elements zurückgegeben.
Probieren Sie es aus
Syntax
/* Basic usage */
attr(data-count)
attr(href)
/* With type */
attr(data-width px)
attr(data-size rem)
attr(data-name string)
attr(id type(<custom-ident>))
attr(data-count type(<number>))
attr(data-size type(<length> | <percentage>))
/* With fallback */
attr(data-count type(<number>), 0)
attr(data-width px, inherit)
attr(data-something, "default")
Parameter
Die Syntax der attr()
-Funktion ist wie folgt:
attr(<attr-name> <attr-type>? , <fallback-value>?)
Die Parameter sind:
<attr-name>
-
Der Attributname, dessen Wert von den ausgewählten HTML-Element(en) abgerufen werden soll.
<attr-type>
-
Gibt an, wie der Attributwert in einen CSS-Wert geparst wird. Dies kann das
string
Schlüsselwort, einetype()
Funktion oder eine CSS-Dimensionseinheit sein. Wenn es weggelassen wird, ist der Standardwertstring
.-
Das
string
Schlüsselwort parst den Wert in einen CSS-String.cssattr(data-name string, "stranger")
-
Die
type()
Funktion nimmt ein<syntax>
als Argument, das angibt, in welchen Datentyp der Wert geparst werden soll. Das<syntax>
kann<angle>
,<color>
,<custom-ident>
,<image>
,<integer>
,<length>
,<length-percentage>
,<number>
,<percentage>
,<resolution>
,<string>
,<time>
,<transform-function>
oder eine Kombination daraus sein.cssattr(id type(<custom-ident>), none) attr(data-count type(<number>), 0)
Um mehrere Typen zu akzeptieren, listen Sie alle erlaubten
<syntax>
-Elemente in dertype()
Funktion auf, getrennt durch ein|
.cssattr(data-size type(<length> | <percentage>), 0px)
Aus Sicherheitsgründen ist
<url>
als<syntax>
nicht zulässig. -
Der
<attr-unit>
-Bezeichner gibt die Einheit an, die ein numerischer Wert haben soll (falls vorhanden). Es kann das%
Zeichen (Prozentsatz) oder eine CSS-Distanz-Einheit wiepx
,rem
,deg
,s
usw. sein.cssattr(data-size rem) attr(data-width px, inherit) attr(data-rotation deg)
-
<fallback-value>
-
Der Wert, der verwendet werden soll, wenn das angegebene Attribut fehlt oder einen ungültigen Wert enthält.
Rückgabewert
Der Rückgabewert von attr()
ist der Wert des HTML-Attributs, dessen Name <attr-name>
ist, geparst als der angegebene <attr-type>
oder als CSS-String geparst.
Wenn ein <attr-type>
gesetzt ist, wird attr()
versuchen, das Attribut in den angegebenen <attr-type>
zu parsen und zurückzugeben. Wenn das Attribut nicht in den angegebenen <attr-type>
geparst werden kann, wird stattdessen der <fallback-value>
zurückgegeben. Wenn kein <attr-type>
gesetzt ist, wird das Attribut in einen CSS-String geparst.
Wenn kein <fallback-value>
gesetzt ist, wird der Rückgabewert standardmäßig ein leerer String sein, wenn kein <attr-type>
gesetzt ist, oder der garantiert ungültige Wert, wenn ein <attr-type>
gesetzt ist.
Beschreibung
Einschränkungen und Sicherheit
Die attr()
-Funktion kann auf Attribute verweisen, die vom Seitenautor niemals für das Styling vorgesehen waren und möglicherweise sensible Informationen enthalten (zum Beispiel ein Sicherheitstoken, das von Skripten auf der Seite verwendet wird). Im Allgemeinen ist dies in Ordnung, kann jedoch ein Sicherheitsrisiko darstellen, wenn es in URLs verwendet wird. Sie können daher attr()
nicht verwenden, um URLs dynamisch zu konstruieren.
<!-- This won't work! -->
<span data-icon="https://example.org/icons/question-mark.svg">help</span>
<style>
span[data-icon] {
background-image: url(attr(data-icon));
}
</style>
Werte, die attr()
verwenden, werden als "attr()
-verfärbt" markiert. Die Verwendung eines attr()
-verfärbten Wertes als oder in einem <url>
macht eine Deklaration "ungültig zur Berechnungszeit" oder kurz IACVT.
Rückwärtskompatibilität
Im Allgemeinen ist die moderne attr()
-Syntax rückwärtskompatibel, da die alte Verwendungsmethode — ohne ein <attr-type>
anzugeben — genauso funktioniert wie zuvor. attr(data-attr)
in Ihrem Code zu haben, ist dasselbe wie attr(data-attr type(<string>))
oder das einfachere attr(data-attr string))
.
Es gibt jedoch zwei Grenzfälle, in denen sich die moderne attr()
-Syntax anders verhält als die alte Syntax.
Im folgenden Snippet verwerfen Browser, die die moderne attr()
-Syntax nicht unterstützen, die zweite Deklaration, weil sie sie nicht parsen können. Das Ergebnis in diesen Browsern ist "Hello World"
.
<div text="Hello"></div>
div::before {
content: attr(text) " World";
}
div::before {
content: attr(text) 1px;
}
In Browsern mit Unterstützung für die moderne Syntax wird die Ausgabe … nichts sein. Diese Browser parsen die zweite Deklaration erfolgreich, aber da sie ein ungültiger Inhalt für die content
-Eigenschaft ist, wird die Deklaration "ungültig zur Berechnungszeit" oder IACVT.
Um dieses Art von Situation zu vermeiden, wird Feature-Erkennung empfohlen.
Ein zweiter Grenzfall ist der folgende:
<div id="parent"><div id="child" data-attr="foo"></div></div>
#parent {
--x: attr(data-attr);
}
#child::before {
content: var(--x);
}
Browser ohne Unterstützung für die moderne Syntax zeigen den Text "foo"
an. In Browsern mit moderner attr()
-Unterstützung gibt es keine Ausgabe.
Dies liegt daran, dass attr()
— ähnlich wie benutzerdefinierte Eigenschaften, die die var()
-Funktion verwenden — zur Berechnungszeit ersetzt werden. Mit dem modernen Verhalten versucht --x
zuerst, das data-attr
-Attribut vom #parent
-Element zu lesen, was zu einem leeren String führt, da kein solches Attribut auf #parent
vorhanden ist. Dieser leere String wird dann vom #child
-Element geerbt, was zu einer content: ;
-Deklaration führt.
Um diese Art von Situation zu vermeiden, übergeben Sie keine geerbten attr()
-Werte an Kinder, es sei denn, dies wird ausdrücklich gewünscht.
Feature-Erkennung
Sie können die Unterstützung für moderne attr()
-Syntax mit der @supports
Regel erkennen. Versuchen Sie im Test, erweiterte attr()
an eine (nicht benutzerdefinierte) CSS-Eigenschaft zuzuweisen.
Zum Beispiel:
@supports (x: attr(x type(*))) {
/* Browser has modern attr() support */
}
@supports not (x: attr(x type(*))) {
/* Browser does not have modern attr() support */
}
Wir können denselben Check in JavaScript mit CSS.supports()
durchführen:
if (CSS.supports("x: attr(x type(*))")) {
/* Browser has modern attr() support */
}
if (!CSS.supports("x: attr(x type(*))")) {
/* Browser does not have modern attr() support */
}
Formale Syntax
<attr()> =
attr( <attr-name> <attr-type>? , <declaration-value>? )
<attr-name> =
[ <ident-token>? '|' ]? <ident-token>
<attr-type> =
type( <syntax> ) |
string |
<attr-unit>
<syntax> =
'*' |
<syntax-component> [ <syntax-combinator> <syntax-component> ]* |
<syntax-string>
<syntax-component> =
<syntax-single-component> <syntax-multiplier>? |
'<' transform-list '>'
<syntax-combinator> =
'|'
<syntax-string> =
<string>
<syntax-single-component> =
'<' <syntax-type-name> '>' |
<ident>
<syntax-multiplier> =
'#' |
'+'
<syntax-type-name> =
angle |
color |
custom-ident |
image |
integer |
length |
length-percentage |
number |
percentage |
resolution |
string |
time |
url |
transform-function
Beispiele
content-Eigenschaft
In diesem Beispiel fügen wir den Wert des data-foo
data-*
globalen Attributs zum Inhalt des <p>
Elements hinzu.
HTML
<p data-foo="hello">world</p>
CSS
[data-foo]::before {
content: attr(data-foo) " ";
}
Ergebnis
Verwendung eines Fallback-Wertes
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
In diesem Beispiel fügen wir den Wert des data-browser
data-*
globalen Attributs zum <p>
Element hinzu. Wenn das data-browser
-Attribut beim <p>
Element fehlt, verwenden wir als Fallback-Wert "Unbekannt".
HTML
<p data-browser="Firefox">My favorite browser is:</p>
<p>Your favorite browser is:</p>
CSS
p::after {
content: " " attr(data-browser, "Unknown");
color: tomato;
}
Ergebnis
color-Wert
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
In diesem Beispiel setzen wir den CSS-Wert von background-color
auf den Wert des data-background
data-*
globalen Attributs, das dem <div>
Element zugewiesen ist.
HTML
<div class="background" data-background="lime">
background expected to be red if your browser does not support advanced usage
of attr()
</div>
CSS
.background {
background-color: red;
}
.background[data-background] {
background-color: attr(data-background type(<color>), red);
}
Ergebnis
Verwendung von Dimensions-Einheiten
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
In diesem Beispiel wird das data-rotation
-Attribut in eine deg
-Einheit geparst, die die Drehung des Elements angibt.
HTML
<div data-rotation="-3">I am rotated by -3 degrees</div>
<div data-rotation="2">And I by 2 degrees</div>
<div>And so am I, using the fallback value of 1.5deg</div>
CSS
div {
width: fit-content;
transform-origin: 50% 50%;
rotate: attr(data-rotation deg, 1.5deg);
}
Ergebnis
Parsen von attr()
-Werten als <custom-ident>
s
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
In diesem Beispiel werden die Werte für die view-transition-name
Eigenschaft aus dem id
-Attribut des Elements abgeleitet. Das Attribut wird in ein <custom-ident>
geparst, was von view-transition-name
als Wert akzeptiert wird.
Die resultierenden Werte für view-transition-name
sind card-1
, card-2
, card-3
, usw.
HTML
Das HTML enthält vier Karten mit unterschiedlichen id
-Attributen und einen "Karten mischen" <button>
, der die Karten mischt.
<div class="cards">
<div class="card" id="card-1">1</div>
<div class="card" id="card-2">2</div>
<div class="card" id="card-3">3</div>
<div class="card" id="card-4">4</div>
</div>
<button>Shuffle cards</button>
CSS
Die Karten sind in einem flex Container angeordnet:
.cards {
display: flex;
flex-direction: row;
gap: 1em;
padding: 1em;
}
Bei jeder Karte holt die attr()
-Funktion das id
-Attribut und parst es in ein <custom-ident>
, das als Wert für die view-transition-name
Eigenschaft verwendet wird. Wenn auf einer Karte kein id
gesetzt ist, wird stattdessen der Fallback-Wert none
verwendet.
.card {
view-transition-name: attr(id type(<custom-ident>), none);
view-transition-class: card;
}
JavaScript
Wenn der <button>
gedrückt wird, werden die Karten gemischt. Dies wird erreicht, indem die Reihenfolge eines Arrays mit Referenzen zu allen Karten zufällig neu geordnet wird und dann die order
Eigenschaft jeder Karte auf ihren neuen Array-Index aktualisiert wird.
Um jede Karte zu ihrer neuen Position zu animieren, werden View Transitions verwendet. Dies wird erreicht, indem das order
-Update in einem Aufruf von document.startViewTransition
umschlossen wird.
const shuffle = (array) => {
for (let i = array.length - 1; i >= 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
};
document.querySelector("button").addEventListener("click", (e) => {
const $cards = Array.from(document.querySelectorAll(".card"));
shuffle($cards);
document.startViewTransition(() => {
$cards.forEach(($card, i) => {
$card.style.setProperty("order", i);
});
});
});
Ergebnis
Spezifikationen
Specification |
---|
CSS Values and Units Module Level 5 # attr-notation |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
attr() | ||||||||||||
<fallback> | ||||||||||||
<type-or-unit> | ||||||||||||
<angle> | ||||||||||||
<color> | ||||||||||||
<frequency> | ||||||||||||
<integer> | ||||||||||||
<length> | ||||||||||||
<number> | ||||||||||||
<percentage> | ||||||||||||
<time> | ||||||||||||
<url> |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.