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:
Hey, das ist eine gute Idee, das mit dem Rahmen kenne ich schon, aber zum Beispiel font-style, font-size,… kann man ja auch kürzen. Ich werde das hier weiterverfolgen und bei jedem beitrag gibts ein Design-Update bei mir.
Dann hast du aber noch einiges vor dir, da es viele diverse Shorthands gibt, die ich nach bestem Wissen alle vorstellen will