5 CSS-Tipps zur Optimierung deines Stylesheets

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>

CSS Tipps before und after Pseudoklassen

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).

CSS Tipp Text-Rendering

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.

CSS Tipp word-wrap: break-word

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.)

Markus Ostermeier
Markus Ostermeier
Contact: markus(at)ostermeier(dot)net - My Coffee is always #000000! - Base-Station: GPS 48.749878 11.975666, Code Plus 8FWHPXXF+XQ - It all started with a Commodore 64...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darĂŒber, wie deine Kommentardaten verarbeitet werden .