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, aber die Unterstützung für andere Eigenschaften als content
ist experimentell.
Die attr()
CSS Funktion wird verwendet, um den Wert eines Attributs des ausgewählten Elements abzurufen und ihn in einem Eigenschaftswert zu verwenden, ähnlich wie die var()
-Funktion einen benutzerdefinierten Eigenschaftswert ersetzt. Sie kann auch mit Pseudoelementen verwendet werden, in diesem Fall wird der Attributwert des Ursprungs-Elements des Pseudoelements zurückgegeben.
Probieren Sie es aus
blockquote {
margin: 1em 0;
}
blockquote::after {
display: block;
content: " (source: " attr(cite) ") ";
color: hotpink;
}
<blockquote cite="https://mozilla.org/en-US/about/">
Mozilla makes browsers, apps, code and tools that put people before profit.
</blockquote>
<blockquote cite="https://web.dev/about/">
Google believes in an open, accessible, private, and secure web.
</blockquote>
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 vom ausgewählten HTML-Element oder den ausgewählten HTML-Elementen abgerufen werden soll.
<attr-type>
-
Gibt an, wie der Attributwert in einen CSS-Wert geparst wird. Dies kann das Schlüsselwort
string
, einetype()
-Funktion oder eine CSS-Dimensionseinheit sein. Wenn es weggelassen wird, ist der Standardwertstring
.-
Das Schlüsselwort
string
parst den Wert in eine CSS-Zeichenkette.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 davon sein.cssattr(id type(<custom-ident>), none) attr(data-count type(<number>), 0)
Um mehrere Typen zu akzeptieren, listen Sie alle erlaubten
<syntax>
in dertype()
-Funktion durch ein|
getrennt auf.cssattr(data-size type(<length> | <percentage>), 0px)
Aus Sicherheitsgründen ist
<url>
nicht als<syntax>
erlaubt. -
Der
<attr-unit>
Identifier gibt die Einheit an, die ein numerischer Wert haben sollte (falls vorhanden). Es kann das%
-Zeichen (Prozent) oder eine CSS-Distanzeinheit 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 wird, 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>
als <attr-type>
oder als CSS-Zeichenkette geparst ist.
Wenn ein <attr-type>
gesetzt ist, wird attr()
versuchen, das Attribut in den festgelegten <attr-type>
zu parsen und es zurückzugeben. Falls das Attribut nicht in den angegebenen <attr-type>
geparst werden kann, wird stattdessen der <fallback-value>
zurückgegeben. Ist kein <attr-type>
festgelegt, wird das Attribut in eine CSS-Zeichenkette geparst.
Wenn kein <fallback-value>
festgelegt ist, beträgt der Rückgabewert standardmäßig eine leere Zeichenkette, wenn kein <attr-type>
festgelegt ist, oder den garantiert ungültigen Wert, wenn ein <attr-type>
festgelegt ist.
Beschreibung
Einschränkungen und Sicherheit
Die attr()
-Funktion kann auf Attribute verweisen, die vom Seitenautor nie 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, aber es kann ein Sicherheitsrisiko darstellen, wenn es in URLs verwendet wird. Daher können Sie attr()
nicht verwenden, um URLs dynamisch zu erstellen.
<!-- 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()
-gefährdet markiert. Die Verwendung eines attr()
-gefährdeten Wertes als oder in einem <url>
macht eine Deklaration "invalid at computed value time" oder kurz IACVT genannt.
Abwärtskompatibilität
Im Allgemeinen ist die moderne attr()
-Syntax abwärtskompatibel, da die alte Anwendungsweise — ohne Angabe eines <attr-type>
— sich wie zuvor verhält. attr(data-attr)
in Ihrem Code ist dasselbe wie attr(data-attr type(<string>))
oder das einfachere attr(data-attr string)
.
Es gibt jedoch zwei Randfälle, in denen die moderne attr()
-Syntax anders als die alte Syntax funktioniert.
Im folgenden Beispiel verwerfen Browser, die die moderne attr()
-Syntax nicht unterstützen, die zweite Deklaration, weil sie nicht geparst werden kann. 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 werden die zweite Deklaration erfolgreich parsen, aber da sie ungültige Inhalte für die content
-Eigenschaft ist, wird die Deklaration "invalid at computed value time" oder kurz IACVT.
Um solche Situationen zu vermeiden, wird eine Feature-Erkennung empfohlen.
Ein zweiter Randfall 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 moderne Syntax zeigen den Text "foo"
an. In Browsern mit moderner attr()
-Unterstützung gibt es keine Ausgabe.
Das liegt daran, dass attr()
— ähnlich wie benutzerdefinierte Eigenschaften, die die var()
-Funktion verwenden — zur Berechnungszeit der Werte ersetzt werden. Mit dem modernen Verhalten versucht --x
zuerst, das data-attr
-Attribut vom #parent
-Element zu lesen, was zu einer leeren Zeichenkette führt, da es kein solches Attribut auf #parent
gibt. Diese leere Zeichenkette wird dann vom #child
-Element geerbt, was in einer Deklaration content: ;
resultiert.
Um solche Situationen zu vermeiden, sollten Sie keine geerbten attr()
-Werte an Kinderweiteren, es sei denn, Sie wollen dies explizit.
Feature-Erkennung
Sie können die Unterstützung für modernere attr()
-Syntax mit der @supports
At-Regel erkennen. Im Test versuchen Sie, fortgeschrittene attr()
einer (nicht benutzerdefinierten) 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 die gleiche Überprüfung 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> ) |
raw-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
globalen Attributs data-*
zum Inhalt des <p>
-Elements hinzu.
HTML
<p data-foo="hello">world</p>
CSS
[data-foo]::before {
content: attr(data-foo) " ";
}
Ergebnis
Verwendung eines Ersatzwertes
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
In diesem Beispiel hängen wir den Wert des data-browser
globalen Attributs data-*
an das <p>
-Element an. Wenn das data-browser
-Attribut am <p>
-Element fehlt, verwenden wir den Ersatzzwert "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
globalen Attributs data-*
, 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 Dimensionseinheiten
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 Rotation 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 view-transition-name
als Wert akzeptiert.
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 "Shuffle cards" <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;
}
Auf jeder Karte holt die attr()
-Funktion das id
-Attribut ab und parst es in ein <custom-ident>
, das als Wert für die view-transition-name
-Eigenschaft verwendet wird. Wenn keine id
auf einer Karte festgelegt ist, wird stattdessen der Ersatzzwert 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 geschieht, indem die Reihenfolge eines Arrays mit Referenzen zu allen Karten randomisiert und die order
-Eigenschaft jeder Karte auf ihren neuen Array-Indexposition aktualisiert wird.
Um jede Karte zu ihrer neuen Position zu animieren, werden Ansichtsübergänge verwendet. Dies geschieht, 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 |