CSS Shorthand Properties

Webseiten die schnell und ohne langes Laden vom Browser aufgerufen werden, sind das Ziel einer nahezu jeden Anwendung. Möglichkeiten wie dies zu erreichen ist, gibt es zahlreiche. Beispielsweise der Verzicht von Tabellen zum Layouten oder das Images nicht zur Darstellung von Texten verwendet werden. Eine weitere Alternative ist der Einsatz von Shorthand-Properties innerhalb von CSS Dateien. Die zusammenfassenden Eigenschaften ( Shorthand-Properties ) sind also eine Zusammenfassung mehrerer Eigenschaften, die zu einer Kategorie gehören ( bspw. background, font, lists oder padding / margin ). Mehrere Eigenschaften zusammengefasst zu einer Eigenschaft, ermöglichen es die Styles wie einzelne Elemente so kompakt und flexibel wie nur möglich zu gestalten. Oft können so 8-10 Zeilen von Eigenschaften zu 2-3 zusammengefast werden. Eine umfangreiche CSS-Datei von mehreren hundert Zeilen und bis zu 20KB oder mehr, kann somit eine nicht zu vernachlässigende Verkleinerung erreichen, sofern die Shorthand-Properties korrekt gesetzt werden.

Font

Die Font Eigenschaft mit ihren zahlreichen Varianten bezüglich Style, Weight, Size etc. bietet sich nahezu für den Einsatz von Shorthand Properties an. Hier kann eine zusammenfassende Eigenschaft für die gleichzeitige Einstellung von "font-style", "font-variant", "font-weight", "font-size", "line-height" und "font-family" definiert werden.

Code-Beispiel
element {
font-style: normal oder italic oder oblique;
font-variant:normal oder small-caps;
font-weight: normal oder bold oder bolder oder lighter;
font-size: (number+unit) oder (xx-small - xx-large);
line-height: normal order (number+unit);
font-family:name,"more names";
}

element {
font: italic small-caps bold 1em/1.2em "Arial","Helvetcia",sans-serif;
}

Background

Ein weiteres Einsatzgebiet der Shorthand Properties findet sich in der Eigenschaft Background wieder. Hier können auch oft mehrere Eigenschaften wie Hintergrundfarbe, Image, Position Abstand ect., eben all die für die Definition des Hintergrundes von Nöten sind, zusammengefasst werden.

Code-Beispiel
element {
background-color: color oder #hex oder (rgb / % oder0-255);
background-image:url(URI);
background-repeat: repeat oder repeat-x oder repeat-y oder no-repeat;
background-position: X Y oder (top oder bottom oder center) (left oder right oder center);
background-attachment: scroll order fixed;
}

element {
background: #fff url(images/image.png) no-repeat 20px 100px fixed;
}

Lists

Die Listeneigenschaften "list-style-type", "list-style-position" und "list-style-image" können ebenso zu einer kompakten Eigenschaft zusammengefasst werden.

Code-Beispiel
element {
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
}

element {
list-style:square inside url(image.gif);
}

Margin/Padding

Die Eigenschaft Margin oder Padding zur Positionierung eines Elementes, kommt in den meisten Style Dateien mehrmals vor. Somit sind sie ebenfalls prädistiniert für Shorthand Properties. Hierbei können alle 4 Richtungen (top, right, bottom, left) hintereinander angegeben werden, wobei es wichtig ist eben genau diese Reihenfolge beizubehalten. Selber einmal probieren und ihr werdet sofort merken, welche Position die Richtige ist.

Code-Beispiel
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}

element {
margin: 1px 2px 3px 4px (top, right, bottom, left);
}

Border

Border sind ein weiteres Einsatzgebiet, denn die Art und Weise ( bspw. dotted, solid ), die Dicke und deren Farbgebung können natürlich auch zusammengefasst werden, wie an dem unteren Beispiel sehr gut zu erkennen ist. Die Reihenfolge der Borderstärke ist die selbe wie bei Margin / Padding.

Code-Beispiel
element {
border-top: 4px solid #000;
border-left: 1px solid #BBC;
border-right: 2px solid #123;
border-bottom: 3px solid #456;
}

