CSS Shorthands - Rahmen

Heute kommt bereits der dritte Teil meiner Serie über CSS Shorthands. Im ersten Teil gab ich eine kurze Einführung, was das überhaupt ist und was sie bringen, im zweiten Teil wurden Innen- und Außenabstände ausführlich behandelt.

Nun im dritten Teil werde ich Rahmen beschreiben. Wie man sie normalerweise definiert und wie man es auch ganz kurz und knackig machen kann, wenn man weiß wie.

Hier also zum Einstieg eine vollständige Definition für einen normalen zehn Pixel dicken blauen Rahmen:

element {
	border-width: 10px;
	border-style: solid;
	border-color: #0000ff;
}

Das allein ist noch kein großes Schauspiel. Das Äquivalent sieht dazu so aus:

element {
	border: 10px solid #00f;
}

Auch hier hat sich der Code für die einzelnen Attribute auf mehr oder weniger ein Drittel des vorherigen verringert. Aber nun noch die Erklärung der Syntax:

Der erste Wert bestimmt die Breite des Rahmens. Die Angabe dort kann in allen erdenklichen Größeneinheiten erfolgen, die in CSS zulässig sind.
Der zweite Wert bestimmt die Art des Rahmens. Im obigen Beispiel nutze ich eine durchgezogene Linie. Alternativen hierzu wären eine gestrichelte (dashed) oder gepunktete (dotted) Linie. Mehr zu den verschiedenen Arten einer Rahmenlinie findet man bei SELFHTML.
Der dritte Wert gibt schlussendlich die Farbe an. Dies kann ebenfalls in allen zulässigen Varianten erfolgen.

Bis jetzt kann man sich noch denken, warum man das verwenden sollte. Doch spätestens wenn man einen bunten Rahmen erstellen will mit vier verschiedenen Farben, Dicken und Linienarten wird es schnell übersichtlich:

element {
	/* Oben ein 10 Pixel dicker durchgezogener roter Rahmen */
	border-top-width: 10px;
	border-top-style: solid;
	border-top-color: #ff0000;

	/* Rechts ein 3 Pixel dicker gestrichelter grüner Rahmen */
	border-right-width: 3px;
	border-right-style: dashed;
	border-right-color: #00ff00;

	/* Unten ein 50 Pixel dicker doppelter grauer Rahmen */
	border-bottom-width: 50px;
	border-bottom-style: double;
	border-bottom-color: #808080;

	/* Links ein 15 Pixel dicker gepunkteter blauer Rahmen */
	border-left-width: 15px;
	border-left-style: dotted;
	border-left-color: #0000ff;
}

OK, so ein Beispiel will niemand nachbauen und wer sowas auf seiner Website verwendet leidet sowieso an Geschmacksverirrung der übelsten Sorte, aber es zeigt recht eindeutig, wie schnell der Code für einen simplen Rahmen wachsen und unübersichtlich werden kann.

Und um dem geneigten Entwickler die Übersicht zu erleichtern und die Stellen, an denen was geändert werden kann, zu verringern hier nun das kurze Beispiel:

element {
	border-top: 10px solid #f00;
	border-right: 3px dashed #0f0;
	border-bottom: 50px double #808080;
	border-left: 15px dotted #00f;
}

An diesem Beispiel sieht man deutlich, wie effektiv Shorthands sein können und wie stark sie den Code vereinfachen können. Und wie man sieht kann man die Kurzdefinitionen nicht nur für einen kompletten Rahmen verwenden, sondern auch nur für bestimmte Teile eines Rahmens.

Logischerweise kann man natürlich auch Mischungen verwenden, wie die folgende:

element {
	border: 1px solid #f00;
	border-top: 5px solid #00f;
}

Hier wird zuerst für das gesamte Element ein solider Rahmen von einem Pixel Dicke und in der Farbe rot angegeben. Anschließend wird ein Teil des Rahmens überschrieben. Dadurch ist der komplette Rahmen rot und nur oben ist er fünf Pixel dick und blau.

Hier nun eine Liste der weiteren Artikel, die sich in dieser Serie befinden:

CSS Shorthands – Rahmen

Ein Kommentar