Eine moderne Webseite sollte heutzutage nicht nur gut aussehen und Informationen leicht zugänglich machen sondern auch schnell laden. Um dies zu erreichen gibt es viele Wege. Dazu gehören natürlich auch die strikte Verwendung von CSS Layouts, sowie natürlich das korrekte Verwenden gängiger Bildformate und den richtigen Kompressionwerten. Eine weitere Möglichkeit die Datenmenge einer Webseite zu reduzieren ist die Verwendung von so genannten CSS Shorthand Properties im folgenden einfach Shorthands genannt.

Shorthands sind eine Abkürzung bzw. Zusammenfassung von mehreren Parametern die ein bestimmte CSS Eigenschaften betreffen. Mit Ihnen ist es möglich bei größeren CSS Dateien die aus mehreren hundert Zeilen Quellcode bestehen schnell eine beachtliche Menge an Dateigröße einzusparen.

Shorthands stehen für folgenden Eigenschaften zur Verfügung: font, background, list,  border, margin/padding sowie outline. Im Folgenden möchte ich euch die einzelnen Eigenschaften zeigen und wie man sie mit Shorthands drastisch kürzen kann.

Eine der meist genutzten und wichtigsten Eigenschaften stellt background dar. Mit ihr kontrollieren wir Aussehen und Farbe von zahlreichen Klassen. Background besitzt zahlreiche Parameter die verwendet werden können und eine einzelne Klasse schnell aufblähen. Hier ein Beispiel.

element {
background-color:#CCCCCC;
background-image:url(/images/bg-container.jpg);
background-position:top left;
background-repeat:repeat-x;
background-attachment:fixed
}

Dieses Beispiel entspricht einer Dateimenge von ca. 0.177KB was für sich gesehen nicht viel ist, bei größeren Webprojekten aber schnell einige hundert Kilobyte Ballast bedeuten.

Background mit Shorthands

element {
background:url(/images/bg-container.jpg) repeat-x top left fixed #CCC;
}

Mit diesen 3 Zeilen Quellcode erreichen wir exakt gleiche Ergebnis bei der Darstellung konnten aber die Dateigröße auf 0.082KB reduzieren was ca. 57% entspricht. Bitte bedenkt auch das ihr nicht zwingend für jedes Element alle Parameter angeben müsst sofern ihr sie nicht braucht, denn auch das spart Platz!

Font gehört zu den komplexesten Eigenschaften da diese die meisten Parameter enthält und die meisten Werte verarbeiten kann. Hier ein Beispiel

element {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:1.5;
font-weight:bold;
font-style:italic;
font-variant:small-caps;
}

Die Datenmenge beträgt hierbei 0.155KB.

Font mit Shorthands

element {
font:Arial, Helvetica, sans-serif 14px/1.5 bold italic small-caps;
}

Dank Shorthands konnten wir die Datenmenge auf 0.08KB reduzieren!

element {
list-style-type: square;
list-style-image: url(/images/list-icon.gif);
list-style-position: inside
}

Die Datenmenge beträgt hierbei 0.114KB.

List mit Shorthands

element {
list-style: inside square url(/images/list-icon.gif);
}

Und wieder erreichen wir dank Shorthands eine Komprimierung von gut 50% auf eine Datenmenge von ca. 0.067KB.

Border ist wieder etwas komplizierter da diese Eigenschaft mehrere Seiten eines Elements betreffen kann und auch als Shorthand etwas aus der Rolle fällt.

element {
border-top: 1px solid #111;
border-left: 2px solid #222;
border-right: 3px solid #333;
border-bottom: 4px solid #444;
}

Dateigröße 0.142KB

Border mit Shorthands

Wichtig hierbei ist die Orientierung der einzelnen Parameter bei border-width und border-color. Hierbei sieht die Reihenfolge wie folgt aus: oben, rechts, unten, links. Man fängt also bei dem oberen Wert an und arbeitet sich im Uhrzeigersinn bis nach links vor.

element {
border: 1px solid #111;
border-width: 1px 3px 4px 2px;
border-color: #111 #333 #444 #222;
}

Dateigröße 0.117KB

element {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}

Datenmenge 0.099KB. Anstatt margin kann hier natürlich auch padding stehen.

Margin / Padding mit Shorthands

element {
margin: 1px 2px 3px 4px;
}

Datenmenge 0.035KB.

Outline wird derzeit leider nicht von allen Browsern korrekt unterstützt obwohl es eine aktuelle CSS 2.1 Eigenschaft ist. Allerdings verhält es sich exakt wie border und ist somit nur der Vollständigkeit halber hier.

element {
outline-top: 1px solid #111;
outline-left: 2px solid #222;
outline-right: 3px solid #333;
outline-bottom: 4px solid #444;
}

Datenmenge 0.138KB.

Outline mit Shorthands

element {
outline: 1px solid #111;
outline-width: 1px 3px 4px 2px;
outline-color: #111 #333 #444 #222;
}

Datenmenge 0.108KB.

Ihr seht also mit Shorthands kann mein einiges an Datenmenge einsparen wenn man es konsequent nutzt. Im Zuge der CSS3 Veröffentlich wird diese Liste an sich Shorthands noch eine Eigenschaften hinzugewinnen sodass diese Seite anschließend aktualisiert werden wird.

Keine verwandten Artikel.