Praktische CSS Kurzschreibweisen im Überblick

Mit Hilfe von CSS Kurzschreibweisen (CSS Shorthand Properties) kannst du dein Stylesheet noch übersichtlicher gestalten und außerdem die Dateigröße deines Stylesheets weiter verringern. Daher habe ich eine kleine Übersicht der hilfreichsten Kurzschreibweisen für font-Eigenschaften, border, background & Co zusammen gestellt.

1. font

mit der Kurzschreibweise font kannst du die CSS-Eigenschaften font-style (Schriftstil, z.B. italic), font-variant (z.B. Kapitälchen, small-caps), font-weight (Schriftgwicht, z.B. bold), font-size (Schriftgröße), line-height (Zeilenabstand) und font-family (Schriftfamilie) für die Definition von Schriften zusammenfassen.

Die Reihenfolge der CSS-Eigenschaften in font ist also:
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

(Quelle: W3C, Punkt 15.8 Font Shorthand Property)

Beispiel:
	font-style: italic;
	font-variant:small-caps;
	font-weight:bold;
	font-size:1.4em;
	line-height:1.5;
	font-family:Georgia, serif;

wird in der Kurzschreibweise:

font: italic small-caps bold 1.4em/1.5 Georgia, serif;

CSS-Eigenschaften, welche den Standardwert (normal) behalten sollen, kannst du in der Reihenfolge einfach auslassen, z.B.:

font: bold 1.4em/1.5 Georgia, serif;

2. margin und padding

Auch die CSS-Eigenschaften für margin und padding kannst du Platz- und speichersparend zusammenfassen. Anstatt einzelne Werte für margin-top, margin-right, margin-bottom oder margin-left (bzw. padding-…) anzugeben fasst du alle Werte mit in der einen CSS-Eigenschaft margin (bzw. padding) zusammen.

Beispiel:
margin-top: 30px;
margin-right: 10px;
margin-bottom: 40px;
margion-left: 20px;

wird in der Kurzschreibweise zu:

margin: 30px 10px 40px 20px;

Die Reihenfolge erfolgt immer im Uhrzeigersinn, angefangen wird beim margin-top Wert. Noch kürzer kannst du margin oder padding zusammenfassen, wenn z.B. mehrere Werte gleich sind.

margin: 30px 10px 30px 10px;
wird also zu:
margin: 30px 10px;

Und gibst du nur den Wert von margin-right an, wird der gleiche Wert automatisch auch für margin-left übernommen und du kommst mit drei statt vier Werten aus:

margin: 20px 10px 30px 10px;
wird zu:
margin: 20px 10px 30px;

3. background

Auch die CSS-Eigenschaften background-color (Hintergrundfarbe), background-image (Hintergrund-Bild), background-repeat (Art der Wiederholung des Hintergrundbildes), background-attachment (scrollt der Hintergrund mit oder bleibt er fix) und background-position (Anfangsposition des Hintergrundbildes) für die Definition von Hintergründen kannst du in einer viel praktischeren Kurzschreibweise background schreiben.

Die Reihenfolge der Werte ist:
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

(Quelle: W3C, Punkt background)

Beispiel:
background-color:#066;
background-image: url("bg.png");
background-repeat:repeat;
background-attachment: fixed;
background-position:top left;

wird in der Kurzschreibweise zu:

background:#066 url("bg.png") repeat fixed top left;

Auch bei der Background-Eigenschaft kannst du nicht benötigte Werte weglassen, es wird dann automatisch der Standardwert genutzt.

4. list-style

Außerdem ist es noch sinnvoll, die CSS-Eigenschaften list-style-type (Art des Listenelements), list-style-position (Position des Listenelements) und list-style-image (Bild für Listenelement) in der einzelnen list-style Eigenschaft zusammen zu fassen.

Die Reihenfolge der list-style Eigenschaften lautet:
list-style: [list-style-type] [list-style-position] [list-style-image];

(Quelle: W3C, list-style property)

Beispiel:
list-style-type: square;
list-style-position: outside;
list-style-image: none;

kann zusammen gefasst werden zu:

list-style: square outside;

5. border

Platzsparend und übersichtlich ist auch die Kurzschreibweise für border (Rahmen). Hier kannst du die Eigenschaften border-width (Rahmenbreite), border-style (Stil des Rahmens, z.B. als Fläche, gestrichelt, gepunktet usw.) und border-color (Rahmenfarbe) vereinen.

Die Reihenfolge der CSS-Eigenschaften bei border:
border: [border-width] [border-style] [border-color];

Beispiel:
border-width: 5px;
border-style: solid;
border-color: #666;

wird mit der CSS-Eigenschaft border zusammengefasst in:

border: 5px solid #666;

6. outline

Auch die drei CSS-Eigenschaften für die die Gestaltung von Outlines (Konturen) outline-width (Kontur-Breite), outline-style (Art der Kontur) und outline-color (Farbe der Kontur) können, ähnlich wie bei der border-Eigenschaft, in einer kürzeren Schreibweise geschrieben werden. Der Unterschied von outline im Gegensatz zu border ist übrigens, dass die Breite der outline nicht zum Element dazu addiert wird, sondern die Kontur quasi über dem Element liegt.

Die Reihenfolge der outline-Eigenschaften lautet:
outline: [outline-width] [outline-style] [outline-color];

Beispiel:
outline-width:thick;
outline-style:dotted;
outline-color:#FF0;

Die zusammen gefasste CSS-Eigenschaft lautet:

outline: thick dotted #FF0;

7. transition

