Kurzschreibweisen in CSS – Heute: Hintergründe

Vor ein paar Wochen habe ich euch gezeigt, wie man etwas Code sparen kann, wenn es um die Eigenschaften margin, padding und die diversen border-Eigenschaften geht. Heute möchte ich euch zeigen, wie man beim Hintergrund so einiges an Code sparen kann. Für den Hintergrund gibt es im CSS fünf Eigenschaften, welche allerdings alle in einer Eigenschaft zusammen gefasst werden könnten.

Die Eigenschaft background ist eine Allround-Eigenschaft, welche alle anderen Eigenschaften enthalten kann um somit Code zu sparen und erneut die Ladezeiten zu verringern.

Wie bereits erwähnt, gibt es fünf Eigenschaften im CSS, welche zu background gehören. Allerdings können diese fünf ohne Probleme in die zusätzliche sechste Eigenschaft eingebunden werden.  Hier noch einmal die 5 Eigenschaften im Überblick:

• background-attachment – Bestimmt ob das Hintergrundbild beim scrollen mitwandert.
• background-color – Bestimmt die Hintergrundfarbe.
  
• background-image – Bestimmt das Hintergrundbild
• background-position – Bestimmt die Position des Hintegrundbildes
• background-repeat – Bestimmt ob und in welche Richtung der Hintergrund wiederholt werden soll.

Allein die Eigenschaftsnamen verbrauchen schon mehr – bei background-attachment ist es sogar mehr als das doppelte, als bei background. Das kann man ganz einfach umgehen. Denn mit der Eigenschaft background kann man sich diesen Code sparen und alle in eine Zeile tun.

Hier mal wieder ein Vergleich, wie es aussehen kann, wenn man alle 5 Eigenschaften benutzt:

background-attachment:fixed;
background-color:#123456;
background-image:url(images/bg.gif);
background-position:bottom right;
background-repeat:no-repeat;

Allein diese Angaben verbrauchen 158Byte. Das geht eindeutig platzsparender. Mit der Eigenschaft background sieht das Ganze so aus:

background:#123456 url(images/bg.gif) bottom right fixed no-repeat;

Die Zeile ist natürlich länger, dafür werden aber nur 67Byte verbraucht, Das ist eine Ersparnis von 91 Byte oder auch 57,59% (sollte ich mich nicht schon wieder verrechnet haben). Das sind sogar noch 10% mehr als bei den Richtungen von margin, padding und den border-Eigenschaften.

Die Reihenfolge, welche ich hier gewählt habe, hat nichts zu bedeuten, das ist einfach die Reihenfolge, an die ich mich gewöhnt habe.

Ich hoffe ich konnte euch erneut helfen euren Code etwas zu entschlacken um Ladezeiten einzusparen.