CSS 2.1 ::Referenz ::Eigenschaften
CSS 2.1: outline-color
Erläuterungen
Die Eigenschaft outline-color
ist ein Teil der Kurzschrift- Eigenschaft outline. Sie legt die Farbe einer Konturlinie um ein Element fest. Sie kann die gleichen Werte wie border-color
annehmen.
Erlaubte Werte
Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):
'outline-color'
<color>
| invert | inherit
<color>
-
- Farbwert als Hexadezimalangabe (
#rrggbb
) - Farbwert als Hexadezimalkurzangabe (
#rgb
) - Prozentangaben (
rrr.r%,ggg.g%,bbb.b%
) - direkte RGB-Werte (
rrr,ggg,bbb
) - Farbnamen (Hier sind nur die 17 Farben
maroon
,red
,orange
,yellow
,olive
,purple
,fuchsia
,white
,lime
,green
,navy
,blue
,aqua
,teal
,black
,silver
,gray
sowie die Systemfarben im Standard definiert. Fast alle dieser Farben werden von den heute gängigen Browsern mit den korrekten RGB-Werten dargestellt. Dasselbe gilt auch für die meisten der bereits 1996 eingeführten X11-Farbnamen — die jedoch nicht standard- konform sind. Deshalb ist es empfehlenswert, stets die RGB- oder Hexadezimalangaben zu verwenden, um eine konsistente Farbdarstellung zwischen den verschiedenen Browsern zu erreichen.
- Farbwert als Hexadezimalangabe (
- Mehr Informationen über Farben in CSS finden Sie im Grundlagenartikel Farbwerte.
<invert>
(Ausgangswert)- Dieser Wert invertiert die Farben der durch eine Konturlinie verdeckten Flächen. Dadurch bleibt die Konturlinie stets sichtbar, unabhängig von den definierten Vor- und Hintergrundfarben der angrenzenden Elemente. Nachteil: wenn zwei mit diesem Wert deklarierte Elemente nebeneinander liegen, dann können die Konturlinien beider Elemente sich teilweise gegenseitig überlappen. In dem entsprechenden Bereich sind sie dadurch wieder unsichtbar.
inherit
- Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.
Code-Beispiel:
:link:focus, :visited:focus { outline-color: red; }
Browserunterstützung
Die Eigenschaften outline
, outline-color
, outline-style
und outline-width
werden bisher von fast keinem der modernen Browser umgesetzt:
- Firefox 1, Mozilla 1.7, etc.
- Unterstützt diese Eigenschaft entsprechend der Spezifikation.
- IE/Mac 5.x
- Unterstützt diese Eigenschaft entsprechend der Spezifikation.
- IE/Win 5.x, IE/Win 6, IE 7
- Erkennt die
outline
-Eigenschaften noch nicht. - Opera 7.5+
- Unterstützt diese Eigenschaft entsprechend der Spezifikation. Überfließende Kindelemente liegen nicht innerhalb der Umfassungslinie.
- Safari 1.3
- Erkennt die
outline
-Eigenschaften generell, jedoch nicht für Formularelemente.
Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.
Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.
Wechselwirkungen:
:active
, :focus
, :hover
,outline-width
, outline-style
Besonderheiten im Medientyp handheld
:
Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Mobilgeräte, deren Browser diese Eigenschaft umsetzen, sind bisher nicht bekannt.
Weitere Charakteristika:
Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.
Ausgangs- wert: |
Berechneter Wert: |
Vererbung: | Anwendbar- keit: |
%-Bezugs- wert: |
Medien- gruppe(n): |
---|---|---|---|---|---|
invert |
Spezifizierter Wert | Nein | Auf alle Elemente | Nicht zutreffend | Visual, Interaktive |
Ausblick:
Für die Zukunft ist die Einführung eines Elementes outline-offset
geplant.
Verwendete Standards
Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.