Pick / Empfehlungen

Vielleicht zu beachten, wenn ich das nächste mal wieder CSS Dateien in der Fingern habe ;-)

5 CSS-Tipps zur Optimierung deines Stylesheets:

„Bei der Arbeit (z.B. an einem neuen WordPress-Theme) notiere ich mir immer wieder kleine CSS-Tipps, die ich während der Theme-Entwicklung entdecke oder bei einem fertigen Theme optimiere. Da die Tipps bestimmt auch für andere CSS-Fans hilfreich sind, habe ich eine kleine Liste meiner derzeitigen Lieblings-CSS-Tipps zusammengestellt.

1. Placeholder-Inputtext stylen

Um die Standard-Textfarbe Grau eines HTML5 Placeholder-Textes (z.B. Suchbegriff eingeben… in einem Suchformular) individuell anzupassen, kannst du die folgenden CSS-Eigenschaften mit deinem eigenen color-Wert nutzen:

Der CSS-Code:

::-webkit-input-placeholder {color:#999;}
:-moz-placeholder {color:#999;}
.placeholder {color:#999;}

So kannst du einen dunkleren Grauton oder eine andere Farbe für den Placeholder-Text in Formlurfeldern definieren. Da derzeit die unterschiedlichen Browser noch ihre jeweils eigene Eigenschaft nutzen, musst du alle drei Eigenschaften angeben. Der Internet Explorer unterstützt leider noch keine HTML5 Placeholder. Hier kannst du bei Bedarf auf eine JavaScript-Lösung zurückgreifen (z.B. jQuery Placeholder auf GitHub).

2. text-size-adjust: none

Indem man text-size-adjust mit none setzt, kann man das automatische größer Skalieren von gewissen, als wichtig eingestuften Textelementen (z.B. auf dem iPhone bei Navigationsmenüs oder Elementen der Sidebar) verhindern.

Der CSS-Code:

html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
}

Man sollte zwar etwas vorsichtig mit dieser CSS-Eigenschaft umgehen, da man mit dieser Funktion den Text-Zoom komplett deaktiviert. Eventuell könntest du die Eigenschaft daher nur für die Styles der mobilen Geräte einsetzen.

3. Pseudoklassen :before und :after

Die CSS-Pseudoklassen :before und :after können hilfreich sein, um extra Schriftzeichen, wie z.B. den Gedankenstrich vor dem Zitat-Autor direkt über das Stylesheet zu integrieren. Mit Hilfe der CSS-Eigenschaft content funktioniert das so:

Der CSS-Code:

#content blockquote p cite:before {
	content:"2212 020";
}

Der HTML-Code für ein Zitat mit Zitat-Autor muss dann nur noch in der folgenden Form im Text-Editor eingefügt werden:

<blockquote>Zitattext hier...
<cite><a href="hhttp://LinkZitatAutor.de/">Name des Zitat-Autors</a></cite></blockquote>

4. text-rendering: optimizeLegibility;

Über die CSS-Eigenschaft text-rendering:optimizeLegibility lässt sich die Lesbarkeit von Text optimieren. Besonders sinnvoll ist dies bei größer gesetzten Text-Elementen wie den Überschriften. Die Abstände zwischen den einzelnen Buchstaben werden dann automatisch angepasst (Kerning).

Der CSS-Code:

h1, h2, h3, h4, h5, h6 {
	text-rendering: optimizeLegibility;
}

Die Optimierung sollte allerdings nicht auf alle Texteelemente angewandt werden, da dies die Ladegeschwindigkeit der Webseite im Browser verlangsamen könnte. Die Geschwindigkeit ist vor allem auf mobilen Geräten relevant. Weitere Infos zu text-rendering: optimizeLegibility findest du im folgenden Blog-Artikel »Cross-browser kerning-pairs & ligatures«.

5. word-wrap: break-word

Mit Hilfe der word-wrap Eigenschaft und dem Wert break-word kannst du sicher stellen, dass sehr lange Wörter auf jeden Fall automatisch in die nächste Zeile umgebrochen werden und nicht über den Inhaltsbereich herausreichen.

Dies kann z.B. bei Blogartikel-Überschriften sinnvoll werden oder beim Seiten-Titel eines WordPress-Themes.

Der CSS-Code:

#site-title h1 {
word-wrap: break-word;
}

Welches sind deine Lieblings-CSS-Tipps?

Wie gefallen dir die vorgestellten CSS-Tipps und fallen Dir noch weitere praktische Tipps für die Optimierung des Stylesheets ein? Über dein Feedback und deine weiteren Tipps freue ich mich sehr!

“

(Via Elmastudio.)