Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Marcel Weber 4. März 2010

CSS-Kurzschreibweisen inklusive Cheatsheets

Schnell kön­nen CSS-Dateien ziem­lich unüber­sicht­lich wer­den, es wird hier und da nur eine Kleinigkeit geän­dert und schon hat man den Überblick ver­lo­ren. So wird bei­spiels­wei­se mehr­mals die Eigenschaft mar­gin-top zuge­wie­sen und der Wert dadurch ein­fach über­schrie­ben. Das ver­ur­sacht oft über­flüs­si­gen und nutz­lo­sen Code, der sich selbst mit fire­bug oder ähn­li­chen Tools nur noch schwer war­ten lässt.

Mehrmals zuge­wie­se­ne Eigenschaften wer­den ein­fach über­schrie­ben, dies kann sehr prak­tisch sein, aber auch die Suche nach der Eigenschaft, die die gewünsch­te Darstellung nun “wirk­lich“ bewirkt, deut­lich eschwe­ren. Da CSS-Dateien mit über 1000 Zeilen und etli­chen Hacks kei­ne Seltenheit sind, lässt sich eine gewis­se Unübersichtlichkeit natür­lich nicht immer ver­mei­den, jedoch kann der Code durch Kurzschreibweisen deut­lich opti­miert wer­den. Die Vorteile lie­gen auf der Hand:

  • über­sicht­li­cher
  • ein­fa­cher zu war­ten
  • Doppelzuweisungen kön­nen einfacher/schneller erkannt und ver­mie­den wer­den
  • gerin­ge­re Dateigröße.

Bei den heut­zu­ta­ge übli­chen Bandbreiten sieht viel­leicht nicht jeder einen Sinn in der Einsparung von eini­gen Bytes an einer CSS-Datei, aber spä­tes­tens nach dem bekannt wur­de, dass die Ladezeit zu einem Ranking-Faktor für goog­le wer­den soll, macht jede Einsparung Sinn.

Für Kurzschreibweisen sind nicht immer alle Werte not­wen­dig, wer­den Sie nicht gesetzt, so wird ein Standardwert zuge­wie­sen.

screen

Ich habe zwei Cheatsheets erstellt, die hof­fent­lich für den einen oder ande­ren hilf­reich sind. Eine aus­führ­li­che Version mit allen genann­ten Schreibweisen (ohne Farben) und eine „CheatCard“, die ein­fach nur die Kurzschreibweisen ent­hält.

Border

Eine der gän­gigs­ten Kurzschreibweisen ist die Eigenschaft bor­der. Mit ihr las­sen sich bor­der-width, bor­der-style und bor­der-color auf ein­mal zuwei­sen.

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 mar­gin las­sen sich alle vier Werte top, right, bot­tom und left nach­ein­an­der zuwei­sen. Die Werte wer­den in der Reihenfolge 1. oben, 2. rechts, 3. unten und 4. links inter­pre­tiert.

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 pad­ding ver­hält sich das eben­so.

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 back­ground die Hintergundfarbe und das Hintergrundbild fest­le­gen lässt, ist sicher jedem bekannt, aber dass ist noch lan­ge nicht alles. Backgound-Attachement ist viel­leicht nicht jedem geläu­fig, es legt fest, ob das Hintergrundbild sei­nen fes­ten 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 meis­ten ein­spa­ren, jedoch wirkt es auch am unüber­sicht­lichs­ten, auf den ers­ten Blick, wie ich zumin­dest fin­de. Auf den zwei­ten Blick jedoch offen­bart es Schrift-Eigenschaften die oft über­haupt nicht berück­sich­tigt wer­den, 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 rela­tiv weit ver­brei­tet und auch bekannt, aber auch lis­ten las­sen sich kür­zer sty­len.

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 ver­deut­li­chen, habe ich zwei CSS-Dateien ange­legt,  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 note­pad++

Hexadezimalfarben

