CSS Shorthands

Einige CSS Eigenschaften lassen sich zu kompakten Einzeilern, sogenannten Shorthands, zusammenfassen. Am Beispiel von padding wird die Platz- und Schreib-Ersparnis sichtbar.

.el {
	// lange variante
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 5px;
	
	// shorthand
	padding: 20px 10px 15px 5px;
}

Vier Zeilen schmelzen zu einer Zeile zusammen. In diesem Beispiel spart das nicht nur Platz, sondern auch Schreibarbeit und dient zudem der Übersichtlichkeit. Im Folgenden sind die wichtigsten Shorthands zur schnellen Übersicht in ihrer korrekten Schreibweise und Reihenfolge aufgeführt.

.el {
	padding: top right bottom left;
	margin: top right bottom left;
	overflow: x y;

	font: stretch style variant weight size/line-height family;
	text-decoration: line style color;
	list-style: type position image;

	background: image position / size repeat attachment origin clip color;
	border: width style color;
	border-radius: top-left top-right bottom-right bottom-left;
	box-shadow: trend offset-x offset-y blur spread color;
	transition: property duration timing-function delay;
}

So verlockend die Ersparnis auch sein mag, nicht immer machen Shorthands Sinn. Soll bspw. lediglich das rechte und linke padding eines Elements manipuliert werden, macht eine Deklaration als padding-right und padding-left immer noch mehr Sinn.

Unter anderem sind auch Eigenschaften wie box-shadow aufgeführt, welche, genau genommen, keine wirklichen Shorthands sind, da sie lediglich in der hier aufgezeigten Schreibweise deklariert werden können. Da dies eine Übersicht zum schnellen Nachschlagen der korrekten Anordnung von CSS Property-Values sein soll, wurden diese der Vollständigkeit halber der Liste beigefügt. Auf nähere Erläuterungen der aufgeführten Eigenschaften wird, der Übersichtlichkeit wegen, bewusst verzichtet.

Diese Liste wird zukünftig bei neuen Erkenntnissen und Vorschlägen aktualisiert.


Kommentare

Keine Kommentare vorhanden.