CSS Shorthand-Eigenschaften

In CSS können für Werte für Eigenschaften zugewiesen werden, die miteinander "verwandt" sind. Ein Beispiel hierfür ist die font-family (Schriftart), font-size (Schriftgröße), font-weight (Schriftstärke) etc. All diese Eigenschaften gehören zu der Familie "font" (Schrift). Ein anderes Beispiel sind die inneren Abstände padding-top, padding-right, padding-bottom, padding-left, die alle zur Familie "padding" gehören. In einer CSS-Regel können diese Eigenschaften einzeln angegeben werden. In dem Fall muss man für jede Eigenschaft den dazugehörigen Wert angeben. Ein Beispiel für die normale Schreibweise.

Normale Schreibweise

Bei manchen Eigenschaften ist es möglich, statt der einzelnen Eigenschaft/Werte-Paare die "Familie" anzugeben, zu der die Eigenschaften gehören. Anstelle von padding-top, padding-right, padding-bottom und padding-left könnte man auch lediglich die Eigenschaft padding angeben. Solche Eigenschaften werden in CSS Shorthand-Eigenschaften genannt. Wenn die einzelnen Werte für padding identisch sind (-top, -right, -bottom, -left), reicht ein Eintrag wie auf der folgenden Abbildung.

CSS Shorthand-Eigenschaften

Auf diese Art und Weise hätte man mehrere Zeilen CSS-Code gespart. Wenn die einzelnen Werte nicht identisch sind, so ist die Shorthand-Kurzschreibweise trotzdem möglich. Mehrere Werte werden dabei mit einem Leerzeichen getrennt. In dem Fall muss man jedoch die Reihenfolge beachten. Denn, welche Werte für -top, -right, -bottom und -left gelten, ist fest vorgegeben. Beim padding beginnt man mit -bottom und die restlichen Werte gelten für die übrigen Eigenschaften im Uhrzeigersinn.

CSS Kurzschreibweise mit mehreren Werten

Besonderheit beim Nutzen von Shorthand-Eigenschaften

Bei der Verwendung von Shorthand-Eigenschaften sind folgende Dinge zu beachten.

  • Die Reihenfolge der Werte ist bei den jeweiligen Shorthand-Eigenschaften vorgegeben.
  • Nicht alle Werte müssen angegeben werden.
  • Einige Shorthand-Eigenschaften haben jedoch Pflichtangaben.
  • Selbst wenn einige Werte ausgelassen werden, so gilt die gesamte Regel für alle Eigenschaften.
  • Für ausgelassene Werte gelten die Standardwerte.

Dazu ein Beispiel mit der Shorthand-Eigenschaft background. Man kann darüber einem Element eine Hintergrundfarbe und/oder ein Hintergrundbild zuweisen. Ist das Element größer als das Hintergrundbild und wurde das Hintergrundbild nicht wiederholend eingefügt (no-repeat), dann wird der freie Bereich des Elements, je nachdem was angegeben wurde, entweder mit einer Hintergrundfarbe oder transparent angezeigt.

Wurde die Hintergrundfarbe in einer vorherigen Regel mit background-color: ...; zugewiesen, wird der Wert von der Shorthand-Eigenschaft background überschrieben. Beim folgenden Code würde die Hintergrundfarbe Blau nicht zugewiesen werden, da bei der Eigenschaft background keine Farbe angegeben wurde und die Hintergrundfarbe daher auf den Standardwert gesetzt wird.

div.klasse {
  background-color: blue;
  background: url(bild.png) no-repeat left top;
}

Wenn man den freien Bereich trotzdem mit einer Hintergrundfarbe füllen möchte, so kann man die Farbe entweder direkt bei der Eigenschaft background oder danach angeben. Ein Beispiel.

/* Entweder so */
div.klasse {
  background: blue url(bild.png) no-repeat left top;
}

/* Oder so */
div.klasse {
  background: url(bild.png) no-repeat left top;
  background-color: blue;
}

Wenn man mit den Shorthand-Eigenschaften arbeitet, dann muss man beachten, dass damit eine Regel für alle Eigenschaften definiert wurde, für die die Shorthand-Eigenschaft zuständig ist und für nicht angegebene Werte Standardwerte verwendet werden.