Kurzschreibweisen von CSS-Befehlen
Performance-Optimierung bedeutet unter anderem auch, den Code einer Website möglichst minimal zu halten. Keine Umwege gehen, Scripte und CSS-Dateien möglichst klein halt und jedes Zeichen einsparen, was nur irgendwie möglich ist. Beim Thema CSS-Code ist das zum Glück sehr einfach, denn CSS kennt verschiedene Kurzschreibweisen, die zum Teil ganze Blöcke ersetzten können. Viele Blogger haben davon aber leider keine Ahnung und legen noch die alten Befehle an, die mehrere Zeilen verschwenden, obwohl der gesamte Code auch mit nur einem Befehl abgehandelt werden könnte. Hier möchte ich euch heute deshalb mal die gängigsten und wichtigsten Kurzschreibweisen für CSS aufzeigen, mit denen ihr euren Code entsprechend minimieren könnt.
Font
Bei der Schrift lässt sich eine Menge einsparen, indem alles mit dem Font-Befehl zusammengefügt wird. Zunächst die Gewichtung der Schrift, dann Größe und Abstand, sowie am Ende die eigentliche Schriftart.
//Kurzschreibweise font: 700 14px/21px arial; //Originalschreibweise font-weight: 700; font-size: 14px; line-height: 21px; font-family: arial;
Background
Beim Background lässt sich vermutlich am meisten sparen, denn hier kann alles in nur einer Zeile seinen Platz finden. Der Hintergrund zuerst, dann das verlinkte Bild, die Position, in diesem Falle oben und mittig, sowie die Größe des Bildes, hier 50px und eine automatische Höhe. Alles findet seinen Platz in nur einer Zeile Code.
//Kurzschreibweise background: #000 url(bild.jpg) top center / 50px auto no-repeat fixed; //Originalschreibweise background-color: 000; background-image: url(bild.jpg); background-position: top center; background-size: 50px auto; background-repeat: no-repeat; background-attachment: fixed;
List-Style
Natürlich lässt sich auch beim List-Style ein wenig Code sparen, wobei der Nutzen hier nicht sonderlich groß ist. Aber auch wenig Optimierung kann große Ergebnisse erzielen, je nachdem wie oft dieser Befehl im Einsatz ist.
//Kurzschreibweise list-style: disc outside url(bild.jpg); //Originalschreibweise list-style-type: disc; list-style-position: outside; list-style-image: url(bild.jpg);
Margin/Padding
Das zusammengeschriebene Margin/Padding haben die meisten inzwischen verinnerlicht. Was viele aber vergessen ist, dass, wenn oben unten und rechts und links die gleichen Werte aufweisen, auf eine erneute Angabe verzichtet werden kann. So reduziert sich der Code nochmals enorm.
//Kurzschreibweise margin: 1px 2px; (bottom und left werden kopiert, wenn sie gleich sind) //Originalschreibweise margin-top: 1px; margin-right: 2px; margin-bottom: 1px; margin-left: 2px;
Border
Auch Ränder werden heute ganz simpel und schnell zusammengeschrieben. Einfach in eine Zeile quetschen, fertig ist der schöne Rand. Aber auch das sollte inzwischen von den meisten genutzt werden.
//Kurzschreibweise border: 1px solid #000; //Originalschreibweise border-right-width: 1px; border-right-color: #000; border-right-style: solid;
Allgemeiner Tipp
Am Ende noch ein allgemeiner Tipp, mit dem ihr nochmal ein paar Zeichen einsparen könnt. Am Ende des Selektors ist das “;” nämlich überflüssig und somit kann auf dieses verzichtet werden. Das wird von den meisten Anwendern vergessen, sodass sich im Code die überflüssigen Zeichen ansammeln und die CSS-Datei wieder aufblähen.
//Kurzschreibweise
.class
{
color:#fff;
background:#000
}
//Originalschreibweise
.class
{
color:#fff;
background:#000;
}
Die wichtigsten CSS Kurzschreibweisen
Das waren sie nun, die wohl wichtigsten CSS Kurzschreibweisen die es so gibt. Mittlerweile sollten diese zwar eigentlich schon Standard sein, doch in vielen WordPress Themes entdecke ich nach wie vor noch eine ganze Menge Code und überflüssige Umwege. Auch bzw. erst recht in der CSS-Datei. Wer also noch nicht optimiert hat, sollte seine CSS-Datei entsprechend prüfen und dort wo es möglich ist auf eine der oben dargestellten Kurzschreibweisen setzten. So spart ihr eine Menge Zeichen und Zeilen und das kommt der Performance eures Blogs garantiert zu Gute. Also los jetzt, ran ans optimieren.
