Professionelle Textgestaltung

Browser-Bugs und Inkompatibiliäten, CSS3

Außerdem könnten Sie die Zeichengröße im Dokument in der Einheit ex angeben. Diese Einheit entspricht der x-Größe der verwendeten Schrift (in der Regel ist es die Höhe des Kleinbuchstaben x). Doch Vorsicht, manche Browser verwenden einfach einen arbiträren Wert von 0.5em, insofern sind Sie mit em besser bedient.

Relative Einheiten wie em oder Prozente sollten nicht auf generische HTML-Elemente angewendet werden (außer html und body). Wird Text in zwei oder mehr Spalten am Grundlinienrast1er ausgerichtet und kommen dabei verschiedene Zeichensätze zum Einsatz, können je nach verwendeter Einheit nicht zu übersehende Fehler auftreten.

Browser-Bugs und Inkompatibilitäten

Webdesigner mussten bisher einen aufwendigen Spagat hinlegen, um Webseiten sowohl mit standardkonformen Browsern als auch mit dem Internet Explorer korrekt angezeigt zu bekommen.

Den Durchbruch für browserübergreifende Seitengestaltung brachte erst CSS 2.1 und die W3C-Konformität kam erst mit dem Acid2-Test in Mode.

Seit Webbrowser wie Mozilla Firefox 3.5.x, Google Chrome 3.x/4.x und Apple Safari 4 den Acid2- und Acid3-Test mit Leichtigkeit bestehen und zudem auch noch CSS3 und HTML5 unterstützen, ist plötzlich das bisher Undenkbare geschehen: Microsoft beteiligt sich zusammen mit dem Apple-Webkit-Team und der Mozilla-Stiftung an der HTML5-Standardisierung.Seit sich viele Web-Designer "IE6 must die" auf ihre Fahnen geschrieben haben, ist Microsoft wieder ernsthaft an der Mitgestaltung von Standards interessiert.

Die Ausdauer und das Beharren auf die konsequente Einhaltung von Standards hat sich für Webdesigner endlich ausgezahlt, da immer mehr fortgeschrittene Layouttechniken verfügbar geworden sind, die vorher im Web unerreichbar erschienen.

Damit sind Probleme mit der browserübergreifenden Kompatibilität von Webseiten zwar noch lange nicht völlig aus der Welt geschafft, aber das ist schon mal der erste Schritt auf dem Weg dorthin.

Unterschiedliche Rundungsgenauigkeiten führen in den verschiedenen Browsern zu unterschiedlichen Resultaten, aber wenn Sie sich dessen bewusst sind, können Sie vorab Gegenmaßnahmen treffen.

Wenn Sie etwa die Textgröße im Dokument in Prozent definieren, bekommen Sie in Internet Explorer bis einschließlich Version 7 immer dann falsche Werte bei untergeordneten Textelementen, die ihre Größen- und Positionseigenschaften vom Vaterelement erben, wenn der Text im Browser vergrößert wird.

Es handelt sich um einen Bug, den Microsoft im Internet Explorer behoben hat. Wenn Sie auch Internet Explorer bis einschließlich Version 7 unterstützen müssen, sollten Sie die Textgröße für das html-Element mittels

h1 {
font-size: 100%;
}

festlegen; alle Änderungen der Zeichengröße bei untergeordneten Textelementen können Sie dann in em angeben.

Ausblick auf CSS3

Das Textmodul in CSS3 führt unter anderem eine neue Einheit namens gd und die Eigenschaft layout-grid ein. Mittels layout-grid können Sie im Dokument ein Layoutraster anlegen und Elemente wie Text an diesem Raster ausrichten, zum Beispiel:

p {
layout-grid: strict both 6pt
10pt; margin: 1gd 3gd 1gd 2gd }

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…