Sie sind hier: Start > Artikel

EfA 2001

Wie alles anfing…

Diese Version war mit zwei Style Sheets aufgebaut, wie sie unterschiedlicher kaum sein können. Zum einen gab es eine Datei nn4.css für Netscape 4, die mit absoluten Positionierungen, fixen Bemaßungen (in px) und Netscape-eigenen Erweiterungen des CSS-Standards (wie z. B. layer-background-color) halbwegs garantieren sollte, dass in diesem problematischen Browser das Layout nicht vollständig zusammenbrach.

Tags: , ,

Autor: tc

Was man in Punkto Dateigrößen auf der einen Seite durch den Verzicht auf Layouttabellen einsparte, wurde auf der anderen Seite wieder zum Fenster herausgeworfen. So musste via JavaScript abgefangen werden, dass Netscape bei einer Änderung der Fenstergröße das Layout »vergaß«. Die weitgehende Unfähigkeit, Styles zu vererben hatte zur Folge, dass das eigentlich schlankere NN4-CSS sehr schnell die Dateigröße des Style Sheets für fortschrittlichere Browser überholte.

Die erste Version von EfA Anfang 2001 in MS IE 5 / MacOS 9

Auch der HTML-Code selbst konnte nicht komplett frei von Workarounds für die 4-er Browser gehalten werden. So produzierten tabellenlose Formulare mit per float positionierten Elementen in Netscape 4 unweigerlich einen Totalabsturz. Um die übliche Position von Labels neben ihren jeweiligen Kontrollelementen zu erreichen mussten hier ausnahmsweise noch einmal Layouttabellen eingesetzt werden.

Alles im Fluß

Auf der anderen Seite gab es dann noch ein weiteres Style Sheet für fortschrittlichere Browser, das mit der seinerzeit verbreiteten @import-Methode die vorherigen Angaben überschreib. Dieses CSS-Layout war mit float aufgebaut; relative Bemaßungen garantierten, dass sich die Gestaltung an die unterschiedlichsten Fenstergrößen und Benutzereinstellungen anpasste. Lauffähig war dieses Style Sheet im Internet Explorer ab v.5 (Windows und Mac), Netscape ab 6 und mit Abstrichen und einigen CSS-Hacks sogar noch unter Opera 3.5. Der Kern des Style Sheets bestand aus den zwei Anweisungen für die DIV-Elemente "inhalt" und "navigation":

  1. #inhalt {
  2. float: left;
  3. width: 66%;
  4. }

und

  1. #navigation {
  2. float: right;
  3. width: 32%;
  4. }

Testen, testen, testen

Neben der nächtelangen Feinarbeit am Code wurden die Seiten natürlich auch von und mit Menschen mit Behinderung getestet. So fuhren das gesamte Team mehrmals in die Blindenschule Düren, um dort die Seiten in einer Vielzahl von Screenreadern, Vergrößerungssystemen und Ähnlichem zu testen.

Wie es ab 2003 weiterging lesen Sie in der nächsten Folge…

Diskutieren Sie mit!

Wir würden gerne Ihre Meinung wissen: Teilen Sie uns Ihre Erfahrungen mit und diskutieren Sie diesen Artikel mit anderen Experten.