Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 10. Januar 2014

HTML5 Logo

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.

Linktipps
Tags: Webdesign

Der Autor:

Autor: Christian Lingnau

Ich heiße Christian Lingnau und bin freier Redakteur für Hosting-Themen, insbesondere WordPress.

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Oliver Meiners
Schreibt über alles, was für Dich als STRATO Kunde wichtig ist

Tobias Mayer
Berichtet über Neuigkeiten aus dem Unternehmen

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden

Ann-Christin Schmitt
Schreibt über HiDrive, den Homepage-Baukasten und guten Websitecontent

Christian Rentrop
bloggt über Software-Themen