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.

Das war es dann auch schon wieder!
Euer Wishu

Heute möchte ich mich mit dem Thema Richtungen befassen. Gemeint sind hiermit die Richtungen von margin, padding und den diversen border-Eigenschaften.

Dass man jeder Richtung einen unterschiedlichen Wert von margin oder padding zuweisen kann ist schon lange kein Geheimnis mehr. Dass es dafür unterschiedliche Eigenschaften im CSS gibt auch nicht, doch muss man für diese viel mehr Code einsetzen, als wenn man etwas mehr wüsste. Man kann den Code drastisch reduzieren, wenn man bei jedem Element statt 4 Eigenschaften nur noch eine benutzt.

Wie das funktionieren soll? Ganz einfach: Die Eigenschaft margin hat nicht nur die Möglichkeit einen einzigen Wert aufzunehmen, welche in alle 4 Richtungen geht, sondern auch für alle 4 Richtungen separat. Das ist für viele von euch sicherlich nichts neues mehr, doch das geht auch mir 2 Werten oder auch mit 3 Werten. Und hier liegt weiteres Potential zum sparen.

Durchschnittlich benutzen Anfänger folgenden Code um jeder Richtung von margin einen anderen Wert zuzuweisen:

margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;

Dass das auch kürzer geht, ist nicht jedem bekannt. Selbst fortgeschrittene Webdesigner benutzen diese Variante noch häufig – oder wie ich selbst mal erfahren musste, Lehrer von HTML/CSS-Seminaren, bei welchen ich mal unfreiwillig mitmachen musste.

Wie bereits erwähnt gibt es noch die Kurzschreibweise, mit welcher man allen 4 Richtungen einen anderen Wert zuweisen kann. Die Richtungen sind dabei wie folgt hinterlegt: oben, rechts, unten, links. Also so, wie ich es bereits oben im Beispiel verwendet habe. Leichter zu merken ist es vielleicht, wenn man erwähnt, dass es der Uhrzeigersinn ist, welcher oben beginnt.

Dementsprechend würde die Kurzschreibweise so aussehen:

margin:5px 10px 15px 20px;

Es wird nur eine Zeile benötigt und trotzdem hat man die gleichen Angaben gemacht. Nur mal zum Vergleich, die erste Schreibweise hat 75 Bytes verbraucht, die zweite hingegen nur 26 Bytes. Sollte ich mich nicht verrechnet haben, sind das 65,33% Codeinsparung. Dass man diese Technik nicht überall anwenden kann, ist natürlich klar, doch an einigen Stellen kann man damit gut sparen.

Jetzt gibt es aber noch 2 und 3 Angaben. Hierzu 2 kurze Erklärungen, welche ich treffen bereits im wfi gepostet hatte:

Zwei Angaben bedeuten, dass die erste Angabe für oben und unten zählt und die zweite für links und rechts. Also bedeutet margin:10px 5px; dass nach oben und unten 10px angewendet werden und nach links und rechts 5px.

Weiteres gibt es noch 3 Angaben. Dort heißt es, dass die erste für oben gilt, die zweite für links und rechts und die dritte für unten. Also bedeutet margin:10px 5px 20px; dass der Abstand nach oben 10px ist, nach links und rechts 5px und nach unten 20px.

Ich hoffe ich konnte euch damit etwas helfen Code zu sparen. Es lohnt sich auf jeden Fall und gerade das mit den zwei oder 3 Angaben ist eher weniger verbreitet.

Das war es dann auch schon wieder!
Euer Wishu