attr()

attribute-name

Der Name eines Attributs des in CSS referenzierten HTML-Elements.

<type-or-unit>

Ein Schlüsselwort, das entweder den Typ des Attributwertes oder seine Einheit darstellt, 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, ist auch der attr()-Ausdruck ungültig. Wenn weggelassen, wird string als Standard verwendet. Die Liste der gültigen Werte ist:

string

Der Attributwert wird als CSS <string> behandelt. Er wird NICHT erneut geparst, 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-stelliger Hash) oder als 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 ein 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 generischen Fehlerzustand verweist.

integer

Der Attributwert wird als ein CSS <integer> geparst. Wenn er ungültig ist, das heißt, kein Integer oder außerhalb des von der CSS-Eigenschaft akzeptierten Bereichs, 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 ein CSS <number> geparst. Wenn er ungültig ist, das heißt, keine Zahl oder außerhalb des von der CSS-Eigenschaft akzeptierten Bereichs, 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 eine CSS <length>-Dimension geparst, einschließlich der Einheit (z.B. 12.5em). Wenn er ungültig ist, das heißt, keine Länge oder außerhalb des von der CSS-Eigenschaft akzeptierten Bereichs, wird der Standardwert verwendet. Wenn die gegebene Einheit eine relative Länge ist, berechnet 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 ein CSS <number>, das heißt ohne die Einheit (z.B. 12.5), geparst und als eine <length> mit der angegebenen Einheit interpretiert. Wenn er ungültig ist, das heißt, keine Zahl oder außerhalb des von der CSS-Eigenschaft akzeptierten Bereichs, wird der Standardwert verwendet. Wenn die gegebene Einheit eine relative Länge ist, berechnet 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 eine CSS <angle>-Dimension geparst, einschließlich der Einheit (z.B. 30.5deg). Wenn er ungültig ist, das heißt, kein Winkel oder außerhalb des von der CSS-Eigenschaft akzeptierten Bereichs, 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 ein CSS <number>, das heißt ohne die Einheit (z.B. 12.5), geparst und als ein <angle> mit der angegebenen Einheit interpretiert. Wenn er ungültig ist, das heißt, keine Zahl oder außerhalb des von der CSS-Eigenschaft akzeptierten Bereichs, 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 eine CSS <time>-Dimension geparst, einschließlich der Einheit (z.B. 30.5ms). Wenn er ungültig ist, das heißt, keine Zeit oder außerhalb des von der CSS-Eigenschaft akzeptierten Bereichs, 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 ein CSS <number>, das heißt ohne die Einheit (z.B. 12.5), geparst und als ein <time> mit der angegebenen Einheit interpretiert. Wenn er ungültig ist, das heißt, keine Zahl oder außerhalb des von der CSS-Eigenschaft akzeptierten Bereichs, 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 eine CSS <frequency>-Dimension geparst, einschließlich der Einheit (z.B. 30.5kHz). Wenn er ungültig ist, das heißt, keine Frequenz oder außerhalb des von der CSS-Eigenschaft akzeptierten Bereichs, 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 ein CSS <number>, das heißt ohne die Einheit (z.B. 12.5), geparst und als eine <frequency> mit der angegebenen Einheit interpretiert. Wenn er ungültig ist, das heißt, keine Zahl oder außerhalb des von der CSS-Eigenschaft akzeptierten Bereichs, 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 ein CSS <number>, das heißt ohne die Einheit (z.B. 12.5), geparst und als ein <percentage> interpretiert. Wenn er ungültig ist, das heißt, keine Zahl oder außerhalb des von der CSS-Eigenschaft akzeptierten Bereichs, wird der Standardwert verwendet. Wenn der gegebene Wert als Länge verwendet wird, berechnet 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 werden soll, wenn das zugehörige Attribut fehlt oder einen ungültigen Wert enthält. Wenn nicht gesetzt, verwendet CSS den Standardwert, der für jedes <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 dem Inhalt des <p>-Elements den Wert des data-foo data-* globalen Attributs 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 dem <p>-Element den Wert des data-browser data-* globalen Attributs hinzu. Wenn das data-browser-Attribut im <p>-Element 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

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