CSS Shorthands effektiv nutzen – Einführung

Heute will ich eine Artikel-Serie starten, die sich mit CSS Shorthands beschäftigt. Da das Thema ein sehr komplexes ist und nicht mal eben schnell abgehandelt werden kann, werde ich heute nur mit einer kleinen Einführung starten und die anderen Teile der Serie, die dann die einzelnen Möglichkeiten von Shorthands näher beleuchten in den nächsten Tagen Stück für Stück veröffentlichen.

Was sind CSS Shorthands?

Im Grunde genommen ist das schnell erklärt. Es sind schlichtweg Abkürzungen von Definitionen in CSS. Normalerweise muss man z.B. bei einem Rahmen jede Eigenschaft einzeln definieren. Genauer gesagt gibt es für jede dieser Eigenschaften eine eigene Möglichkeit zur Definition:

element {
	border-width: 1px;
	border-style: dotted;
	border-color: #ff0000;
}

Hiermit wird ein Rahmen erstellt, der exakt ein Pixel breit, gepunktet und rot ist. Natürlich ist das umständlich zu schreiben, wenn man, wie ich, seinen Quelltext in einem normalen Texteditor schreibt und nicht in einem dieser speziellen Editoren für CSS. Darum gibt es für obiges Beispiel auch die Möglichkeit dies so zu definieren:

element {
	border: 1px dotted #f00;
}

Der Code hat sich somit auf ca. ein Drittel des Vorherigen gekürzt und ist wesentlich besser zu lesen als zuvor. Die Reihenfolge der einzelnen Werte folgt bei jeder Möglichkeit Shorthands zu nutzen einem festgelegten Muster, damit niemand seine eigene Suppe kochen kann und Browser eine bestimmte Grundlage zum Rendering haben.

Im übrigen kann man auch Farbangaben kürzen, wie man oben sehr gut sieht. So kann z.B. aus #000000 einfach nur #000 werden. Dies funktioniert natürlich nur bei Farbangaben, bei denen jeweils zwei mal die gleiche Ziffer hintereinander erscheint. #12ff66 kann man deswegen nicht in Kurzschreibweise definieren.

So, ich denke das Grundprinzip hat nun jeder verstanden und deswegen fange ich gleich mal an den zweiten Teil zu schreiben.

Hier nun eine Liste der weiteren Artikel, die sich in dieser Serie befinden:

• CSS Shorthands – Innen- und Außenabstand
• CSS Shorthands – Rahmen