attr()

attribute-name

Der Name eines Attributs auf dem HTML-Element, das im CSS referenziert wird.

<type-or-unit>

Ein Schlüsselwort, das entweder den Typ des Attributwerts oder seine Einheit repräsentiert, da in HTML einige Attribute implizite Einheiten haben. Wenn die Verwendung von <type-or-unit> als Wert für das gegebene Attribut ungültig ist, wird der attr()-Ausdruck ebenfalls ungültig. Wenn weggelassen, ist der Standardwert string. Die Liste der gültigen Werte lautet:

string

Der Attributwert wird als CSS <string> behandelt. Er wird NICHT erneut geparst, und insbesondere werden die Zeichen unverändert verwendet, anstatt dass CSS-Escapes in andere Zeichen umgewandelt werden.

Standardwert: ein leerer String.

color

Der Attributwert wird als Hash (3- oder 6-Werte-Hash) oder als Schlüsselwort geparst. Er muss ein gültiger CSS <string>-Wert sein. Führende und nachfolgende Leerzeichen werden entfernt.

Standardwert: currentcolor.

url

Der Attributwert wird als String geparst, der in einer CSS url()-Funktion verwendet wird. Relative URLs werden relativ zum ursprünglichen Dokument aufgelöst, nicht relativ zum Stylesheet. Führende und nachfolgende Leerzeichen werden entfernt.

Standardwert: die URL about:invalid, die auf ein nicht existierendes Dokument mit einem generischen Fehlerzustand zeigt.

integer

Der Attributwert wird als CSS <integer> geparst. Wenn er ungültig ist, also keine ganze Zahl oder außerhalb des akzeptierten Bereichs der CSS-Eigenschaft, wird der Standardwert verwendet. Führende und nachfolgende Leerzeichen werden entfernt.

Standardwert: 0, oder, wenn 0 kein gültiger Wert für die Eigenschaft ist, der Mindestwert der Eigenschaft.

number

Der Attributwert wird als CSS <number> geparst. Wenn er ungültig ist, also keine Zahl oder außerhalb des akzeptierten Bereichs der CSS-Eigenschaft, wird der Standardwert verwendet. Führende und nachfolgende Leerzeichen werden entfernt.

Standardwert: 0, oder, wenn 0 kein gültiger Wert für die Eigenschaft ist, der Mindestwert der Eigenschaft.

length

Der Attributwert wird als CSS <length>-Dimension geparst, einschließlich der Einheit (z.B. 12.5em). Wenn er ungültig ist, also keine Länge oder außerhalb des akzeptierten Bereichs der CSS-Eigenschaft, wird der Standardwert verwendet. Wenn die angegebene Einheit eine relative Länge ist, rechnet attr() sie in eine absolute Länge um. Führende und nachfolgende Leerzeichen werden entfernt.

Standardwert: 0, oder, wenn 0 kein gültiger Wert für die Eigenschaft ist, der Mindestwert der Eigenschaft.

em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, oder pc

Der Attributwert wird als CSS <number> geparst, also ohne die Einheit (z.B. 12.5), und als <length> mit der angegebenen Einheit interpretiert. Wenn er ungültig ist, also keine Zahl oder außerhalb des akzeptierten Bereichs der CSS-Eigenschaft, wird der Standardwert verwendet. Wenn die angegebene Einheit eine relative Länge ist, rechnet attr() sie in eine absolute Länge um. Führende und nachfolgende Leerzeichen werden entfernt.

Standardwert: 0, oder, wenn 0 kein gültiger Wert für die Eigenschaft ist, der Mindestwert der Eigenschaft.

angle

Der Attributwert wird als CSS <angle>-Dimension geparst, einschließlich der Einheit (z.B. 30.5deg). Wenn er ungültig ist, also kein Winkel oder außerhalb des akzeptierten Bereichs der CSS-Eigenschaft, wird der Standardwert verwendet. Führende und nachfolgende Leerzeichen werden entfernt.

Standardwert: 0deg, oder, wenn 0deg kein gültiger Wert für die Eigenschaft ist, der Mindestwert der Eigenschaft.

deg, grad, rad

