Leicht verschwommen fotografierte Rolltreppe innerhalb des Atomiums in Brüssel

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:

Share this:

Hallo, ich heiße Benjamin Hofmann und mir gehört dieses Blog. Wenn du mehr über mich erfahren willst kannst du das auf dieser Seite tun. Ich bin natürlich auch auf Twitter, Facebook und Google+ zu finden.

2 comments, add your’s.

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

2 Trackbacks

  1. […] ist der zweite Teil meiner Artikel-Serie über CSS-Shorthands. Im ersten Teil habe ich nur eine kleine Einführung zu diesem Thema gegeben und hier geht es direkt ans […]

  2. […] kommt bereits der dritte Teil meiner Serie über CSS Shorthands. Im ersten Teil gab ich eine kurze Einführung, was das überhaupt ist und was sie bringen, im zweiten Teil wurden Innen- und Außenabstände […]

Leave a comment