outline-style

Die CSS-Eigenschaft outline-style legt den Stil des Umrisses eines Elements fest. Was ist ein Umriss? Ein Umriss ist eine Linie, die um Elemente gezeichnet wird – außerhalb des Randes –, die für Barrierefreiheit oder zu Dekorationszwecken verwendet wird, wenn sich dieses Element im Fokus befindet.

button {
  outline-style: dashed;
}

outline-style ist eine Bestandteileigenschaft des outline-Shorthands und ist in der CSS Basic User Interface Module Level 4-Spezifikation definiert, die sich derzeit im Status eines Editor’s Draft befindet.

Verwendung

Normalerweise setzen wir den Umriss eines Elements mit der Shorthand-Eigenschaft

a:focus {
  outline: 5px dashed black;
}

Barrierefreiheit (Accessibility)

Standardmäßig stellen verschiedene User Agents aus Gründen der Barrierefreiheit unterschiedliche Umrissstile für fokussierte Elemente bereit, um Nicht-Maus-Interaktionen anzuzeigen, aber diese visuelle Darstellung ist im Allgemeinen für alle von Vorteil. Dieser Stil ist typischerweise ein Umriss um das Element.

Es gibt einige Gründe, warum Sie den Standard-Umrissstil ändern möchten

• Sie können diesen Stil an Ihre Marke anpassen.
• Sie können den Umriss auffälliger machen.
• Sie können die Aufmerksamkeit des Benutzers erhöhen, indem Sie den Umrissstil beim Fokussieren des Elements ändern.

Und hier ist, wo outline-style praktisch wird. **Aber stellen Sie sicher, dass Ihr benutzerdefinierter Stil mindestens so barrierefrei ist wie der Standardstil.** Das bedeutet, ihn klar und auffällig zu gestalten, ohne zu sehr davon abzuweichen, dass er nicht mehr einem Fokus-Zustand ähnelt. Eric Bailey hat dazu viele großartige Ratschläge in seinem Artikel „Focusing on Focus Styles“.

Syntax

outline-style: auto | <outline-line-style>

/* where */
<outline-line-style> = none | dotted | dashed | solid | double | groove | ridge | inset | outset

• Initialwert: none
• Gilt für: alle Elemente
• Vererbt: nein
• Berechneter Wert: wie angegeben
• Animationstyp: diskret

Werte

/* Keyword values */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/* Global values */
outline-width: initial;
outline-width: inherit;
outline-width: unset;

• auto: Ermöglicht es User Agents, einen benutzerdefinierten Umrissstil für Elemente zu zeichnen.
• none: Der **Standardwert**. Der Umriss wird nicht gezeichnet. Der berechnete Wert von outline-width ist 0.
• dotted: Zeichnet eine Reihe runder Punkte um das Element.
• dashed: Zeichnet quadratisch endende Striche um das Element.
• solid: Eine einzelne Linie umgibt das Element.
• double: Zeichnet zwei parallele durchgezogene Linien entlang des Rands des Elements, mit Abstand dazwischen. Die Dicke der beiden Linien und der Abstand dazwischen sind gleich dem Wert von outline-width. Die outline-width muss mindestens 3px betragen, damit der doppelte Umriss sichtbar ist.
• groove: Der Umriss sieht aus, als wäre er in die Seite eingekerbt. Dieser eingekerbte Effekt entsteht normalerweise durch die mit der Eigenschaft outline-color angegebene Farbe plus einer leicht dunkleren Version davon, die der Browser selbst herausfindet.
• ridge: Das Gegenteil von groove, bei dem der Umriss aussieht, als käme er aus der Seite heraus.
• inset: Verleiht dem Feld des Elements ein eingebettetes Aussehen, als ob der Inhalt innerhalb des Umrisses in die Seite einsinken würde.
• outset: Das Gegenteil von inset, das dem Feld des Elements ein geprägtes Aussehen verleiht, als ob der Inhalt innerhalb des Umrisses aus der Seite herauskäme.
• initial: Wendet die Standardeinstellung der Eigenschaft an, nämlich none.
• inherit: Übernimmt den Wert von outline-style des Elternelements.
• unset: Entfernt den aktuellen outline-style vom Element.

Beispiel

Das folgende Beispiel macht den Umriss des Buttons doppelt, sobald er fokussiert ist

button {
  outline-width: 1px;
  outline-style: solid;
  outline-color: lightblue;
}

button:focus {
  outline-style: double;
}

Demo

Sie können mit dieser Eigenschaft im folgenden Demo experimentieren

Browser-Unterstützung

IE	Edge	Chrome	Firefox	Safari	Opera
8+	Alle	Alle	Alle	Alle	Alle

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
Alle	Alle	Alle	Alle	Alle

Weitere Dokumentation

• CSS Basic User Interface Module Level 4
• MDN-Dokumentation

CSS-Tricks!

Verwandt