www.lipfert-malik.de>webdesign>tutorial>HTML für alle Browser Impressum

HTML: Für alle Browser

Kristof Lipfert
Dipl.-Des.(FH)

Nicht nur bei CSS, auch zu HTML gibt es verschiedene Cross-Browser-Strategien.

Erklärung

Alle genannten Marken- und Produktbezeichnungen sind Warenzeichen der entsprechenden Inhaber. Keine Haftung für hier vorgestellte Verfahren. Hier wiedergegebene Verfahren und Methoden werden ohne Rücksicht auf die Patentlage dargestellt. Trotz sorgfältiger Arbeit können Fehler nicht ausgeschlossen werden. Scripte sind teilweise verkürzt. Es gilt ausschließlich deutsches Recht. Copyright © 10/2002 Kristof Lipfert, Lipfert & Malik GbR Düsseldorf Web-Design, Alle Rechte vorbehalten einschließlich Vervielfältigung, Übersetzung, elektronische Speicherung und Verarbeitung. Veröffentlichung, auch auszugsweise, nur mit schriftlicher Genehmigung des Autors Kontakt. (Arbeitsumgebung:) Scripte und Methoden wurden i.d.R., um ältere Browser zu berücksichtigen, u.a. mit dem Microsoft Internet Explorer 4, Netscape Communicator 4.07, 4.5, 4.6 und 4.70 unter Windows 9x getestet.

HTML Ziele

Die Ziele beim Einsatz von HTML haben sich eigentlich in den letzten Jahren nicht so sehr verändert, immer noch geht es in den meisten Anwendungen von HTML bei Webseiten schließlich darum dass in jedem Browser eine Seite richtig wiedergeben kan.

Neu ist aber die Bedeutung barrierefreier Seiten, und die genutzten Browser verfügen über andere Fähigkeiten als ihre Vorversionen. Es lassen nun sich verschiedene, auch gegensätzliche Strategien entwickeln.

Verwaltung, Form und Inhalt, Semantic Web

Auch wenn ein semantisches Web mit HTML oder auch XHTML nur begrenzt vorstellbar ist, semantisch richtiges HTML kann die Verwaltung, Pflege und Wartung vereinfachen, die Maschinenlesbarkeit verbessern und besonders die Barrierefreiheit erhöhen. Die Abtrennung der Formatierung vom HTML zielt in die gleiche Richtung.

Kleinster gemeinsamer Nenner

Die klassische Strategie eines kleinsten gemeinsamen Nenners führt mittlerweile nicht weiter. Ein Seitenaufbau der das eigentliche Ziel, von möglichst allen richtig erkannt zu werden, konsequent anwendet kann letztendlich Kompromisse beim richtigen HTML und der Barrierefreiheit bedeuten.

Solche Lösungen können z.B. in einem eigentlich harmlosen und sehr verlässlichen Gebrauch von Tabellen, also table-Tags usw., zur Aufbereitung einer Webseite bestehen. Die Ergebnisse müssen aber nicht unbedingt große Mängel bei der Barrierefreiheit aufweisen, sondern können in der ersten Spalte eine per Link überspringbare Navigation beinhalten.

Fähigkeiten ersetzen

Solch ein einfaches Tabellenlayout kann stimmig in eigentlich allen Browsern dargestellt werden, und beim häufig genutzten IE kann eine Tabelle sogar die Flexibilität von CSS-Anweisungen wie max-width ersetzen.

Soll HTML wie der iframe-Tag zum Zuge kommen gilt es über die Auswirkungen bei Netscape 4 nachzudenken.

Modernes HTML

Modernes HTML entwickelt sich als XHTML in Richtung XML. Die Umsetzung auf vielen Webseiten geschieht auch in Hinblick auf die normierenden Entwicklungen des W3C und berücksichtigt die CSS Fähigkeiten moderner Browser.

Hier, beim CSS, tauchen dann auch die größten Defizite und Notwendigkeiten zu CSS-Hacks auf. Der Leistungsumfang vom CSS ist eigentlich zu gering, es sind oft zusätzliche "bedeutungslose" Hilfcontainer im HTML nötig.

Die erwünschte Trennung von Layout und Inhalt gelingt nicht vollständig, wenn sie denn überhaupt sinnvoll oder möglich ist, da Layout ja oft auch inhaltliche Bedeutung hat.

CSS Hacks

Wie schon ausgeführt kann reduziertes richtiges HTML mit CSS zu verschiedener Darstellung bei verschiedenen Browsern führen. Verzicht wäre eine Lösung, Verzicht auf Layout oder auf gleiche Darstellung.

Nun kann es nicht die Aufgabe von Webdesign sein auf jeglichen gestalterischen Anspruch zu verzichten. Im Interesse der Barrierefreiheit bei sonst stimigen Layout, auch des übersichtlichen und pflegeleichten HTML Code ist ein Weg die Konflikte ins CSS oder zumindest ausserhalb des HTML-body zu behandeln.

Weichen Hacks Filter

CSS Hacks sind grundsätzlich zu vermeiden. Wo sie dennoch sinnvoll sind gibt es ein paar hilfreiche Forderungen

Besonders der letzte Punkt erfordert eine Analyse der jeweiligen Weichen. Welche Techniken können diese Forderungen erfüllen?

Beispiele

img{float:left}
* img{margin:20px}
   

<!--[!lt IE7]>
   

Nachrüstbares HTML

HTML für alle Browser: Fehlende Fähigkeiten wie iframe sind für Netscape 4 eingeschränkt nachrüstbar. Layer-Tags können durch Divs ersetzt werden. Diese Aspekte sind in CSS für alle Browser weiter ausgeführt

Autor, Entwicklung

© Dipl.-Des.FH Kristof Lipfert Webdesign GbR Düsseldorf 10/2002 Redesign 2004