Der dritte Teil meiner Serie zu CSS Shorthands. Diesmal geht es um 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:

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

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:

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:

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:

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 effektiv nutzen – Einführung
• CSS Shorthands – Innen- und Außenabstand

—
Foto: Border-USA-Mexico

Der Innenabstand, besser bekannt als padding und der Außenabstand alias margin sind zwei sehr populäre Beispiele für effektive Shorthands. Hier nun auch direkt das Beispiel dazu:

Bei margin gilt genau die gleiche Syntax

Bei padding und margin werden die einzelnen Werte immer in einer bestimmten Reihenfolge angegeben, die ich nun zeigen will:

Das allein ist noch nicht sehr spannend, denn das wird es erst, wenn man die Kürzung noch weiter kürzt. So kann z.B. folgendes Konstrukt noch stärker gekürzt werden:

Hierbei wird für oben und unten jeweils der Wert 10px genutzt und für rechts und links auto. Man muss also nicht immer alle Werte für alle Positionen befüllen. Man kann von einem Wert aufwärts bis zu maximal vier Werten gehen. Die letzen beiden Möglichkeiten werde ich jetzt noch zeigen:

Hiermit bekommt man auf allen vier Seiten eines Elementes einen gleichmäßigen Abstand von jeweils 10 Pixel. Und damit komme ich auch schon zur wohl unbekanntesten und am wenigsten genutzten Variante. Der mit drei Werten.

Damit bekommt man oben einen Abstand von 10 Pixel, rechts von 20 Pixel und unten von 30 Pixel. Ein Abstand nach links existiert bei dieser Notation nicht.

Dies war auch schon der zweite Teil meiner Serie über CSS Shorthands. Fragen, Anregungen, Kritik ist immer gern gesehen. Vielleicht habe ich ja auch etwas vergessen.

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

• CSS Shorthands effektiv nutzen – Einführung
• CSS Shorthands – Rahmen

Was sind CSS Shorthands?

Im Grunde genommen ist das schnell erklärt. Es sind schlichtweg Abkürzungen von Definitionen in CSS. Normalerweise muss man z.B. bei einem Rahmen jede Eigenschaft einzeln definieren. Genauer gesagt gibt es für jede dieser Eigenschaften eine eigene Möglichkeit zur Definition:

Hiermit wird ein Rahmen erstellt, der exakt ein Pixel breit, gepunktet und rot ist. Natürlich ist das umständlich zu schreiben, wenn man, wie ich, seinen Quelltext in einem normalen Texteditor schreibt und nicht in einem dieser speziellen Editoren für CSS. Darum gibt es für obiges Beispiel auch die Möglichkeit dies so zu definieren:

Der Code hat sich somit auf ca. ein Drittel des Vorherigen gekürzt und ist wesentlich besser zu lesen als zuvor. Die Reihenfolge der einzelnen Werte folgt bei jeder Möglichkeit Shorthands zu nutzen einem festgelegten Muster, damit niemand seine eigene Suppe kochen kann und Browser eine bestimmte Grundlage zum Rendering haben.

Im übrigen kann man auch Farbangaben kürzen, wie man oben sehr gut sieht. So kann z.B. aus #000000 einfach nur #000 werden. Dies funktioniert natürlich nur bei Farbangaben, bei denen jeweils zwei mal die gleiche Ziffer hintereinander erscheint. #12ff66 kann man deswegen nicht in Kurzschreibweise definieren.

So, ich denke das Grundprinzip hat nun jeder verstanden und deswegen fange ich gleich mal an den zweiten Teil zu schreiben.

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

• CSS Shorthands – Innen- und Außenabstand
• CSS Shorthands – Rahmen