CSS Shorthand: Zusammenfassen, Kombinieren und Verschachteln

CSS Shorthand zu nutzen ist immer dann eine gute Idee, wenn gleiche Anweisungen auf verschiedene Elemente, Klassen oder IDs angewendet werden müssen.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

CSS Shorthand für Überschriften

Angenommen, Sie möchten Ihre Überschriften in Blau und in der Schriftart Verdana darstellen. Das liest sich dann so:

H1 {color: blue; font-family: verdana,arial,helevetica;}
H2 {color: blue; font-family: verdana,arial,helevetica;}
H3 {color: blue; font-family: verdana,arial,helevetica;}

Es geht eleganter. Ein Komma hilft uns dabei:

H1,H2,H3 {color: blue; font-family: verdana,arial,helevetica;}

Was aber, wenn die Styledefinitionen zwar ähnlich, aber nicht identisch sind? Kein Problem, wir arbeiten mit Wiederholungen. Ausgangspunkt sind diesmal unterschiedliche Schriftgrößen, jedoch dieselbe Farbe und Schriftart:

H1 {font-size: 1.2.em; color: blue; font-family: verdana,arial,helevetica;}
H2 {font-size: 1.1.em; color: blue; font-family: verdana,arial,helevetica;}
H3 {font-size: 1.0.em; color: blue; font-family: verdana,arial,helevetica;}

Dies ließe sich dann wie folgt abkürzen:

H1 {font-size: 1.2.em;}
H2 {font-size: 1.1.em;}
H3 {font-size: 1.0.em;}
H1,H2,H3 {color: blue; font-family: verdana,arial, helevetica;}

Das klappt auch prima, wenn es um die Formatierung von Hyperlinks geht. Alles ohne Unterstreichung zeigen? Bitte schön:

A:link,
A:visited,
A:hover,
A:active { text-decoration: none; }

Zahlreiche Anweisungen können Platz sparend zu einer einzigen zusammengefasst werden. Der Effekt bleibt derselbe, die Übersichtlichkeit jedoch wird mächtig erhöht.

CSS Shorthand für Rahmen (Border)

Das wohl bekannteste Beispiel für CSS Shorthand ist der Rahmen. Rahmenbreite, Rahmenfarbe, Rahmenart. Einzeln definiert, erhalten wir zum Beispiel dies:

border-width: 1px;
border-color: red;
border-style: dotted;

Zusammengefasst sieht es dann so aus:

border: 1px red dotted;

Aber das klappt auch mit Schriften. So kennt man es:

font-size: 12px;
line-height: 120%;
font-family: Verdana,Arial,Helvetica

Und so geht es auch:

font
: 12px/120% Verdana,Arial,Helvetica

Kommata und Schrägstrich sorgen dafür, dass der Browser nichts missversteht.

CSS Shorthand für Hintergrundbilder

Ein weiteres Anwendungsgebiet ist das Hintergrundbild (mehr dazu im Leitfaden Background Images in CSS). So wird eine Grafik rechts unten platziert:

background-color: yellow;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: bottom right;

Zusammengefasst erhalten wir dies:

background: yellow url(image.jpg) no-repeat bottom right;

CSS Shorthand für Abstände (Margins und Padding)

margin-top: 9px;
margin-right: 8px;
margin-bottom: 7px;
margin-left: 6px;

Raffinierter geht es auf diese Weise

margin: 9px 8px 7px 6px;

Mit Padding ist das ebenso möglich.

Kunstvoll geht es nun zu. Angenommen man möchte innerhalb einer Menüleiste andere Formatierungen benutzen, als es auf der übrigen Seite der Fall ist. Andere Schriften, Textauszeichnungen, Farben, was auch immer. In der Folge müssen neue Klassen definiert werden.

Ein Beispiel für eine solche CSS Datei:

P { font-family: Verdana, Arial; color: blue}

H3 { font-weight: normal; text-decoration: none;}

.menue { border: 1px solid black;}

.menueschrift { font-family: Arial; color: red;}

.menueueberschrift { font-weight: bold; text-decoration: underline;}

Stattdessen verschachteln wir:

P { font-family: Verdana, Arial; color: blue}

H3 { font-weight: normal; text-decoration: none;}

.menue { border: 1px solid black;}

.menue P { font-family: Arial; color: red;}

.menue H3 { font-weight: bold; text-decoration: underline;}

Wir definieren P und H3, sofern Sie innerhalb des Menüs vorkommen, kurzerhand um. Der Vorteil liegt hier nicht unbedingt innerhalb der CSS- sondern in der HTML-Datei. Man spart sich nämlich die Definition diverser Klassen.

Dies lässt sich weiter auf die Spitze treiben. So werden alle Fettschriften innerhalb eines Absatzes innerhalb des Menüs rot:

.menue P STRONG {color: red;}

Alle übrigen P- oder STRONG-Tags werden nicht beeinflusst. All das kann weit komplexer gedacht werden und bietet eine Menge Raum für zusätzliche Optimierung.