Verkürzte Schreibweisen (Shorthand)
Auch in Stylesheets sollte man sich bemühen, jedes überflüssige Byte zu vermeiden. Die Syntax bietet diverse Möglichkeiten, Anweisungen für bestimmte Elemente zusammen zu fassen. Hier ein paar Beispiele:
.element {
border-top: solid 1px #336699;
border-right: solid 1px #336699;
border-bottom: solid 1px #336699;
border-left: solid 1px #336699;
}
Diese Schreibweise lässt sich zusammenfassen zu:
.element { border: solid 1px #369; }
Ähnliche Möglichkeiten hat man zB. für margin und padding.
Selbst wenn unterschiedliche Wert nötig sind, lässt sich vieles vereinfacht darstellen:
.element {
margin: 5px 0;
}
Hier wird eine Margin von 5 Pixel oben und unten festgelegt, rechts und links 0 Pixel (dem Wert 0 [Null] muss keine Maßeinheit beigefügt werden).
.element {
margin: 0 5px 10px;
}
Diese Schreibweise bedeutet, dass oben 0 Pixel Margin sind, rechts und links 5 Pixel, unten 10 Pixel.
.element {
margin: 5px 5px 10px 20px;
}
Hier hat jede Seite einen anderen Margin-Wert. Gelesen wird immer von oben im Uhrzeigersinn, also:
oben - 5 Pixel
rechts - 5 Pixel
unten - 10 Pixel
links - 20 Pixel
Viel Spar-Potenzial bieten auch Tag-'Familien' wie <a> oder <h>. Die Schreibweise der folgenden Gruppe ist zwar nicht falsch, aber viel zu aufwändig:
a:link {
font-family: Arial, sans-serif;
font-weight: bold;
text-decoration: underline;
color: #0066ff;
}
a:visited {
font-family: Arial, sans-serif;
font-weight: bold;
text-decoration: underline;
color: #006699;
}
a:hover {
font-family: Arial, sans-serif;
font-weight: bold;
text-decoration: underline;
color: #000066;
text-decoration: underline overline;
background: #ccc;
}
a:active {
font-family: Arial, sans-serif;
font-weight: bold;
text-decoration: underline;
color: #ff9900;
}
Viel weniger Aufwand und Code sowie mehr Übersicht bietet die folgende Schreibweise:
a {
font-family: Arial, sans-serif;
font-weight: bold;
text-decoration: underline;
}
a:link {
color: #0066ff;
}
a:visited {
color: #006699;
}
a:hover {
color: #000066;
text-decoration: underline overline;
background: #ccc;
}
a:active {
color: #ff9900;
}
Auch Farbwerte, die meistens als Hexwerte notiert werden, lassen sich verkürzen:
.element {
background: #09c;
}
#09c steht hier für #0099cc - alle Werte, deren einzelne Paare aus jeweils identischen Zahlen bestehen, lassen sich so abkürzen.