Schönen guten Abend.

Ich weiß, ich weiß.. ich hatte versprochen etwas pünktlicher zu werden und jetzt ist es später als je zuvor. Tut mir leid aber am Geburtstag meiner Mutter gibt es einfach andere Prioritäten als einen Artikel im Blog zu schreiben.

Trotzdem will ich mir jetzt die Zeit nehmen und euch etwas über outline erzählen.

Browserunterstützung

Browser
ab Version	1.5	1.2	7.0	1.0	8.0

Wow, erst ab IE8 wird das unterstützt.. ich musste auch erst zwei mal hinsehen und auf einer zweiten Seite checken aber okay. outline gibt es prinzipiell aus einem Grund. Dieser eine Grund besteht darin, Elemente, die mit der Tastatur (meistens durch Drücken der Tabulator-Taste) sogenannten “Fokus” bekommen, hervorzuheben. Dies geschiet in der Regel durch eine gepunktete Linie, die um das Elemente gezogen wird. Im Prinzip handelt es sich dabei um eine Art Spezialfall von border Da nur klickbare Elemente Fokus bekommen, können wir durchaus outline dazu benutzen einen doppelten Border-Effekt für nicht-klickbare Elemente zu erstellen.

Leider ist outline um einiges restriktiver als es border ist. Es erlaubt nämlich nicht, nur bestimmte Seiten rendern zu lassen, sondern rendert immer alle vier Seiten. D. h. im Klartext: es gibt kein outline-top/-right/-bottom/-left sondern eben nur outline.

Das Wertetripel ist allerdings das Gleiche wie wir es von border her kennen:

1. outline-width, die Linienstärke – angegeben in irgendeiner Maßeinheit
2. outline-style, ein Style-Schlüsselwort wie bspw. dottet, solid, dashed oder groove
3. outline-color, Farbe der Linie; wenn nicht angegeben, nimmt es (zumindest in Firefox) den Wert der Schriftfarbe an

Beispiele

Wie oben schon erwähnt werden wir jetzt mal eine doppelte Border mit Hilfe von outline erstellen:

CSS

1
2
3
4
5
6
7

.widget {
	background-color:#eee;
	border:5px solid #aaa;
	padding:10px;
	outline:5px solid #888;
	width:200px;
}

Ergebnis

Aber Achtung: Outline zählt nicht zum Box-Model, das Margin fängt stets nach der Border an, Outline wird dabei ignoriert. Es hat damit auch keinen Einfluss auf den Gesamtfluss aller anderen Elemente.

Ein weiteres Beispiel wäre einer Box oder einem Widget einen kleinen 3D-Effekt zu verpassen. Dazu hellt man die oberste Pixelreihe auf und dunkelt die anderen ab, um so die Box hervorzuheben.

CSS

1
2
3
4
5
6
7
8

.box {
	background-color:#adf;
	border-top:1px solid #cff;
	border-bottom:1px solid #28a;
	padding:10px;
	outline:5px solid #7ac;
	width:200px;
}

Ergebnis

Ich geb’s ja zu.. man muss schon etwas genauer hinsehen. Aber solche Details sind es schließlich, die ein klasse Design von einem guten Design unterscheiden können. Und mit outline geht das ganz einfach ohne zusätzlichem Markup.

Ach und bevor ich wieder Mecker einstecken muss: Die durch Outline produzierte Border wird derzeit im Firefox nicht von border-radius abgerundet, bei anderen Browsern bin ich mir grad nicht sicher. Und ja, man kann eine doppelte Border auch mit box-shadow herstellen aber das ist noch Cross-Browser-inkompatibler ( ) als man mit outline schon ist.

Bis morgen dann.