Komprimierte CSS-Befehle

Große Projekte bedeuten auch immer große Layoutdateien und meist auch mehrere CSS-Dateien. Je mehr CSS-Befehle, umso unübersichtlicher wird das Ganze. Das Laden und Interpretieren verschlingt trotz gestiegener Bandbreiten und Rechenleistung Zeit, da beispielsweise jede CSS-Datei vor der ersten Verwendung angefordert werden muss. Je länger die Dateien sind, umso länger dauert deren Abarbeitung.

CSS-Befehle lassen sich aber zusammenfassen. Dies führt zu geringeren Ladezeiten, schnelleren Interpretieren sowie übersichtlicheren und kürzeren Quelltexten.

Beispiel 1

font-size: 12px;
line-height: 16px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: Verdana, sans-serif;

Kurzschreibweise:

font: 12px/16px bold italic small-caps Verdana,sans-serif;

Beispiel 2

background-image: url(fileadmin/bild.png);
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 20px 45px;

Kurzschreibweise:

background: url(fileadmin/bild.png) repeat-x scroll 20px 45px;

Komprimierbare CSS-Anweisungen

Background
Border
List-Style
Margin
Outline
Padding

Wenn Sie einige Parameter bei den CSS-Befehlen nicht angeben, so werden sie durch Vorgaben ersetzt.

Weiteres Einsparpotenzial

Das Zusammenfassen von CSS-Klassen und CSS-Dateien bringt weitere wertvolle Millisekunden.

Container, die eine ganze Webseite beinhalten, können ihre Anweisungen auf den BODY- oder HTML-Container übertragen. Eine Webseite mit weniger Container wird schneller gerendet als eine mit vielen Containern.

Siehe auch

ZDnet