CSS Shorthand Properties (Kurzschreibweisen)
Von: Jonas, Charleen Mit CSS Shorthand Properties (Kurzschreibweisen) fasst ihr verwandte CSS-Eigenschaften in einer einzigen Anweisung zusammen.
CSS Shorthand Properties (auf Deutsch »Kurzschreibweisen«) ermöglichen es, mehrere verwandte CSS-Eigenschaften in einer einzigen Anweisung festzulegen. Sie tragen dazu bei, den Code übersichtlich zu halten und die Dateigröße zu reduzieren.
Mit Shorthand Properties wie padding, flex oder background lassen sich CSS-Eigenschaften effizient bündeln. Sie erfordern jedoch ein genaues Verständnis der Reihenfolge und Syntax, um Fehler zu vermeiden.
Was sind CSS Shorthand-Properties?
Unter CSS Shorthand Properties versteht man Kurzschreibweisen, mit denen mehrere verwandte CSS-Eigenschaften in einer einzigen Anweisung zusammengefasst werden können. Es ist sinnvoll sie zu nutzen, um den Code übersichtlich zu halten und die Dateigröße der CSS-Dateien zu verringern.
Ob es für eine CSS-Eigenschaft Kurzschreibweisen gibt, ist indirekt daran erkennbar, dass es mehrere Eigenschaften gibt, die identisch starten bzw. thematisch zusammengehören. Wenn ihr im Code z.B. border-width und border-color schreibt, könnt ihr erwarten, dass diese in border zusammengefasst werden können. Es gibt allerdings auch weniger offensichtliche Kurzschreibweisen. Beispielsweise können Positionangaben wie top, bottom in inset zusammengefasst werden.
Im Folgenden stellen wir einige Beispiele vor.
Padding
Ein Beispiel für eine sinnvolle Anwendung von Shorthand Properties ist die Anweisung padding.
In der langen Schreibweise, auch Longhand Property genannt, werden alle Eigenschaften untereinander geschrieben und ihnen die Werte einzeln zugewiesen:
div {
padding-top: 10px;
padding-left: 20px;
padding-bottom: 10px;
padding-right: 20px;
}Mit der Shorthand Property padding können die einzelnen Eigenschaften unterschiedlich zusammengefasst werden.
Einzelne Werte für jede Seite im Uhrzeigersinn:
div {
padding: 10px 20px 10px 20px;
}
/* Für das div-Element gelten nun folgende Innenabstände:
Padding oben: 10px, rechts: 20px, unten: 10px, links 20px */Zusammengefasste Werte für oben und unten, in dieser Reihenfolge:
div {
padding: 10px 20px;
}
/* Für das div-Element gelten nun folgende Innenabstände:
Padding oben und unten: 10px, rechts und links: 20px */Sollen alle Seiten den gleichen Innenabstand erhalten, wird nur ein einziger Wert benötigt:
div {
padding: 10px;
}
/* Für das div-Element gelten nun folgende Innenabstände:
Padding oben, rechts, unten und links: 10px */Border
Ein weiteres nützliches Beispiel ist die Shorthand Property border für Elementumrandungen. In ihr werden border-width, border-style und border-color vereint. Die Langschreibweise sieht folgendermaßen aus:
div {
border-width: 1px; /* Stärke der Linie */
border-style: solid; /* Stil der Linie – z.B. durchgehend, gestrichelt usw */
border-color: red; /* Farbe */
}In der Kurzschreibweise sieht das so aus:
div {
border: 1px solid red;
}Es können auch nur Teile der border-Eigenschaft verwendet werden, beispielsweise nur der Stil oder nur die Farbe definiert werden. Die anderen Werte bleiben unverändert.
div {
border: solid blue;
}Im vorangegangenen Beispiel wurde der Rahmenstil auf solid gesetzt und die Farbe auf blue, während die Dicke des Rahmens weggelassen wurde und somit den Standardwert erhält.
Font
Die font Kurzschreibweise umfasst die Eigenschaften: font-style, font-variant, font-weight, font-size, line-height, und font-family. Sie ist ein gutes Beispiel für die mögliche Verkürzung der CSS-Datei, da statt sechs Zeilen nur eine benötigt wird.
/* Die Longhand Property: */
div {
font-style: italic; /* Stil der Schrift, z. B. normal, italic, oblique */
font-variant: small-caps; /* Variante der Schrift, z. B. normal, small-caps */
font-weight: 200; /* Dicke der Schrift, z. B. normal, bold, lighter, 100, 200 */
font-size: 1rem; /* Schriftgröße, z. B. 12px, 1em, small */
line-height: 1.5em; /* Zeilenhöhe, optional, z. B. 1.5, 1.2em */
font-family: 'Inter'; /* Die Schriftart, z. B. Arial, Verdana, monospace */
}Die entsprechende Shorthand Property sieht folgendermaßen aus:
div {
font: italic small-caps 200 1rem/1.5em 'Inter';
}Auch bei dieser Shorthand Property können einige Werte weggelassen werden. Es können beispielsweise nur Schriftstil, Schriftgröße und Schriftart definiert werden:
div {
font: italic 1rem 'Inter';
}Inset
Die inset Shorthand Property wird verwendet, um die Position eines Elements zu steuern. Sie vereint die Eigenschaften top, right, bottom und left und wird meist verwendet, um absolut positionierte Elemente auszurichten. inset kann verwendet werden, sobald position festgelegt wurde.
div {
position: absolute;
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
}Wie bereits von padding bekannt, beginnt die Reihenfolge in der Kurzschreibweise oben und geht im Uhrzeigersinn weiter, endend bei links.
div {
position: absolute;
inset: 10px 20px 30px 40px;
}
/* Das div-Element hat nun einen Abstand von 10px vom oberen Rand, 20px vom rechten Rand,
30px vom unteren Rand und 40px vom linken Rand seines Containers. */Ebenfalls wie bei padding können Werte in Paare zusammengefasst werden:
div {
position: absolute;
inset: 10px 20px;
}
/* In diesem Beispiel beträgt der Innenabstand zum oberen und unteren Rand nun 10px, zum linken und rechten Rand 20px. */ Oder es wird nur ein Wert definiert, der für den Abstand zum oberen, rechten, unteren und linken Rand des Elternelements gleichermaßen gilt:
div {
position: absolute;
inset: 0;
}Im oberen Beispiel beträgt der Innenabstand 0 Pixel auf allen Seiten.
Flex
Die Shorthand Property flex kombiniert Eigenschaften von Flexbox-Items und steuert die Größe von Elementen in der Flexbox. In flex werden die Eigenschaften flex-grow, flex-shrink und flex-basis in dieser Reihenfolge miteinander kombiniert.
Anstatt also den folgenden Code – die Longhand Property – zu schreiben:
div {
flex-grow: 1; /* Wachstum erlaubt */
flex-shrink: 0; /* Kein Schrumpfen erlaubt */
flex-basis: auto; /* Basisgröße entspricht Inhalt */
}Können die Werte innerhalb einer Regel angegeben werden:
div {
flex: 1 0 auto;
}
/* flex-grow hat in diesem Beispiel den Wert 1, flex-shrink den Wert 0
und flex-basis steht auf auto */ Nur flex-grow und flex-basis:
div {
flex: 1 50px;
}
/* In diesem Beispiel hat flex-grow den Wert 1 und die flex-basis ist 50px.
Flex-shrink wird automatisch vom Browser auf seinen Standartwert 1 gesetzt. */Oder nur ein Wert, der für alle drei Elemente gilt:
div {
flex: 1;
}
/* Durch flex:1; stehen flex-grow und flex-shrink auf 1, flex-basis auf auto.
Der div-Container wächst damit proportional mit anderen Flex-Elementen
und nimmt so viel Platz wie möglich ein. */Background
Ein komplexeres Shorthand Property ist die Eigenschaft background. Die ausführliche Schreibweise definiert alle Eigenschaften einzeln:
div {
background-color: #f0f0f0;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}In der Kurzschreibweise sieht das so aus:
div {
background: #f0f0f0 url('image.jpg') no-repeat center/cover fixed;
}Zu beachten dabei ist, dass background-position und background-size durch einen Slash / getrennt werden müssen, wie im vorangegangenen Beispiel zu sehen.
Zu beachten bei CSS-Kurzschreibweisen
Hier noch ergänzen, dass nicht gesetzte Eigenschaften ggf. überschrieben werden. Siehe das 1. Beispiel hier (gerne in ähnlicher Form hier übernehmen): https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
Shorthand Properties können den Code deutlich vereinfachen, bergen jedoch einige Besonderheiten, die beachtet werden sollten. Insbesondere das Auslassen von Eigenschaften und Werten kann zu unerwartetem Verhalten führen.
Versehentliches Überschreiben vermeiden
Wenn in einer Shorthand Property ein Wert nicht angegeben wird, wird dieser auf den Standardwert (initial) zurückgesetzt. Dadurch werden zuvor gesetzte Werte überschrieben:
div {
background-color: red; /* Hintergrundfarbe wird auf Rot gesetzt */
background: url('image.jpg') no-repeat left top; /* rot wird überschrieben */
}Im obigen Beispiel wurde die zuerst gesetzte Hintergrundfarbe von rot auf transparent geändert, da sie in der Shorthand Property nicht angegeben und so auf ihren Standardwert (transparent) zurückgesetzt wurde.
Dies ist auch für die Vererbung zu beachten: Die Vererbung einzelner Werte ist bei Shorthand Properties nicht direkt möglich. Fehlen Werte, werden diese durch den Standardwert (initial) ersetzt, nicht durch vererbte Werte. Einzelne Eigenschaften können dementsprechend nur mit der Longhand Property und dem Schlüsselwort inherit vererbt werden. Shorthand Properties vererben immer die gesamte Eigenschaft.
Reihenfolge einhalten
Es ist ebenfalls notwendig, die korrekte Reihenfolge der Werte in den Eigenschaften einzuhalten, da die Shorthand Properties sonst nicht funktionieren oder es zu unvorhersehbarem Verhalten kommt. Es gibt einige Hilfen zur Reihenfolgen von Shorthand Properties im Internet zu finden – u.a. bei CSS Values.
Eine gute Hilfestellung bieten auch Code-Editoren wie beispielsweise Visual Studio Code. Wird mit der Maus über eine eingegebene Shorthand Property gefahren, wird eine »Mozilla-Developer-Network« (kurz: »MDN«) Referenz angezeigt, welche die korrekte Reihenfolge (Syntax) der zu definierenden Werte enthält. Zusätzlich wird gezeigt, ab welcher Browserversion die Eigenschaft unterstützt wird.
Zudem gibt es in den Browserinternen Dev-Tools (Hier: Google Chrome) kleine Pfeile bei den jeweiligen verwendeten Shorthand Properties, die durch einen Klick alle Eigenschaften mit ihren zugeordneten (Standard-)Werten anzeigen.
Fazit
Shorthand Properties sind eine große Hilfe und Zeitsparend für erfahrenere Programmierende, aber Anfänger und Lernende sollten sie mit Vorsicht verwenden, da Einzeleigenschaften so gegebenenfalls nicht gelernt werden oder schwer nachzuvollziehende Fehler entstehen können.
Geschrieben von:
Charleen Warkentin
