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. (mehr …)


Deklarationsreihenfolge von CSS Eigenschaften unterteilt in Gruppen

Die Reihenfolge der Deklaration von CSS Eigenschaften innerhalb eines Selectors folgt keinen festgelegten Regeln. Es bleibt jedem selbst überlassen, in welcher Reihenfolge die Eigenschaften deklariert werden. Ohne Struktur führt dies schnell zu einem großen Durcheinander und mutiert, spätestens in größeren Projekten und in Teamarbeit, zu einem echten Problem. Um dem entgegenzuwirken, gibt es verschiedene Ansätze oder Richtlinien, CSS Eigenschaften zu sortieren. Ich habe mich früh auf eine Variante, die alphabetische Sortierung, festgelegt: (mehr …)


Texte mit CSS abschneiden und auspunkten

Geht das überhaupt? Ja, es ist möglich. Texte lassen sich mit der CSS Eigenschaft text-overflow auspunkten. Leider beschränkt sich diese Funktionalität jedoch auf einzeilige Texte. Perfekt für einzeilige Teaser in Listen, Tabellen oder Button-Beschriftungen. Den kompletten Text kann man beispielsweise bei Mouseover mit Hilfe eines Tooltips präsentieren.

Die Vorteile?

  • Der Aufwand ist verschwindend gering
  • Suchmaschinen bekommen den kompletten Content
  • Bei mehrzeiligen Auflistungen entsteht keine „wellenartige“ Darstellung wie bei (meist serverseitigen) „Nach-X-Buchstaben-Abschneiden“ Lösungen

(mehr …)


Tab-Weite mit CSS korrigieren

Für Code-Darstellungen auf Websites ist die voreingestellte Tabulator-Weite viel zu breit, schon bei kurzen Beispielen wirkt der angezeigte Code unübersichtlich:

<div>
				<div>…</div>
				…
</div>

Zum manipulieren der Tabulator-Weite gibt es mit CSS3 nun die Eigenschaft tab-size:

pre {
	-webkit-tab-size: 2;
		 -moz-tab-size: 2;
			 -o-tab-size: 2;
					tab-size: 2;
}
<div>
	<div>…</div>
	…
</div>

Wie an den Vendor-Prefixes gut zu erkennen ist, hat diese Eigenschaft leider noch nicht in allen Browsern Einzug erhalten. Abhilfe können hier JavaScript-Polyfills (1, 2) schaffen.