CSS-Kurzschreibweisen inklusive Cheatsheets
Schnell können CSS-Dateien ziemlich unübersichtlich werden, es wird hier und da nur eine Kleinigkeit geändert und schon hat man den Überblick verloren. So wird beispielsweise mehrmals die Eigenschaft margin-top zugewiesen und der Wert dadurch einfach überschrieben. Das verursacht oft überflüssigen und nutzlosen Code, der sich selbst mit firebug oder ähnlichen Tools nur noch schwer warten lässt.
Mehrmals zugewiesene Eigenschaften werden einfach überschrieben, dies kann sehr praktisch sein, aber auch die Suche nach der Eigenschaft, die die gewünschte Darstellung nun “wirklich“ bewirkt, deutlich eschweren. Da CSS-Dateien mit über 1000 Zeilen und etlichen Hacks keine Seltenheit sind, lässt sich eine gewisse Unübersichtlichkeit natürlich nicht immer vermeiden, jedoch kann der Code durch Kurzschreibweisen deutlich optimiert werden. Die Vorteile liegen auf der Hand:
- übersichtlicher
- einfacher zu warten
- Doppelzuweisungen können einfacher/schneller erkannt und vermieden werden
- geringere Dateigröße.
Bei den heutzutage üblichen Bandbreiten sieht vielleicht nicht jeder einen Sinn in der Einsparung von einigen Bytes an einer CSS-Datei, aber spätestens nach dem bekannt wurde, dass die Ladezeit zu einem Ranking-Faktor für google werden soll, macht jede Einsparung Sinn.
Für Kurzschreibweisen sind nicht immer alle Werte notwendig, werden Sie nicht gesetzt, so wird ein Standardwert zugewiesen.
Ich habe zwei Cheatsheets erstellt, die hoffentlich für den einen oder anderen hilfreich sind. Eine ausführliche Version mit allen genannten Schreibweisen (ohne Farben) und eine „CheatCard“, die einfach nur die Kurzschreibweisen enthält.
Border
Eine der gängigsten Kurzschreibweisen ist die Eigenschaft border. Mit ihr lassen sich border-width, border-style und border-color auf einmal zuweisen.
Eigenschaften:
border-width: 1px; border-style: solid; border-color: #FF0000;
Kurzschreibweise:
border: 1px solid #FF0000;
Standardwerte:
border-width: medium; border-style: none; border-color: #000000; /*Browser abhängig, meist schwarz*/
margin
Für margin lassen sich alle vier Werte top, right, bottom und left nacheinander zuweisen. Die Werte werden in der Reihenfolge 1. oben, 2. rechts, 3. unten und 4. links interpretiert.
Eigenschaften:
margin-top: 1px; margin-bottom: 2px; margin-right: 3px; margin-left: 4px;
Kurzschreibweisen:
1px nach oben, 3px nach rechts, 2px nach unten, 4px nach links
margin: 1px 3px 2px 4px;
1px nach oben, 3px nach links und rechts, 2px nach unten
margin: 1px 3px 2px;
1px nach unten und oben, 3px nach links und rechts
margin: 1px 3px;
1px nach oben, unten, rechts und links
margin: 1px;
Standardwerte
0
Padding
Für padding verhält sich das ebenso.
Eigenschaften:
padding-top: 1px; padding-bottom: 2px; padding-right: 3px; padding-left: 4px;
Kurzschreibweisen:
1px nach oben, 3px nach rechts, 2px nach unten, 4px nach links
padding: 1px 3px 2px 4px;
1px nach oben, 3px nach links und rechts, 2px nach unten
padding: 1px 3px 2px;
1px nach unten und oben, 3px nach links und rechts
padding: 1px 3px;
1px nach oben, unten, rechts und links
padding: 1px;
Standardwerte:
0
Background
Dass sich über background die Hintergundfarbe und das Hintergrundbild festlegen lässt, ist sicher jedem bekannt, aber dass ist noch lange nicht alles. Backgound-Attachement ist vielleicht nicht jedem geläufig, es legt fest, ob das Hintergrundbild seinen festen Platz behält oder mit-scrollt.
Eigenschaften:
background-color: #FF0000; background-image: url(../img/background.png); background-attachment: fixed; background-repeat: repeat-x; background-position: center;
Kurzschreibweise:
background:#FF0000 url(../img/background.png) fixed repeat-x center;
Standardwerte:
background-color: transparent; background-image: none; background-repeat: repeat; background-position: top left; /*0% 0% */ background-attachment: scroll;
font
Mit font lässt sich sicher am meisten einsparen, jedoch wirkt es auch am unübersichtlichsten, auf den ersten Blick, wie ich zumindest finde. Auf den zweiten Blick jedoch offenbart es Schrift-Eigenschaften die oft überhaupt nicht berücksichtigt werden, wie zum Beispiel die Zeilenhöhe (line-height).
Eigenschaften:
font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 2em; line-height: 1em; font-family: Arial Sans-serif;
Kurzschreibweise:
font: italic small-caps bold 2em/1em Arial Sans-serif;
Standardwerte:
font-style: normal; font-variant: normal; font-weight: normal; font-size: medium; line-height: normal; font-family: ; /*Browser abhängig*/
list-style
Bisher waren die Kurzschreibweisen relativ weit verbreitet und auch bekannt, aber auch listen lassen sich kürzer stylen.
Eigenschaften:
list-style-type: square; list-style-position: inside; list-style-image: url(../img/list-style.png);
Kurzschreibweise:
list-style: square inside url(../img/list-style.png);
Standardwerte:
list-style-type: disc; list-style-position: outside; list-style-image: none;
Der direkte Vergleich
Um den Unterschied zu verdeutlichen, habe ich zwei CSS-Dateien angelegt, jeweils in Kurzschreibweise und Normalschreibweise.
| Zeichen | Zeilen | Bytes | |
|---|---|---|---|
| Css_long.css | 692 | 42 | 774 |
| Css_short.css | 323 | 23 | 367 |
Alle Werte mit Leerzeichen und Umbrüchen
Gezählt mit notepad++
Hexadezimalfarben
Zum Schluss möchte ich noch auf die Kurzschreibweise für Hexadezimalfarben eingehen, die natürlich die Kurzschreibweisen für background und border ideal ergänzen. Als kleine Einführung, eine “Hexadezimalfarbe” besteht aus 6 Zeichen, jeweils zwei für die Grundfarben Rot, Grün und Blau.
color: #RRGGBB;
Sind nun, wie in diesem Beispiel zwei Zeichen einer Grundfarbe gleich, so kann diese ein zu einem Zeichen zusammengefasst werden.
color: #RGB;
Diese Möglichkeit der Farbangabe muss allerdings nicht immer die kürzeste sein, so ist zum Beispiel der Farbname „red“ um eine Stelle kürzer als die kurze Hexadezimal-Variante, da bei ihr noch eine Raute vorangestellt werden muss.
Welche Variante für die jeweilige Farbe die beste/kürzeste ist, muss deshalb individuell entschieden werden.
Farbtabellen gibt es im Web zur Genüge in allen Variationen, deshalb möchte ich hier nur ein paar Beispiele nennen:
| Schwarz | #000000 | #000 | black |
| Weiß | #FFFFFF | #FFF | white |
| Rot | #FF0000 | #F00 | red |
| Blau | #0000FF | #00F | blue |
| (Limone) Grün | #00FF00 | #0F0 | lime |
| Gelb | #FFFF00 | #FF0 | yellow |
(tm), (mm), (sl)
Über Marcel Weber
Verwandte Artikel
(No Ratings Yet)
