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.
Nutzen Sie die Abkürzungseigenschaften 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:
.sample1 {
Rand oben: 15px;
Rand rechts: 20px;
Rand unten: 12px;
Rand links: 24px;
Polsterung oben: 5px;
padding-right: 10px;
Polsterung unten: 4px;
Polsterung links: 8px;
border-top-width: dünn;
Rand-Top-Stil: solide;
Rand-Top-Farbe: #000000;
}
Durch das Ersetzen durch einige Abkürzungseigenschaften kann der Code wie folgt reduziert werden. Die tatsächliche Wirkung beider ist genau die gleiche:
.sample1 {
Rand: 15px 20px 12px 24px;
Polsterung: 5px 10px 4px 8px;
border-top: dünner Feststoff #000000;
}
Beachten Sie, dass abgekürzte Eigenschaften auch mehrere Eigenschaften haben, 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 wichtig, die auf die abgekürzte Eigenschaft folgen. 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:
Rand: 5px 5px 5px 5px;
Rand: 5px;
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.
Rand: 5px 10px 5px 10px;
Rand: 5px 10px;
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.
Liste der CSS-Abkürzungseigenschaften
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): 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:
h1 {
Schriftgröße: x-groß;
Schriftstärke: fett;
Farbe: #FF0000;
}
h1 {Schriftgröße: x-groß; Schriftgröße: fett; Farbe: #FF0000}
Kommentare 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 dafür sorgen, dass Ihr Code lesbar und wartbar bleibt.
h1 { /* Überschrift 1 Stil*/
Schriftgröße: x-groß; /* x-groß */
Schriftstärke: fett; /* Fett */
Farbe: #FF0000; /* Rot */
}
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 wird einen kleinen, aber möglicherweise spürbaren Beitrag zum Gesamtziel der Beschleunigung Ihrer Website leisten.