CSS 2.1 ::Referenz ::Eigenschaften

CSS 2.1: outline-style

Erläuterungen

Die Eigenschaft outline-style ist ein Teil der Kurzschrift- Eigenschaft outline. Sie definiert das Linienmuster einer Konturlinie. Sie kann die gleichen Werte wie border-style annehmen.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'outline-style' <border-style> | inherit

Der Werttyp <border-style> akzeptiert eins von zehn Schlüsselworten. Damit kann die Eigenschaft outline-style dieselben Werte annehmen wie die Eigenschaft border-style.

Schlüsselworte
  • none (Ausgangswert)
    Dieser Wert setzt die Linienbreite auf 0 zurück, d.h. es wird keine Konturlinie dargestellt.
  • hidden
    Im Unterschied zum Element border-style wird dieser Wert hier nicht akzeptiert.
  • dotted
    Punktierte Linie. Der CSS2-Standard sagt nichts darüber aus, ob die Punkte rund, quadratisch oder elliptisch sein müssen/dürfen, über Abstände zwischen den Punkten oder die Ausrichtung innerhalb der Linie.
  • dashed
    Strichlierte Linie. Auch hier ist nichts vorbestimmt über die Länge der Striche/Abstände oder deren Ausrichtung.
  • solid
    Eine durchgehende Linie.
  • double
    Zwei durchgehende Linien nebeneinander. Die Breite der beiden Linien incl. des Zwischenraums soll der notierten Strichstärke entsprechen. Die Spezifikation lässt offen, wie breit die einzelnen Linien oder der Zwischenraum sein sollen oder wie die Doppellinie dargestellt wird, wenn die angegebene Rahmenbreite kleiner als '3px' ist.
  • groove
    3-d-Effekt, bei dem der Rahmen wie in die Bildebene eingekerbt wirkt.
  • ridge
    3-d-Effekt, bei dem der Rahmen wie aus der Bildebene 'hervorspringt'.
  • inset
    3-d-Effekt, bei dem das gesamte Element wie in die Bildebene eingekerbt wirkt.
  • outset
    3-d-Effekt, bei dem das gesamte Element wie aus der Bildebene 'hervorspringt'.
inherit
Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

:link:focus, :visited:focus { outline-style: dotted; }

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-color

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):
none Spezifizierter Wert Nein Auf alle Elemente Nicht zutreffend Visual, Interaktive

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

 TOP


Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

Die URL dieser Seite ist: www.thestyleworks.de/ref/outline-style.shtml
Gedruckt am Sonntag, dem 21. September, 2014.
© Copyright All Contents 2002- 2014 K. Langenberg.
Commercial Use prohibited.


Notizen: