Browser-Bugs und Inkompatibiliäten, CSS3
- Textgestaltung mit CSS 2.1 - So zähmen Sie Texte
- Größen
- Browser-Bugs und Inkompatibiliäten, CSS3
- Text am Grundlinienraster
- Absätze und Überschriften
- Listen und Floats
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 m...
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 }