Zum Schluss möch­te ich noch auf die Kurzschreibweise für Hexadezimalfarben ein­ge­hen, die natür­lich die Kurzschreibweisen für back­ground und bor­der ide­al ergän­zen. Als klei­ne 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 die­sem Beispiel zwei Zeichen einer Grundfarbe gleich, so kann die­se ein zu einem Zeichen zusam­men­ge­fasst wer­den.

color: #RGB;

Diese Möglichkeit der Farbangabe muss aller­dings nicht immer die kür­zes­te sein, so ist zum Beispiel der Farbname „red“ um eine Stelle kür­zer als die kur­ze Hexadezimal-Variante, da bei ihr noch eine Raute vor­an­ge­stellt wer­den muss.
Welche Variante für die jewei­li­ge Farbe die beste/kürzeste ist, muss des­halb indi­vi­du­ell ent­schie­den wer­den.
Farbtabellen gibt es im Web zur Genüge in allen Variationen, des­halb möch­te ich hier nur ein paar Beispiele nen­nen:

Schwarz #000000 #000 black
Weiß #FFFFFF #FFF white
Rot #FF0000 #F00 red
Blau #0000FF #00F blue
Grün #00FF00 #0F0 green
(Limone) Grün #00FF00 #0F0 lime
Gelb #FFFF00 #FF0 yel­low

(tm), (mm), (sl)

Marcel Weber

Student der Kommunikations- und Softwaretechnik

