Experiment #1
An dieser Stelle möchten wir beleuchten, wie weit moderne Browser sich an Standards halten bzw. wie weit sich diese Standard-Treue verbessert hat. Dies interessiert uns natürlich auch unter dem Aspekt, ob Designer mit etwas mehr Hoffnung in die Zukunft sehen dürfen ;-) ...
Um diese Seite zu sehen wie geplant, sollten Sie einen (besser: mehrere) der modernen Browser benutzen (das sind fast alle ausser Netscape 4x/IExplorer 4x und älter). Andere als grafische Browser sehen natürlich trotzdem einen sauber strukturierten Text, der aber in diesem Falle nicht allzu ergiebig ist.
Hinweis: Dies ist eine Testseite - die angebotenen Links im Menü fühen nur auf weitere Testseiten ohne spezifische Inhalte.
Vergleichen Sie die Darstellung in verschiedenen Browsers und ziehen Sie Ihre eigenen Schlüsse. Unser Fazit: Die Standardtreue moderner Browser hat sich massiv gebessert.
Screenshot als Referenz
Natürlich gibt es noch immer allerhand Probleme, hier einige unserer Notizen:
IE 6 - sieht eigentlich gut aus, nur kommt er mit position:fixed immer noch nicht klar. Deshalb scrollt das Menü mit, statt an einer festen Position zu bleiben. Eine nähere Beschreibung dieses Bugs finden Sie hier:
http://www.fabrice-pascal.de/bugbase/posfixedie6/»
NN 6/7 und Mozilla 1 - ziemlich genau das, was wir darstellen wollten.
Seltsam allerdings, dass die kleinen GIFs aus dem Menü aussehen, als ob sie frisch aus der Waschmaschine kommen.
Eigentlich müssten sie so aussehen:
Konqueror 3 - ist ebenfalls ok, nur stellt er die kleinen roten Pfeile im Menü nicht dar; siehe auch folgender Kommentar zu Opera.
Opera 6 - hat einige Probleme mit der Darstellung. Vor allem die kleinen GIFs in den Menü-Schaltflächen machen ihm offensichtlich schwer zu schaffen. Auch die kleinen roten Pfeile werden nicht angezeigt, allerdings wird dies vom Hersteller erklärt:
All CSS2 selectors are supported with the exception of:
:first-child, :focus, :lang;
combinations with pseudo-classes before other selectors.
http://www.opera.com/docs/specs/#css»
Der zweite erwähnte Fall ist genau das, was in unserem Beispiel verwendet wurde. Vielleicht in der nächsten Version ...
Achten Sie auch auf die Trennlinien im Menü, vor allem beim Scrollen - wir haben diesen kleinen Fehler zu Demonstrationszwecken nicht behoben. Es kommt auf die Art der Einbindung an (vergleichen Sie im Sourcecode des Stylesheets):
background-image: url(foo); oder
background: url(foo) fixed;
Sourcecode
Das auf dieser Website verwendete Stylesheet zum Anschauen.
Hinweis: Dieses Stylesheet ist nur ein "Schnappschuss" unserer aktuellen Experimente. Es ist nicht unbedingt optimiert oder perfektioniert. Es kann und soll als Grundlage für Ihre eigenen Versuche mit Styles dienen und muss auf Ihre jeweiligen Bedürfnisse angepasst werden.
Kopieren Sie den Quelltext in eine leere Textdatei und speichern Sie ihn unter einem beliebigen Namen mit der Endung .css ab.
/rgs
