CSS-Abkürzungen können die Größe von CSS-Dateien effektiv reduzieren

Eine wichtige Messgröße für die Benutzerfreundlichkeit einer Website ist die Geschwindigkeit, oder genauer gesagt, wie schnell eine Seite im Browserfenster eines Besuchers erscheint. Es gibt viele Faktoren, die die Geschwindigkeit beeinflussen, darunter die Geschwindigkeit Ihres Webservers, die Internetverbindung Ihres Besuchers und die Größe der Datei, die der Browser herunterladen muss. Obwohl Sie die Geschwindigkeit Ihres Servers und Ihrer Verbindung nicht kontrollieren können, können Sie die Größe der Dateien steuern, aus denen die Webseiten Ihrer Website bestehen.
Um Websites schneller zu machen, komprimieren und optimieren Webentwickler routinemäßig jede Bilddatei auf ihrer Website, wobei sie häufig Abstriche bei der Bildqualität machen, um die Dateigröße um einige Prozentpunkte zu reduzieren. Da es sich bei CSS-Stylesheets um reine Textdateien handelt und diese im Vergleich zu Bildern relativ klein sind, erwägen Webentwickler selten Maßnahmen zur Reduzierung der Größe ihrer CSS-Stylesheet-Dateien. Durch die Verwendung von CSS-Abkürzungen und anderen einfachen Tricks können Sie die Größe Ihres Stylesheets jedoch erheblich reduzieren. In einem informellen Ad-hoc-Test meiner eigenen Stylesheets habe ich die Dateigröße um etwa 25–50 % reduziert.

Verwendung der abgekürzten Natur von CSS

CSS-Kurzeigenschaften sind spezielle Eigenschaftsnamen, die zum Ersetzen mehrerer Sätze verwandter Eigenschaften verwendet werden. Beispielsweise ist die Eigenschaft „padding“ eine Abkürzung für „padding-top“, „padding-right“, „padding-bottom“ und „padding-left“.

Durch die Verwendung von Kurzeigenschaften können Sie mehrere Eigenschafts-/Attributpaare in einer einzigen Codezeile in einem CSS-Stylesheet komprimieren. Betrachten Sie beispielsweise den folgenden Code:


Durch das Ersetzen durch einige Abkürzungseigenschaften kann der Code wie folgt reduziert werden. Die tatsächliche Wirkung beider ist genau die gleiche:


Beachten Sie, dass die abgekürzte Eigenschaft auch über mehrere Eigenschaften verfügt, von denen jede einer regulären Eigenschaft entspricht, die in der abgekürzten Eigenschaft zusammengefasst wird. Eigenschaften werden durch Leerzeichen getrennt.
Wenn Eigenschaften ähnliche Werte haben, beispielsweise bei linearen Messungen von Randeigenschaften, ist die Reihenfolge der Eigenschaften, die auf die abgekürzte Eigenschaft folgen, wichtig. Die Reihenfolge der Attribute beginnt oben (der obere Rand ist leer) und setzt sich im Uhrzeigersinn um das Feld herum fort.
Wenn alle Eigenschaften einer Abkürzungseigenschaft gleich sind, dann können Sie einfach die einzelne Eigenschaft auflisten und diese viermal voranstellen. Daher sind die folgenden zwei Eigenschaften gleich:


Auf ähnliche Weise können Sie Eigenschaftspaare oben/unten und rechts/links darstellen, indem Sie zwei Eigenschaften verwenden, die auf die Rand- oder Abstandseigenschaften folgen.


Die Reihenfolge der Attribute ist nicht wichtig, wenn es sich um unterschiedliche Werte handelt. Daher können Eigenschaften wie Rahmenfarbe, Rahmenstil und Rahmenbreite in beliebiger Reihenfolge auf die Umrisseigenschaft folgen. Das Ignorieren eines Attributs ist gleichbedeutend mit dem Weglassen der entsprechenden allgemeinen Eigenschaft aus den Stilregeln.
Nachfolgend finden Sie eine Liste der abgekürzten CSS-Eigenschaften und der allgemeinen Eigenschaften, die sie darstellen.

Hintergrund: Hintergrundanhang, Hintergrundfarbe, Hintergrundbild, Hintergrundposition, Hintergrundwiederholung
Rand: Randfarbe, Randstil, Randbreite
border-bottom (unterer Rand): Farbe des unteren Randes, Stil des unteren Randes, Breite des unteren Randes
border-left (linker Rand): Farbe des linken Randes, Stil des linken Randes, Breite des linken Randes
border-right (rechter Rand): rechte Randfarbe, rechter Randstil, rechte Randbreite
border-top (oberer Rand): Farbe des oberen Randes, Stil des oberen Randes, Breite des oberen Randes
Cue (Sound-Cue): Pre-Cue, Post-Cue
Schriftart: Schriftart, Schriftgröße, Schriftstil, Schriftstärke, Schriftvariante, Zeilenhöhe, Schriftgrößenanpassung, Schriftdehnung
Listenstil: Listenstilbild, Listenstilposition, Listenstiltyp
Rand (leer): oberer Rand, rechter Rand, unterer Rand, linker Rand
Umriss: Umrissfarbe, Umrissstil, Umrissbreite
Polsterung: obere Lücke, rechte Lücke, untere Lücke, linke Lücke
Pause: Pause danach, Pause davor

Leerraum reduzieren

Eine weitere Möglichkeit, die Größe eines CSS-Stylesheets zu reduzieren, besteht darin, die meisten unnötigen Leerzeichen aus dem Dokument zu entfernen. Mit anderen Worten: Platzieren Sie jede Regelunterbrechung in einer einzigen Codezeile, d. h. entfernen Sie die Zeilenumbrüche und Einrückungen, die ursprünglich in den Code eingefügt wurden, um jede Eigenschaft/jedes Attribut in separate Zeilen zu unterteilen.
Beispielsweise sind die folgenden Codebeispiele inhaltlich identisch, das zweite ist jedoch deutlich raffinierter:


Kommentar löschen

Das Entfernen von Kommentaren aus Ihrem CSS-Code ist eine weitere Möglichkeit, die Dateigröße zu reduzieren. Obwohl Kommentare zum Lesen des Codes nützlich sind, helfen sie dem Browser nicht bei der Generierung Ihrer Webseiten. Viele Web-Builder sind es gewohnt, jede Codezeile oder zumindest jede Regelanweisung zu kommentieren. Solche großzügigen Kommentare sind in CSS-Stylesheets selten notwendig, da die meisten CSS-Eigenschaften und -Eigenschaften leicht zu lesen und zu verstehen sind. Wenn Sie aussagekräftige Namen für Klassen, IDs und andere Selektoren verwenden, können Sie die meisten Kommentare eliminieren und gleichzeitig die Lesbarkeit und Wartbarkeit Ihres Codes gewährleisten.


Durch die Verwendung von Kurzschrifteigenschaften, das Entfernen unnötiger Leerzeichen und das Weglassen von Kommentaren kann die Größe Ihrer CSS-Stylesheet-Datei erheblich reduziert werden. Dies wiederum leistet einen kleinen, aber möglicherweise spürbaren Beitrag zum Gesamtziel der Beschleunigung Ihrer Website.