Der Attributwert wird als CSS <number> geparst, also ohne die Einheit (z.B. 12.5), und als <angle> mit der angegebenen Einheit interpretiert. Wenn er ungültig ist, also keine Zahl oder außerhalb des akzeptierten Bereichs der CSS-Eigenschaft, wird der Standardwert verwendet. Führende und nachfolgende Leerzeichen werden entfernt.

Standardwert: 0deg, oder, wenn 0deg kein gültiger Wert für die Eigenschaft ist, der Mindestwert der Eigenschaft.

time

Der Attributwert wird als CSS <time>-Dimension geparst, einschließlich der Einheit (z.B. 30.5ms). Wenn er ungültig ist, also keine Zeit oder außerhalb des akzeptierten Bereichs der CSS-Eigenschaft, wird der Standardwert verwendet. Führende und nachfolgende Leerzeichen werden entfernt.

Standardwert: 0s, oder, wenn 0s kein gültiger Wert für die Eigenschaft ist, der Mindestwert der Eigenschaft.

s, ms

Der Attributwert wird als CSS <number> geparst, also ohne die Einheit (z.B. 12.5), und als <time> mit der angegebenen Einheit interpretiert. Wenn er ungültig ist, also keine Zahl oder außerhalb des akzeptierten Bereichs der CSS-Eigenschaft, wird der Standardwert verwendet. Führende und nachfolgende Leerzeichen werden entfernt.

Standardwert: 0s, oder, wenn 0s kein gültiger Wert für die Eigenschaft ist, der Mindestwert der Eigenschaft.

frequency

Der Attributwert wird als CSS <frequency>-Dimension geparst, einschließlich der Einheit (z.B. 30.5kHz). Wenn er ungültig ist, also keine Frequenz oder außerhalb des akzeptierten Bereichs der CSS-Eigenschaft, wird der Standardwert verwendet.

Standardwert: 0Hz, oder, wenn 0Hz kein gültiger Wert für die Eigenschaft ist, der Mindestwert der Eigenschaft.

Hz, kHz

Der Attributwert wird als CSS <number> geparst, also ohne die Einheit (z.B. 12.5), und als <frequency> mit der angegebenen Einheit interpretiert. Wenn er ungültig ist, also keine Zahl oder außerhalb des akzeptierten Bereichs der CSS-Eigenschaft, wird der Standardwert verwendet. Führende und nachfolgende Leerzeichen werden entfernt.

Standardwert: 0Hz, oder, wenn 0Hz kein gültiger Wert für die Eigenschaft ist, der Mindestwert der Eigenschaft.

%

Der Attributwert wird als CSS <number> geparst, also ohne die Einheit (z.B. 12.5), und als <percentage> interpretiert. Wenn er ungültig ist, also keine Zahl oder außerhalb des akzeptierten Bereichs der CSS-Eigenschaft, wird der Standardwert verwendet. Wenn der gegebene Wert als Länge verwendet wird, rechnet attr() ihn in eine absolute Länge um. Führende und nachfolgende Leerzeichen werden entfernt.

Standardwert: 0%, oder, wenn 0% kein gültiger Wert für die Eigenschaft ist, der Mindestwert der Eigenschaft.

<fallback>

Der Wert, der verwendet wird, wenn das zugeordnete Attribut fehlt oder einen ungültigen Wert enthält. Wenn nicht gesetzt, verwendet CSS den Standardwert, der für jeden <type-or-unit> definiert ist.

<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  

In diesem Beispiel fügen wir den Wert des data-foo-data-*-globalen Attributs vor den Inhalt des <p>-Elements.

HTML

<p data-foo="hello">world</p>

CSS

[data-foo]::before {
  content: attr(data-foo) " ";
}

Ergebnis

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 {
  height: 100vh;
}

.background {
  background-color: red;
}

.background[data-background] {
  background-color: attr(data-background color, red);
}

Ergebnis

In diesem Beispiel hängen wir den Wert des data-browser-data-*-globalen Attributs an das <p>-Element an. Wenn das data-browser-Attribut im <p>-Element fehlt, hängen wir den Fallback-Wert "Unbekannt" an.

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

• Attribut-Selektoren
• HTML data-* Attribute
• SVG data-* Attribute