element {
border: 1px solid #000;
border-width: 4px 2px 3px 1px;
border-color: #000 #123 #456 #BBC;
}

Testbeispiel: Als Anwendungsbeispiel habe ich mal die general_styles.css der Vodafonewebseite etwas näher unter die Lupe genommen. Alle dortigen Styles sind in einigen Zeilen unsortiert und ohne Struktur zusammengepresst. Alles in allem hatte die Datei ursprünglich 6KB und enthielt 291 Zeilen Styledefinitionen. Einige Klassen bezüglich Schriftdefinition hatten die selben Eigenschaften und können ebenso eingespart werden, wie zahlreiche Zeilen durch den Einsatz effektiver Vererbung.

Original

Code-Beispiel
.heading1 {font-size: 10px; color: #000000; font-family: verdana, helvetica, arial, sans-serif; font-weight: bold;}
.heading2 {font-size: 12px; color: #000000; font-family: verdana, helvetica, arial, sans-serif; font-weight: bold;}
.heading3 {font-size: 15px; color: #000000; font-family: verdana, helvetica, arial, sans-serif; font-weight: bold;}

Shorthand Property + Vererbung

Code-Beispiel
.heading1, .heading2, .heading3 {
font: bold 10px "Verdana","Helvetica",Arial,sans-serif;
color: #000000;
}
.heading2 {
font-size: 12px;
}
.heading3 {
font-size: 15px;
}

Fazit: So kann bspw. eine Farbanpassung oder Schriftartänderung an einer Stelle vorgenommen werden und gilt trotzdem für alle hier definierten Schriftbereiche ( headings ). Alles in allem hat diese Stylekur eine Verringerung auf 3KB, sowie eine Reduzierung auf 152 Zeilen gebracht. Nahezu 50%, die bei jedem Aufruf dieser Styledatei dem User erspart bleiben. Damit wäre die Möglichkeit hier Einsparungen im Bereich der Datenmenge vornehmen zu können, mehr als unterstrichen. Man kann also nicht nur innerhalb der Seitenstruktur ( Stichwort Div-Suppe oder Tabellenlayouts ) im Bereich (X)HTML an KiloBytes sparen.

  1. Peter
    09 Feb 2006, 21:18

    Also wenn man das weiter treibt, kann man noch mehr machen:

    - Die Einrückungen sind letztlich Leerzeichen und die Zeilenschaltungen belegen auch Platz. Wenn man alle wegläßt, bekommt man vermutlich nochmals 10 - 20% weg.

    - Sinnvoll ist natürlich auch eine durchdachte Kaskadierung: Schriftdefinition für Body, in h oder p nur noch Schriftgrößen und Farbe. Margins auf einmal für alle Textelemente definieren etc.

    - Und man kann natürlich sehr kurze Klassenbezeichnungen wählen: .h-1, .h-2 und so weiter.

    - Man kann mehrere Klassen auf einmal zuweisen:

    p class="standard betont"
    p class="zitat betont"
    p class="hinweis betont"

    so ist es möglich, für die Klasse .betont zum Beispiel Farbe, Stil, Gewicht, Hintergrund etc. nur einmal zu definieren und es unterschiedlich formatierten Absätzen zuzuweisen.


  2. Knut Karnapp
    09 Feb 2006, 22:50

    Wenn mans dann zB mit den class Namen soweit treibt, geht das wieder auf Kosten der Zugänglichkeit, wenn das mal wer anders anschauen muss oder auch man selbst mal 2-3 Monate nicht draufgeschaut hat kann das schon zum Nachteil gereichen. Da fragt sich ob das die paar Byte wert sind.


  3. Manuel
    10 Feb 2006, 01:06

    sehr schöne zusammenfassung. die shorthands von font hab ich bisher nie wirklich gerallt. dank dir jetzt glaube ich schon ;)


  4. Daniel
    10 Feb 2006, 07:46

    gibt es eigentlich ein programm mit dem man automatisch leerzeichen und kommentare aus css und html dateien löschen kann

    dann könnte man ja eine version zum entwickeln und bearbeiten auf dem eigenen rechner haben und die version die man auf den server stellt wird mit diesem programm bearbeitet und so kann man noch mal einiges einsparen


  5. Webstandard-Team
    10 Feb 2006, 10:33

    @Peter: Du darfst nicht vergessen das die Leerzeichen hier der besseren Übersicht und Lesbarkeithalber eingesetzt wurden (btw. 20% wirst du damit nicht reinholen )

    - Eine durchdachte Kaskadierung ist absolut erstrebenswert, aber es geht bei den Shorthand Properties hier, um die einzelnen Einsatzmöglichkeiten und nicht um eine ganze Styledatei und deren Aufbau.

    - Man kann auch h1 und h2 wählen, absolut richtig aber die Styleklasse general_styles.css der Vodafonewebseite hat nunmal diese Bezeichnung. Mir ging es nicht darum alles zu ändern, sondern an Hand von Shorthand Properties und Vererbung aufzuzeigen, wieviel man einsparen kann ohne die Änderungen von Struktur und Namensgebungen für Klassen und Ids etc.

    - Und das man mit mehreren Klassen bestimmten Elemente mehrere Formatierungsmöglichkeiten zuweisen kann ist mir auch klar, aber das war eben nicht das Thema des Artikels

    @Knut: Da spricht der Profi ;o) Und genau daran sollte man sich auch halten!

    @Manuel: Gern geschehen ;o)

    @Daniel: Kann ich dir nicht genau sagen, aber manchmal können Kommentare in CSS und HTML Dateien von Vorteil seien, immer daran denken es könnte ja später jemand anderes an diesem Projekt sitzen und der muss sich schnellst möglich innerhalb der Struktur zurechtfinden können. Und dabei sind sinnvoll (keine Aufsätze) eingesetzte Kommentare durchaus von Vorteil.


  6. Mario
    10 Feb 2006, 10:33

    @Daniel: Ja, hier http://cdburnerxp.se/cssparse/css_optimiser.php


  7. Gabi
    11 Feb 2006, 22:42

    Shorthands sind klasse, ich arbeite immer mehr damit. Allerdings habe ich hier und da schon gelesen, dass sie mitunter Probleme im Browser bereiten sollen, daher verzichten manche Webdesigner darauf.

    Kommentare in css- und HTML-Dateien finde ich außerordentlich wichtig, man vergißt einfach zu schnell zu viel... wenn ich nach längerer Zeit ein Projekt mal wieder aufnehme, muß ich mich erst mal wieder "einlesen". Das ist mir die paar Byte immer wert.


  8. B. Scheuert
    12 Feb 2006, 09:41

    Das ist wie das Zusammenfassen von Informationen in Datenbanken - das Stichwort ist REDUNDANT - glaube ich. Das Problem ist, die CSS-Datei ist manchmal zu groß um sie in einer Tabelle aufzubauen, damit man Dopplungen finden und zusammenfassen kann. ENDLOSPAPIER ist angesagt. ;)

    Die Kommentare sind wichtig und sollten auf jeden Fall Platz finden. Nicht immer arbeitet man aleine, manchmal auch im Team.


  9. Jens Schulze
    04 Feb 2007, 20:22

    Eine wirkliche gute Einführung im Bereich Shorthands. Ich persönlich bin leider oftmals ein bissl nachlässig in der Hinsicht, bemühe mich jedoch in diesem Bereich mich zu verbessern.

    Kommentar sind Pflicht, vor allem bei Teamarbeit oder bei späteren Erweiterungen. Desweiteren unterteile ich meistens die CSS in zwei Datein.


  10. anita 05 Apr 2008, 22:53

    ich versuche eine subnavigation in meinem container mit css unten im jeweiligen browserfenster zu plazieren. im ffox funktioniert es. im ie nicht. was mache ich falsch? kann mir jemand helfen?

    hier mein style
    #subnavigation {
    position: absolute;
    height:43px;
    width:350px;
    margin:0px;
    bottom:0px;
    right:10px;
    z-index:2;
    }


  11. Vitaliz 06 Okt 2009, 19:46

    Are you really haven't English version?
    Es ist wirklich traurig, aber ich konnte sie nicht finden die englische Version dieser Seite, aber es war hilfreich! Danke


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage