Shorthand CSS – CSS-Deklarationen abkürzen und zusammenfassen
Wenn man allmählich mit Stylesheets gut zurande kommt, sich damit auskennt und das Prinzip verstanden hat, sind so genannte »Shorthand CSS«-Angaben ganz interessant. Zum einen, um Getippse zu sparen, zum anderen, um mehr Übersicht ins Stylesheet zu bringen. Viele CSS-Deklarationen können nämlich zusammengefasst und/oder abgekürzt werden.
Ohne viele Worte zu verlieren, kann man das Prinzip am besten an einem Beispiel erklären:
Anstatt von
font-size: 1em;
line-height: 1.7em;
font-weight: bold;
font-style: italic;
font-family: sans-serif;
kann man auch einfach
font: 1em/1.7em bold italic sans-serif;
schreiben, und es kommt dasselbe dabei raus. Schon auf den ersten Blick sieht man, dass die zweite Variante viel kürzer ist und demnach auch praktischer. Da bei den einzelnen Werten klar ist, zu welchen Eigenschaften sie gehören, dürfte auch keine Verwirrung aufkommen.
Diese Art von Verkürzung ist nicht nur bei den font-Eigenschaften, sondern auch bei einigen anderen Deklarationen wie beispielsweise margin, padding, background oder border. Eine Übersicht findet sich schnell über Google und gibt es zum Beispiel hier: Dustin Diaz – CSS Shorthand Guide
toller tipp, das fontzeuch war mir noch nicht bekannt, der rest mit borders und co kenne ich nur in der verkürzten version.
Mache ich auch immer so, solange es der Lesbarkeit/Verständlichkeit nicht schadet.
Sprich: bei padding/margin nehme ich nie die Variante mit 3 Werten, weil ich mir nie merken kann, für welche Seiten die dann zählen :-) 4 Werte oder 2 kann ich mir ja noch merken (weil: Uhrzeigersinn bzw. gegenüberliegende zusammengefasst werden)
Meine Lieblingsseite zum Nachschlagen ist css4you.de
@David: Für die Variante mit drei Werten bin ich auch immer zu vergesslich ;-) 2 oder 4 – wobei an manchen Stellen in meinen Stylesheets auch noch
margin-bottomoder so auftauchen. Ich sollte mal aufräumen…