attr()
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 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 in einem Eigenschaftswert zu verwenden, ähnlich wie die var()
-Funktion einen benutzerdefinierten Eigenschaftswert ersetzt. Sie kann auch mit Pseudo-Elementen verwendet werden, wobei der Attributswert des ursprünglichen Elements des Pseudo-Elements zurückgegeben wird.
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 raw-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
Der 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 werden soll. Dies kann das
raw-string
Schlüsselwort, einetype()
-Funktion oder eine CSS-Dimensionseinheit sein (angegeben durch einen<attr-unit>
-Bezeichner). Wenn weggelassen, wirdraw-string
standardmäßig verwendet.raw-string
-
Das
raw-string
Schlüsselwort bewirkt, dass der literale Wert des Attributs als Wert eines CSS-Strings behandelt wird, ohne dass CSS-Parsing durchgeführt wird (einschließlich CSS-Escapes, Leerzeichenauslassung, Kommentare usw.). Der<fallback-value>
wird nur verwendet, wenn das Attribut weggelassen wird; das Angeben eines leeren Werts löst den Fallback nicht aus.cssattr(data-name raw-string, "stranger")
Hinweis: Dieses Schlüsselwort wurde ursprünglich in Chromium-Browsern als
string
benannt und unterstützt. Beide Schlüsselwörter werden kurzzeitig unterstützt, um die Abwärtskompatibilität zu gewährleisten. type()
-
Die
type()
-Funktion nimmt einen<syntax>
als Argument, das angibt, in welchen Datentyp der Wert geparst werden soll.Hinweis: Aus Sicherheitsgründen ist
<url>
nicht alsattr()
-Datentyp erlaubt. <attr-unit>
-
Der
<attr-unit>
-Bezeichner gibt an, welche Einheit 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 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>
ist, geparst als der angegebene <attr-type>
oder geparst als ein CSS-String.
Wenn ein <attr-type>
festgelegt ist, versucht attr()
, das Attribut in diesen spezifizierten <attr-type>
zu parsen und gibt es zurück. Wenn das Attribut nicht in den angegebenen <attr-type>
geparst werden kann, wird der <fallback-value>
stattdessen zurückgegeben. Wenn kein <attr-type>
festgelegt ist, wird das Attribut in einen CSS-String geparst.
Wenn kein <fallback-value>
festgelegt ist, wird der Rückgabewert standardmäßig zu einem leeren String, wenn kein <attr-type>
festgelegt ist, oder zum garantiert ungültigen Wert, wenn ein <attr-type>
festgelegt ist.
Beschreibung
>Einschränkungen und Sicherheit
Die attr()
-Funktion kann auf Attribute zugreifen, die nie zur Verwendung beim Styling vorgesehen waren und möglicherweise sensible Informationen enthalten (zum Beispiel ein Sicherheitstoken, das von Skripten auf der Seite verwendet wird). Im Allgemeinen ist das in Ordnung, kann jedoch zu einer Sicherheitsbedrohung werden, 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>
span[data-icon] {
background-image: url(attr(data-icon));
}
Werte, die attr()
verwenden, werden als attr()
-verfälscht markiert. Die Verwendung eines attr()
-verfälschten Werts als oder in einem <url>
macht eine Deklaration zu einer "invalid at computed value time" oder IACVT für kurz.
Abwärtskompatibilität
Im Allgemeinen ist die moderne attr()
-Syntax abwärtskompatibel, da die alte Verwendungsmethode – ohne Angabe eines <attr-type>
– sich genauso verhält wie zuvor. Das Schreiben von attr(data-attr)
in Ihrem Code ist dasselbe wie das Schreiben von attr(data-attr type(<string>))
oder das einfachere attr(data-attr string)
.
Es gibt jedoch zwei Randfä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, da 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 weil es sich um ungültigen Inhalt für die content
-Eigenschaft handelt, wird die Deklaration zu "invalid at computed value time" oder IACVT für kurz.
Um diese Art von Situation zu vermeiden, wird 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 – zum berechneten Wert-Zeitpunkt ersetzt wird. Mit dem modernen Verhalten versucht --x
zuerst, das data-attr
-Attribut vom #parent
-Element zu lesen, was zu einem leeren String führt, da es kein solches Attribut auf #parent
gibt. Dieser leere String wird dann vom #child
-Element geerbt, was zu einer content: ;
-Deklaration führt.
Um diese Art von Situation zu verhindern, sollten Sie keine geerbten attr()
-Werte an Kinder weitergeben, es sei denn, Sie möchten dies ausdrücklich.
Feature-Erkennung
Sie können die Unterstützung der modernen attr()
-Syntax mit der @supports
-at-regel erkennen. Im Test versuchen Sie, eine erweiterte attr()
-Deklaration 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 denselben Test 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 |
number |
<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 dem Inhalt des <p>
-Elements voran.
HTML
<p data-foo="hello">world</p>
CSS
[data-foo]::before {
content: attr(data-foo) " ";
}
Ergebnis
Verwenden eines Fallback-Werts
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 dem <p>
-Element hinzu. Wenn das data-browser
-Attribut fehlt, fügen wir den Fallback-Wert "Unknown" hinzu.
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
Farbwert
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
Verwenden 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 Drehung des Elements spezifiziert.
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 vom id
-Attribut des Elements abgeleitet. Das Attribut wird in einen <custom-ident>
geparst, der als Wert für view-transition-name
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 "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 und parst es in einen <custom-ident>
, der als Wert für die view-transition-name
-Eigenschaft verwendet wird. Wenn keine id
auf einer Karte 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 geschieht durch das Zufälligmachen der Reihenfolge eines Arrays, das Referenzen zu allen Karten enthält, und dann das Aktualisieren der order
-Eigenschaft jeder Karte auf ihre neue Array-Indexposition.
Um jede Karte zu ihrer neuen Position zu animieren, werden View Transitions verwendet. Dies geschieht durch Einwickeln der order
-Aktualisierung in einen Aufruf von document.startViewTransition
.
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
Loading…