Mit CSS3 Texte schöner machen

Mit den neuen Webstandards lassen sich Texte besser formatieren denn je. Wir stellen die wichtigsten Neuerungen für Webmaster, Redakteure und Blogger vor.

Moderne Websites müssen responsiv, barrierefrei und performant sein. Die Antwort des World Wide Web Consortium (W3C): HTML5 und CSS3. Obwohl noch nicht offiziell Standard, unterstützen gängige Browser viele der Änderungen bereits heute.

Listen gestalten

„Die neuen HTML-Elemente und CSS-Selektoren sorgen für eine bessere Trennung von Gestaltung und Inhalt“, erklärt Karsten Weng, Senior UX Web Designer bei STRATO. Praktisch seien vor allem die neuen Selektoren für Pseudoklassen. „Damit kann ich zum Beispiel festlegen, dass jeder zweite Listenpunkt eine andere Farbe hat.“ Der CSS-Code sieht dann in etwa so aus:

ul li:nth-of-type(even) {
color:#3CF;
}

Webfonts nutzen

Mit CSS3 können Schriften eingebunden werden, die nicht auf dem Computer des Betrachters installiert sind. Die Dateien werden dann von einer anderen Website bzw. Server importiert. Wichtig: Vor dem Einsatz die jeweiligen Lizenz- und Nutzungsrechte klären.

@font-face {
font-family: 'meine_schrift';
src: url('pfad/zu/meine_schrift.ttf') format('truetype');
}

Multi-Column Layout

Inhalte können endlich bequem in Spalten unterteilt werden, bei denen der Text automatisch umbricht. Die wichtigsten Eigenschaften column-width und column-count beschreiben dabei verschiedene Herangehensweisen: Entweder wird die Breite der Spalten vorgegeben oder deren Anzahl. Für Spalten mit einer Breite von (mindestens) 200 Pixeln sieht der Code zum Beispiel folgendermaßen aus:

#textfeld {
width: 500px;
-moz-column-width: 200px;
-webkit-column-width: 200px;
column-width: 200px;
}

Damit alle modernen Browser hier zwei Spalten mit je 200 Pixeln Breite darstellen, enthält dieser Code auch die sogenannten CSS-Browser Präfixes –moz und –webkit. Soll der Text dreispaltig sein, muss die Spaltenzahl festgelegt werden:

#textfeld {
width: 500px;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}

Aufgrund des vordefinierten column-gaps von 1em sind die Spalten in diesem Fall etwas weniger als 166 Pixel breit.

Fazit

HTML5 und CSS3 sind vor allem dafür bekannt, Videos abspielen und abgerundete Ecken darstellen zu können. Doch auch Websites mit viel Text profitieren von den neuen Regeln. Vor allem das Multi-Column Layout Modul macht Webdesignern das Leben leichter. Schade nur, dass es keine Silbentrennung kennt.

Noch werden die Neuerungen nicht von allen Browsern unterstützt. Karsten Weng rät deshalb zu Fallback-Lösungen. Wer auf Webfonts setzt, sollte also trotzdem alternative Schriften wie Arial und Times als zusätzliche Absicherung angeben.

• HTML- und CSS-Tutorials: http://www.w3schools.com