Ein kleines! Lexikon des Internet Werbung

CSS Color Module Level 3 @ Ein kleines! Lexikon des Internet


Erklärung | W3C-Standards | Weiterführende Links | Finden | Navigation

Ansichten: Bildschirm   Druck   ohne

CSS Color Module Level 3

CSS Color

ist eine vom W3C vorgestellte Empfehlung für die Be­schrei­bung der Eigen­schaft Farbe und deren Trans­pa­renz für Ele­mente von HTML- und XML-Do­ku­men­ten mit Hilfe von CSS.
CSS Level 3 (CSS3) wird von der CSS-Working Group in eigen­ständigen Modulen entwickelt, um zukünftige An­for­de­rungen schneller ein­arbeiten zu können. CSS Color ist die erste fertig­gestellte Empfehlung aus dieser Reihe.

Die CSS-Eigenschaft color kann auf (fast) alle Elemente eines HTML- oder XML-Dokumentes angewendet werden, z. B. color für Vordergrundfarbe, background-color als Hintergrundfarbe, border-color als Rahmenfarbe usw.

Als Werte können vordefinierte Schlüssel­wörter (1) oder hexadezimale RGB-Werte angegeben werden. Als Funktionen kommen rgb und hsl dazu (HSL (a): hue, saturation, lightness; dt.: Farbton, Farbsättigung, Helligkeit). Zusätzlich kann bei den Funktionen rgba und hsla über den Alpha-Kanal die Trans­pa­renz (engl.: opa­city) an­ge­ge­ben werden. Der erlaubte Werte­bereich liegt dafür von 0.0 (völlige Trans­pa­renz) bis 1.0 (ohne Trans­pa­renz).

Farbangaben nach CSS Color Level 3
Farbangabe Bereich
Beispiele (<color>)
Darstellung
Schlüsselwort siehe unten (1)
purple Beispiel
RGB hexadezimal #rrggbb oder #rgb (0-9, A-F)
#0000FF oder #00f Beispiel
RGB-Funktion dezimal rgb(r, g, b) (r, g, b: 0 - 255)
rgb(0, 255, 0) Beispiel
RGB-Funktion prozentual rgb(r, g, b) (r, g, b: 0% - 100%)
rgb(0%, 100%, 0%) Beispiel
RGB-Funktion prozentual
mit Alpha-Kanal (Transparenz)
rgba(r, g, b, a) (r, g, b: 0% - 100%; a: 0.0 - 1.0)
rgb(0%, 100%, 0%, .5) Beispiel
HSL-Funktion hsl(h, s, l) (h: 0 - <360, s, l: 0% - 100%)
hsl(0,100%,50%) Beispiel
HSL-Funktion
mit Alpha-Kanal (Transparenz)
hsla(h, s, l, a) (h: 0 - <360), s, l: 0% - 100%, a: 0.0 - 1.0)
hsla(0,100%,50%,.7) Beispiel

Groß- und Kleinschreibung bei den hexa­dezimalen RGB-Werten sind iden­tisch und können beide ver­wendet werden. Alle Bei­spiele sind mit <span style="color: <color>">Beispiel</span> dar­ge­stellt.

Besonderheiten sind zwei Schlüsselwörter: transparent und das neue currentColor. transparent wurde mit CSS 1 für den Hinter­grund ein­ge­führt und mit CSS 2 auf die Rah­men­farbe er­weitert. Mit CSS3 wird es nun auf alle Ele­mente an­wend­bar, die einen Farb­wert er­hal­ten dürfen. Mit currentColor über­nimmt CSS 3 einen bei SVG 1.0 ein­ge­führ­tes Schlüssel­wort, da in den früheren Ver­sionen nur be­schrieben wurde, dass z. B. die Rahmen­farbe von der Vorder­grund­farbe übernommen wird, ohne ein Schlüssel­wort dafür bereit­zu­stellen.

Die Unterstützung für CSS durch die mo­der­nen Browser ist sehr un­ter­schied­lich (b). Teil­weise wer­den Ele­men­te aus CSS3 be­reits unter­stützt, während Ele­mente aus CSS2 noch fehlen.

Kleine! Tools

 (1) Kleine! Farbpalette
CSS- und SVG-Farbnamen

W3C - Technical Reports

{CSS Color Module Level 3
 - http://www.w3.org/TR/css3-color/
} (Rec)

Weiterführende Links

{Web Style Sheets home page
 - http://www.w3.org/Style/
}
@ W3C
 (a) [HSV-Farbraum
- http://de.wikipedia.org/wiki/HSV-Farbraum
] @ Wikipedia
 (b) {Comparison of layout engines (Cascading Style Sheets)
 - http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29
}
@ en.Wikipedia.org