attr()

attribute-name

Der Name eines Attributs auf dem in CSS referenzierten HTML-Element.

<type-or-unit>

Ein Schlüsselwort, das entweder den Typ des Attributwerts oder seine Einheit repräsentiert, da einige Attribute in HTML 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 es weggelassen wird, lautet der Standardwert string. Die Liste der gültigen Werte sind:

string

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

Standardwert: ein leerer String.

color

Der Attributwert wird als Hash (3- oder 6-Wert-Hash) oder Schlüsselwort geparst. Es 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 innerhalb 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 allgemeinen Fehlerzustand zeigt.

integer

Der Attributwert wird als CSS <integer> geparst. Wenn er ungültig ist, also keine Ganzzahl oder außerhalb des vom CSS-Eigentum akzeptierten Bereichs liegt, 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 vom CSS-Eigentum akzeptierten Bereichs liegt, 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, das heißt inklusive der Einheit (z.B. 12.5em). Wenn er ungültig ist, also keine Länge oder außerhalb des vom CSS-Eigentum akzeptierten Bereichs liegt, wird der Standardwert verwendet. Wenn die gegebene 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, das heißt ohne die Einheit (z.B. 12.5), und als <length> mit der spezifizierten Einheit interpretiert. Wenn er ungültig ist, also keine Zahl oder außerhalb des vom CSS-Eigentum akzeptierten Bereichs liegt, wird der Standardwert verwendet. Wenn die gegebene 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, das heißt inklusive der Einheit (z.B. 30.5deg). Wenn er ungültig ist, also kein Winkel oder außerhalb des vom CSS-Eigentum akzeptierten Bereichs liegt, 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, das heißt ohne die Einheit (z.B. 12.5), und als <angle> mit der spezifizierten Einheit interpretiert. Wenn er ungültig ist, also keine Zahl oder außerhalb des vom CSS-Eigentum akzeptierten Bereichs liegt, 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, das heißt inklusive der Einheit (z.B. 30.5ms). Wenn er ungültig ist, also keine Zeit oder außerhalb des vom CSS-Eigentum akzeptierten Bereichs liegt, 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, das heißt ohne die Einheit (z.B. 12.5), und als <time> mit der spezifizierten Einheit interpretiert. Wenn er ungültig ist, also keine Zahl oder außerhalb des vom CSS-Eigentum akzeptierten Bereichs liegt, 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, das heißt inklusive der Einheit (z.B. 30.5kHz). Wenn er ungültig ist, also keine Frequenz oder außerhalb des vom CSS-Eigentum akzeptierten Bereichs liegt, 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, das heißt ohne die Einheit (z.B. 12.5), und als <frequency> mit der spezifizierten Einheit interpretiert. Wenn er ungültig ist, also keine Zahl oder außerhalb des vom CSS-Eigentum akzeptierten Bereichs liegt, 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, das heißt ohne die Einheit (z.B. 12.5), und als <percentage> interpretiert. Wenn er ungültig ist, also keine Zahl oder außerhalb des vom CSS-Eigentum akzeptierten Bereichs liegt, 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 zugehörige Attribut fehlt oder einen ungültigen Wert enthält. Wenn nicht festgelegt, 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 dem Inhalt des <p>-Elements voran.

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 fügen wir den Wert des data-browser data-* globalen Attributs dem <p>-Element hinzu. Wenn das data-browser-Attribut im <p>-Element fehlt, fügen wir den Fallback-Wert "Unbekannt" 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

• Attributselektoren
• HTML data-* Attribute
• SVG data-* Attribute