CSS Outline

CSS Outline: Das CSS outline ist ein wichtiges Stil-Attribut, das oft genutzt wird, um Umrandungen für HTML-Elemente zu erstellen. Im Gegensatz zum border beeinflusst outline jedoch nicht das Layout oder die Größe des Elements und wird außerhalb der eigentlichen Box des Elements angezeigt. Das outline-Attribut wird oft verwendet, um den Fokuszustand von interaktiven Elementen wie Schaltflächen und Eingabefeldern hervorzuheben und die Benutzerfreundlichkeit zu verbessern.

Grundlagen und Eigenschaften von CSS Outline

Ein outline besteht aus mehreren Untereigenschaften, die flexibel angepasst werden können:

1. outline-width
   Legt die Breite des outline fest. Sie kann in absoluten Einheiten (px, em) oder als Schlüsselwort (thin, medium, thick) angegeben werden.

   outline-width: 2px;

2. outline-style
   Bestimmt den Stil des outline, wobei ähnliche Optionen wie bei border zur Verfügung stehen, z. B. solid, dashed, dotted, double, usw.

   outline-style: dashed;

3. outline-color
   Legt die Farbe des outline fest und kann entweder durch Farbwerte (#333, rgb(50,50,50)) oder Schlüsselwörter (red, blue) definiert werden.

   outline-color: blue;

4. outline-offset
   Bestimmt den Abstand des outline von der Kante des Elements und kann dazu beitragen, den outline optisch besser zu positionieren.

   outline-offset: 5px;

5. outline (Kurzform)
   Wie bei border ermöglicht outline die Kurzschreibweise, um width, style und color in einer einzigen Zeile festzulegen:

   outline: 2px solid red;

Beispiel: Grundlegende Outline-Einstellungen

.button {
    outline: 3px solid red; /* Breite, Stil und Farbe in Kurzform */
    outline-offset: 2px;    /* Abstand zur Box */
}

Unterschied zwischen outline und border

• Position: outline wird außerhalb des Elementrahmens angezeigt und hat keinen Einfluss auf die Größe oder das Layout des Elements. border hingegen ist Teil des Box-Modells und beeinflusst die Größe.
• Offset: Mit outline-offset kann der Abstand des outline vom Element beeinflusst werden, was bei border nicht möglich ist.
• Fokus-Verwendung: outline wird häufig für Fokuseffekte verwendet und von Browsern standardmäßig bei fokussierten Elementen wie input und button angewendet.

Outline für Barrierefreiheit

Ein outline kann nützlich sein, um Barrierefreiheit zu verbessern, indem die Fokussierung von Elementen hervorgehoben wird, ohne die Benutzerführung zu beeinträchtigen. Beispiel:

input:focus {
    outline: 2px solid #4A90E2; /* Hervorhebung bei Fokus */
}

Häufig gestellte Fragen

Zusammenfassung

outline ist eine vielseitige CSS-Eigenschaft, die verwendet wird, um Umrandungen für HTML-Elemente außerhalb des Box-Modells zu erstellen. Es ist besonders hilfreich, um den Fokuszustand interaktiver Elemente hervorzuheben, ohne das Layout zu beeinflussen.

Übungsaufgaben

1. Erstellen Sie ein outline für ein Eingabefeld und passen Sie outline-color, outline-width und outline-style an.
2. Setzen Sie outline-offset und beobachten Sie die Änderung der Position des outline.
3. Erstellen Sie ein ansprechendes Design für Schaltflächen mit verschiedenen outline-Farben und -Stilen.

Handlungsempfehlungen

• Nutzen Sie outline, um die Fokushervorhebung von interaktiven Elementen zu verbessern.
• Verwenden Sie outline: none nur, wenn Sie alternative visuelle Hinweise für den Fokuszustand bieten.
• Setzen Sie outline-offset, um outline von dichten Layouts abzuheben und bessere Lesbarkeit zu erreichen.