Kommentare 26

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 \0020";
}

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!

Kategorie: CSS

Über den Autor

Veröffentlicht von

Hallo, ich bin Ellen, WordPress-Theme-Entwicklerin und Bloggerin bei Elmastudio. Ich liebe das Internet, Reisen, Vegan-Thaifood, Neuseeland und jede Menge Kaffee grünen Tee. Du findest mich auch auf Twitter, Google+, Flickr und Pinterest.

26 Kommentare

  1. Hallo Ellen,
    wie immer sehr hilfreiche Tips – vielen Dank!
    Dein Beispiel zum Kerning sieht allerdings sehr mißverständlich aus, eher, als würde der Text gesperrt. Das eigentlich Entscheidende siehst Du bei der Kombination „Wo“, wo das o unters W geschoben wird, um die Lücke zu schließen.
    Liebe Grüße,
    Christoph

  2. Hallo,

    so kurz nach dem Urlaub schon wieder aktiv? ;)

    Ich finde ja:
    ::-moz-selection { background: #ff6600; color:#fff; text-shadow: none; }
    ::selection { background:#ff6600; color:#fff; text-shadow: none; }

    Zum Auszeichnen der Textmarkierung. Aber vielleicht hast du denn Tipp schon mal gezeigt.

    Grüße

  3. text-rendering: optimizeLegibility; bringt manchen android browser zum kommentrarlosen absturz – zumindest habe ich das auf htc/gingerbread nachvollziehen können, sonst jedoch wenig darüber gefunden.

  4. vielen dank für die Informativen beiträge auf deiner Webseite. Bei meiner Recherche zu WordPress kam ich nachtürlich nicht drum herum auch auf elmastudio zu stoßen. Da ich eben hier auf die CSS Tipps gestoßen bin und die letzten tage schon über das Problem HTML 5 und CSS 3 gegrübelt habe dachte ich, frage ich mal nach wie du das Problem löst mit älteren Browsern. Auf mein Projekt greifen derzeit noch einige veraltete Internet Explorer (6 und 7) zu denen ich jedoch auch eine funktionierende Webseite Anbieten möchte. Jedoch muss ich zugeben gefallen mir einige der HTML 5 und CSS 3 ansätze sehr gut…

  5. Pingback: CSS-Code-Snippet-Friday: 2 Ränder, Wörter zum Umbrechen zwingen und vertikales Zentrieren mehrzeiliger Texte | senäh

  6. Basti

    eine kleine Sache macht bei mir zumindest probleme…
    wenn ich text-rendering: optimizeLegibility; in verbindung mit @font-face einsetze und dann in der Überschirft &mash; oder ähnliches benutze wird @font-face nach dem strich ignoriert.
    Sehr komisches Verhalten, was wahrscheinlcih seltener zutrifft.. aber mich hat die Scuhe danach halb verrückt gemacht.

  7. Eine wirklich tolle Sammlung. Da sind auch einige dabei, die ich noch nicht kannte. Aber wenn ich mich nicht irre, dann passt der Selektor für den dritten Tipp nicht zu dem HTML dazu. Im Selektor hast du das cite in einem p veschachtelt angegeben, was es aber im HTML nicht ist.

  8. Eine wirklich tolle Sammlung. Da sind auch einige dabei, die ich noch nicht kannte. Aber wenn ich mich nicht irre, dann passt der Selektor für den dritten Tipp nicht zu dem HTML dazu. Im Selektor hast du das cite in einem p verschachtelt angegeben, was es aber im HTML nicht ist.

  9. David

    Also ich bin sehr von den background: gradient (…) angetan.

    Ferner empfehle ich, optimizeLegibility nur sehr vorsichtig einzusetzen (ich habs nur für die retsina-displays angelassen.)

Schreibe eine Antwort