Auch die CSS3-Eigenschaften transition-property (definiert, welche Werte verändert werden, transition-duration (Zeitdauer der Veränderung), transition-timing-function (Kurve der Geschwindigkeit der Veränderung, z.B. linear, ease, ease-out etc.) und transition-delay (Verzögerung der Veränderung) lassen sich in der Kurzschreibweise transition zusammenfassen.

Die Reihenfolge der transition-Eigenschaften lautet zusammen geschrieben:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

Beispiel:
transition-property: opacity;
transition-duration: 3s;
transition-timing-function: ease-in;
transition-delay: 1s;

wird in der Abkürzung zu:

transition: opacity 2s ease 1s;

Damit die transition-Eigenschaft in Webkit-Browsern (Chrome und Safari) und Firefox funktioniert, musst du allerdings noch die Eigenschaften -webkit-transition und -moz-transition hinzufügen:

Im oberen Beispiel lautet die vollständigen CSS-Eigenschaften für transition dann:

transition: opacity 2s ease 1s;
-moz-transition: opacity 2s ease 1s;
-webkit-transition: opacity 2s ease 1s;
Weitere hilfreiche Tipps

Um deinen CSS-Code möglichst sauber, übersichtlich und klein zu halten kannst du außerdem das Online-Tool „Clean CSS“ nutzen. In den Einstellungen kannst du genau festlegen, welche Werte du gekürzt, zusammen gefasst und sortieren möchtest. Da beim Komprimieren des Stylesheets auch schnell einmal etwas schief gehen kann, solltest du aber vorab immer eine Sicherheitskopie deines Stylesheets machen.

Möchtest du dir ein CheatSheet mit den wichtigsten Kurzschreibweisen für CSS ausdrucken, kannst du die CSS-Kurzschreibweisen CheatSheets bei Dr.Web nutzen.

Ich hoffe die Übersicht der CSS Shorthand Schreibweisen ist für dich hilfreich. Kennst du noch weitere Tipps für Kurzschreibweisen oder hilfreiche Tools zur Optimierung von CSS? Über dein Feedback und deine Tipps freue ich mich sehr!

Rate this post

16 Kommentare

  1. Danke für die Zusammenfassung. Bei font, margin und padding Nutze ich die Kurzschreibweise fast immer. Bei background nutze ich sie eigendlich nie, weil es manchmal zuuu unübersichtlich wird ;-)

    • Hallo Andre,

      vielen Dank für dein Feedback. Ja, die Kurzschreibweise ist sicher auch ein wenig Gewöhnungssache und jeder nutzt sie etwas anders. Ich habe z.B. bisher die font-Kurzschreibweise meist nicht genutzt, da ich sie aber eigentlich super praktisch finde, gewöhne ich mir das gerade um :-)

      Viele Grüße,
      Ellen

  2. man lernt nie aus. :-)
    wobei mir allerdings jeder browser bei der falschen reihenfolge von „background: bla bla bla“ verziehen hat. nur das mit dem fixed haut dann nicht mehr so hin.

    • Hallo Andi,

      ja, in manchen Fällen ist eine Variante der Reihenfolge möglich. Am besten ist es aber, man nutzt die von W3C-empfohlene Reihenfolge. So ist man auf der sicheren Seite und das Stylesheet wird einheitlicher :-)

      Viele Grüße,
      Ellen

  3. Bei Margin und Padding verwende ich das desöfteren… wobei ich die „lange“ Schreibweise übersichtlicher finde (zb bei Background oder Font)

  4. @Chrissy, @Jonathan, @Ulf,

    vielen Dank für euren Kommentar. Es freut mich, dass euch der Artikel gefällt :-)

    Viele Grüße,
    Ellen

  5. für margin und padding gibt es noch ein paar erweiterungen:

    Aus http://www.w3schools.com/css/css_margin.asp
    The margin property can have from one to four values.

    margin:25px 50px 75px 100px;
    top margin is 25px
    right margin is 50px
    bottom margin is 75px
    left margin is 100px

    margin:25px 50px 75px;
    top margin is 25px
    right and left margins are 50px
    bottom margin is 75px

    margin:25px 50px;
    top and bottom margins are 25px
    right and left margins are 50px

    margin:25px;
    all four margins are 25px

    Anzumerken wäre noch, dass man sich die „vierer“ Variante am besten merken kann, wenn man sich daran erinnert, dass es wie bei einer Uhr im Uhrzeigersinn funktioniert … bei 12 anfangend :)

  6. Während des Lesens habe ich mir gedacht, wow, das müsste man als Cheatsheet für den Schreibtisch haben, und am Ende gab es dann den Link. Vielen Dank für diesen Artikel.

    Was ich noch für border, margin und padding ergänzen möchte: Ist eine Angabe = 0px kann das px auch weggelassen werden.
    Bsp: margin: 10px 0 0 5px;

  7. Sehr nett, nutze ich auch bis auf verkürztes ‚font‘ regelmäßig.

    Bei den margins finde ich einen Teil potenziell verwirrend formuliert:

    „Die Reihenfolge erfolgt immer im Uhrzeigersinn, ange­fangen wird beim margin-top Wert. Noch kürzer kannst du margin oder pad­ding zusam­men­fassen, wenn z.B. meh­rere Werte gleich sind.“

    Stimmt, aber natürlich nur, wenn die gleichen Werte top/bottom oder left/right sind.

    margin: 30px 10px 30px 10px; kann man kürzen
    margin: 30px 10px 10px 30px; kann man nicht kürzen

    Das wird aus dem Beispiel IMHO nicht so richtig deutlich.

    • Hallo Jürgen,

      vielen Dank für dein Feedback. Ja, du hast Recht, deine Formulierung ist deutlicher. Ich werde den Teil im Artikel noch einmal anpassen, vielen Dank für deinen Hinweis :-)

      Viele Grüße,
      Ellen

  8. Vielen Dank für die hilfreichen Tips, optimierte CSS sind super praktisch in der Verwendung und bestimmt auch ein Faktor für „schnelle“ Ladezeiten.

  9. Hi!
    Also font:110%; bspw. funktioniert bei mir definitiv nicht. Fragte mich schon früher öfter, warum sich font nicht zusammenfassten lässt. Liegt vielleicht am prozentualen Wert.
    Eine Zusammenfassung von top, left, bottom, right wäre noch nett.

  10. CSS Kurschreibweisen sollte man nutzen wo es nur geht. Nicht nur der Quellcode bleibt übersichtlicher, sondern auch schlanker – und das ist in Punkto Page Speed Optimierung ein weiteres kleines Puzzlestück für gute Performance.

Hinterlasse eine Antwort

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