Kurzschreibweisen in CSS – Heute: Richtungen

Mit diesem Beitrag versuche ich eine kleine Reihe an Beiträgen zu starten, welche sich mit der Reduzierung von CSS-Code befasst. Fast nichts ist heutzutage so wichtig, wie die Geschwindigkeit einer Seite. Wenn eine Seite zu langsam läd, nimmt man halt die nächste. Mittlerweile gibt es ja genug Auswahl. Deswegen sollte man nicht nur HTML und PHP sparsam und schnell einsetzen, sondern auch CSS – und auch hier gibt es sehr viel Potential um einige Kilobyte zu sparen.

Heute möchte ich mich mit dem Thema Richtungen befassen. Gemeint sind hiermit die Richtungen von margin, padding und den diversen border-Eigenschaften.

Dass man jeder Richtung einen unterschiedlichen Wert von margin oder padding zuweisen kann ist schon lange kein Geheimnis mehr. Dass es dafür unterschiedliche Eigenschaften im CSS gibt auch nicht, doch muss man für diese viel mehr Code einsetzen, als wenn man etwas mehr wüsste. Man kann den Code drastisch reduzieren, wenn man bei jedem Element statt 4 Eigenschaften nur noch eine benutzt.

Wie das funktionieren soll? Ganz einfach: Die Eigenschaft margin hat nicht nur die Möglichkeit einen einzigen Wert aufzunehmen, welche in alle 4 Richtungen geht, sondern auch für alle 4 Richtungen separat. Das ist für viele von euch sicherlich nichts neues mehr, doch das geht auch mir 2 Werten oder auch mit 3 Werten. Und hier liegt weiteres Potential zum sparen.

Durchschnittlich benutzen Anfänger folgenden Code um jeder Richtung von margin einen anderen Wert zuzuweisen:

margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;

Dass das auch kürzer geht, ist nicht jedem bekannt. Selbst fortgeschrittene Webdesigner benutzen diese Variante noch häufig – oder wie ich selbst mal erfahren musste, Lehrer von HTML/CSS-Seminaren, bei welchen ich mal unfreiwillig mitmachen musste.

Wie bereits erwähnt gibt es noch die Kurzschreibweise, mit welcher man allen 4 Richtungen einen anderen Wert zuweisen kann. Die Richtungen sind dabei wie folgt hinterlegt: oben, rechts, unten, links. Also so, wie ich es bereits oben im Beispiel verwendet habe. Leichter zu merken ist es vielleicht, wenn man erwähnt, dass es der Uhrzeigersinn ist, welcher oben beginnt.

Dementsprechend würde die Kurzschreibweise so aussehen:

margin:5px 10px 15px 20px;

Es wird nur eine Zeile benötigt und trotzdem hat man die gleichen Angaben gemacht. Nur mal zum Vergleich, die erste Schreibweise hat 75 Bytes verbraucht, die zweite hingegen nur 26 Bytes. Sollte ich mich nicht verrechnet haben, sind das 65,33% Codeinsparung. Dass man diese Technik nicht überall anwenden kann, ist natürlich klar, doch an einigen Stellen kann man damit gut sparen.

Jetzt gibt es aber noch 2 und 3 Angaben. Hierzu 2 kurze Erklärungen:

Zwei Angaben bedeuten, dass die erste Angabe für oben und unten zählt und die zweite für links und rechts. Also bedeutet margin:10px 5px; dass nach oben und unten 10px angewendet werden und nach links und rechts 5px.

Weiteres gibt es noch 3 Angaben. Dort heißt es, dass die erste für oben gilt, die zweite für links und rechts und die dritte für unten. Also bedeutet margin:10px 5px 20px; dass der Abstand nach oben 10px ist, nach links und rechts 5px und nach unten 20px.

Ich hoffe ich konnte euch damit etwas helfen Code zu sparen. Es lohnt sich auf jeden Fall und gerade das mit den zwei oder 3 Angaben ist eher weniger verbreitet.