21 Kommentare

  1. Guter Artikel & Übersicht. Für CSS Anfänger eine gute und hilf­rei­che Erklärung, was es mit Kurzschreibweisen in CSS auf sich hat.

  2. Find ich toll!

  3. Für sowas bin ich immer ger­ne zu haben… ;-)

  4. Vielen Dank, direkt 2x aus­ge­druckt :)

  5. Vielen Dank, sehr hilf­reich für die Arbeit!!!

  6. @DerThomas und @Marcel Weber:
    Selbstverständlich kann hier jeder sei­ne Meinung sagen. Dazu ist die­se Einrichtung ja auch da.
    Und ich mische mich da grund­sätz­lich auch nicht ein, wenn ande­re mit­ein­an­der dis­ku­tie­ren.

    Aber mitt­ler­wei­le sind wir glau­be ich an einem Punkt ange­langt, an dem Marcel mei­ner Meinung nach in die Defensive gedrängt wird oder sich zumin­dest so füh­len muss.

    Nachdem, was er sich hier für eine Arbeit gemacht hat mit sei­nem Artikel, hat er das nicht ver­dient.

    Sicher hat er nicht ALLE “Gesetze” des css hier erläu­tert und auch nicht alle Möglichkeiten, gewis­se Unstimmigkeiten umge­hen zu kön­nen.
    Aber der Anspruch sei­nes Artikels bezieht sich ein­deu­tig auf die Kurzschreibweisen. Und auch wenn da die eine oder ande­re klei­ne Frage offen bleibt, hat er mei­ner Meinung nach einen sehr guten Artikel hier abge­lie­fert.

    Daran ändert es auch nichts, wenn man ihn dau­ernd immer wie­der und wie­der auf die Standardwerte des Browserrandes auf­merk­sam macht.

    Jeder, der sich auch nur ein biss­chen mit HTML und css aus­kennt weiß, dass die Browser ohne Eingriff mit css einen Rand las­sen, oben und unten etwa 5 Pixel, links und rechts etwa 10 Pixel, je nach Browser.
    Na und dass man die­sen Rand mit der css-Formatierung margin:0 sehr leicht eli­mi­nie­ren kann, das soll­te eines der ers­ten Dinge sein, die man im Umgang mit css lernt.

    Mehr braucht es in die­sem Falle wirk­lich nicht. Denn schließ­lich ist jede noch so fei­ne css-Formatierung in den moder­nen Browsern vom Benutzer in gro­ßem Maße beein­fluss­bar, was ich per­sön­lich sehr bedaue­re. Wozu machen wir uns dann eigent­lich so viel Arbeit?!

    Und jeder Webworker wird dem Hintergrund mit css eine bestimm­te Farbe zuwei­sen, für weiß eben #fff. Das hat man ja schon selbst­ver­ständ­lich gemacht, bevor es css gab.
    Aber dar­um geht es hier ja gar nicht.

    Also hört bit­te auf mit der Erbsenzählerei und damit, den Marcel der­art zu bedrän­gen. Das bringt nichts und das hat er auch nicht ver­dient.

    @Marcel Weber:
    Vielleicht soll­test Du auch nicht auf jeden ein­zel­nen Kommentar ein­ge­hen.
    Das was Du hier abge­lie­fert hast, ist größ­ten­teils sehr gut. Stehe ein­fach dazu. Du hast kei­nen Grund, Dir alles schlecht reden zu las­sen.

    Mit css ist so eini­ges mach­bar, aber Dinge, die nicht zu die­sem Thema pas­sen, soll­test Du ein­fach über­ge­hen.

  7. Standardwerte über­schrei­ben doch nichts.

    Ein Hinweis auf die Möglichkeit zur Veränderung der Standardwerte wäre aber m.E. durch­aus sinn­voll gewe­sen. Ein Anfänger geht laut die­sem Artikel davon aus, dass z.B. stan­dard­mä­ßig die Hintergrundfarbe immer weiß ist.
    Praktisch soll­ten die­se Werte gesetzt wer­den!

    Oh, na wenn es bei css4you und bei SELFHTML so steht, dann muss es ja stim­men. Klasse…

  8. @ DerThomas

    Danke für dei­nen Kommentar und die Hinweise.

    Dass sich Standardeinstellungen ver­än­dern las­sen ist mir bekannt, ich kann im Browser auch z.B. die Schriftart und Größe ein­stel­len und dies damit für alle Webseiten zu Überschreiben, oder gleich kom­plett CSS unter­bin­den, was jeg­li­ches CSS über­flüs­sig machen wür­de.

    Worauf sich die Standardwerte bezie­hen weiß ich lei­der auch nicht mehr so genau, ist zu lan­ge her, als ich CSS gelernt habe, sie sind aber bei css4you beschrie­ben und auch bei SELFHTML wird der Ausgangswert mit “0” beschrie­ben.

    Mit green ist mir natür­lich ein Fehler unter­lau­fen, den ich umge­hen kor­ri­gie­ren wer­de. Danke noch­mal dafür.

  9. @Marcel Weber:
    Da ist eini­ges falsch im Artikel.

    Und zu dei­nem Kommentar 12:
    Folge bit­te der Anleitung die du hier­über sel­ber ver­fasst hast. Wenn du den Rahmen siehst, stel­le dir die Frage war­um die­ser nicht am Rand der Seite “klebt” son­dern Abstand dazu hat.

    Und was sol­len das für Standardwerte im Artikel sein?
    Worauf beziehst du dich? Auf die Werte des W3C jeden­falls nicht.
    In man­chen Browsern kann man die­se Standardwerte übri­gens sogar ver­än­dern.
    (Opera z.B.: Einstellungen -> Webseiten)

    Hier mal ein paar Infos zu den Standardwerten laut W3C:
    http://www.w3.org/TR/CSS2/sample.html
    mar­gin von body und p sind z.B. per default nicht gleich 0.

    Übrigens sind die­se Kurzschreibweisen auch bei SELFHTML recht gelun­gen zusam­men­ge­fasst:
    http://de.selfhtml.org/css/eigenschaften/
    z.B. unter “Außenrand und Abstand” => “mar­gin (Außenrand/Abstand all­ge­mein)”

    Und noch was: green != #0f0

  10. @Harry Schmieder

    Danke für den Tipp, das wäre sicher nicht schlecht gewe­sen, aber ande­rer­seits lässt sich das sicher auch in einem neu­en Artikel unter­brin­gen ;-)

    @jannik

    Das fra­ge ich mich auch des öfte­ren :-)
    Erstelle doch mal ein lee­res HTML file mit mit einem div und gib die­sem einen Rahmen(am ein­fachs­ten noch einen kur­zen text in das div)
    und schau es dir im Browser an.

    Danach setzt du mar­gin auf 0.
    Du wirst kei­ne Veränderung sehen, erst wenn du mar­gin auf min 1px setzt.

  11. @jannik:
    Gerade weil stan­dard­mä­ßig die Werte für mar­gin und pad­ding nicht vor­de­fi­niert sind, muss man sie mit css ange­ben, wenn man fens­t­er­fül­len­de Layouts ohne Rand erstel­len will.

    Das macht man am bes­ten mit dem Universalselektor (*). Dort gibt man für mar­gin und pad­ding 0 ein, dann betrifft das grund­sätz­lich alle Elemente im Layout. Soll ein bestimm­tes Element einen gewis­sen Außen- und / oder Innenabstand haben, dann muss man die­ses Element mit einem mar­gin- und / oder pad­ding-wert >0 for­ma­tie­ren.

    So spart man sich Mehrfach-Formatierungen vom margin:0, padding:0.

  12. Ich fra­ge mich, wo denn die “Standardwerte” für mar­gin und pad­ding her­kom­men. Wenn ich ein neu­es HTML-Dokument ohne jeg­li­che CSS-Deklarationen erstel­le, sind die Standardwerte defi­ni­tiv nicht 0.

    Vor allem hän­gen die Standwerte auch von den Elementen ab, über die man spricht.

  13. Sehr schön und ver­ständ­lich ver­fass­ter Artikel. Lob für Deine Arbeit.

    Vor allem nütz­lich für Newbees auf dem css-Gebiet.
    Jemand, der viel Erfahrung mit css hat und ver­ant­wor­tungs­be­wusst damit umgeht – sor­ry – der braucht die­sen Artikel nicht. Der soll­te das wis­sen.

    Als Konsequenz fehlt mir hier noch, dass man alle Elemente, die die glei­che Auszeichnung haben, zusam­men­fas­sen kann, durch Kommata getrennt.
    So dass prak­tisch jede Auszeichnung nur ein­mal vor­kommt.

    Auch das spielt eine nicht zu unter­schät­zen­de Rolle bei der Kurzschreibweise und dadurch kann man noch­mals eini­ge Prozent an Gewicht ein­spa­ren.

  14. Ich arbei­te eigent­lich seit Jahren mit der Kurzschreibweise, ganz ein­fach weil das Wort “Kurz” weni­ger Zeit benö­tigt.;-)

  15. Gute Liste für vie­le. Benutze die Shorttags selbst auch, nur für die Font Anweisungen meist nicht. Einmal kann ich’s mir da ein­fach nie mer­ken (dafür gibt’s ja jetzt des Cheatsheet), zum andern hal­te ich es bei den Font Angaben über­sicht­li­cher, wenn alles ein­zeln auf­ge­lis­tet wird. Hier ändert man oft ja nur die Schriftgröße und Lineheight.
    Bei den Kurzschreibweisen muss man aller­dings auf­pas­sen, dass man hier eben­falls nichts aus­ver­se­hen über­schreibt. Geht vor allem beim back­ground sehr schnell.

  16. Schön eine sol­che Liste zur Verfügung zu haben.

    Vielen Dank für die Arbeit.

  17. Die Kurzschreibweisen bie den Farben füh­ren übri­gens bei HTML-Mails zu Problemen. Outlook mag sie nicht anzei­gen.

  18. Schöne und sehr nütz­li­che Sache für jeden, der es nicht beruf­lich macht und somit immer im Kopf hat.

    Danke für Deine Arbeit!

  19. @ream88: Sorry – ist kor­ri­giert in: “top, right, bot­tom und left”. Danke für den Hinweis :-)!

  20. Cool, dan­ke! Sowas hab ich schon immer gesucht! :-)

  21. Bei fol­gen­dem Absatz hat sich ein Fehler ein­ge­schli­chen:

    mar­gin

    Für mar­gin las­sen sich alle vier Werte top, bot­tom, right und down nach­ein­an­der zuwei­sen.

Schreibe einen Kommentar zu Marcel Weber Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.