Frames vermeiden durch tabellenfreies Layout

Peter Beauvain
2008-06-14 00:31

In den aktuellen CSS2 Spezifikationen des W3C findet man eine Möglichkeit, die jedem Frame-Fan Tränen in die Augen treibt. Das Thema heißt: Fixed positioning. Eigentlich eine tolle Idee: Elemente werden fest positioniert und verändern ihre Position beim Scrollen nicht. Dieser Effekt wird bis dato nur mit Frames realisiert. Es ist aber auch mit einer reinen CSS-Lösung möglich.

Warum sieht man diese Lösung nirgends? Ganz einfach: Der Internet-Explorer unterstützt diese Art der Positionierung nicht. Das sich Browser wie Mozilla, Firebird und Opera an die W3C Spezifikationen halten und richtig positionieren können, spielt in diesem Fall keine Rolle, da sie nur 5% des Browsermarktes abdecken.

Da für den Internet Explorer das Wort Bug kein Fremdwort zu sein scheint, nutzen wir einen Bug des IE aus, um eine cross-browser-konforme Lösung für dieses Problem zu schaffen.

Der Microsoft - eigene Hack : Conditional Comments

Was sind Microsofts so genannte Conditional Comments ? Mehr dazu findet sich auf der Microsoft Entwickler Seite. Kurz zusammengefasst : Kommentare werden vom IE ebenfalls geparst und nicht wie von anderen Browsern ignoriert. Microsoft führte diese Idee erstmals mit dem IE 5/Win ein. Schade ist, dass es sehr unauffällig geschah und somit ein noch nicht sehr bekanntes Feature ist.
Der Internet Explorer kann Bedingungen innerhalb solcher Kommentare auswerten und sie ausführen, wenn die Bedingung erfüllt wird. Somit kann man also nicht nur andere Styles laden, sondern auch komplette HTML Tags je nach Browser ausführen lassen.

Beispiel:
[Bild]


Das ist kein beeindruckendes Beispiel, aber es zeigt sehr gut, wozu diese Conditional Comments verwendet werden können. Vorteil: Zumindest in der Internet Explorer Reihe ab Version 5 kann man dank dieser Kommentare sehr schön viele Bugs aushebeln und umgehen.

In dem als Attachment angehängten Beispiel benutze ich folgenden Kommentar, um für den IE ab Version 5 eine andere CSS-Datei aufzurufen.

Wörtlich übersetzt : Wenn der aktuelle Browser ein IE ist und die Version größer oder gleich (greater than or equal expression) 5 ist, dann lade ein anderes Stylesheet.

Ich habe einmal versucht, das Ganze für Contenido umzusetzen. Die Datei contenido_solution.zip enthält folgende Komponenten:

  • ein Modul für die Hilfsnavigation (Aufzählungsliste über CSS horizontal formatiert)

  • ein Modul für die Hauptnavigation (Aufzählungsliste über CSS vertikal formatiert)

  • neun Templates für die Haupnavigation (in den Ordner /cms/templates/ kopieren)

  • zwei CSS-Dateien (in den Ordner /cms/css/ kopieren)

  • ein Standard-Layout
In diesem Sinne..... :wink:

[Anmerkung: Das Attachment ist leider nicht mehr verfügbar] Tags: CSS
Durchschnittliche Bewertung: 4.43 (21 Abstimmungen)

Es ist möglich, diese FAQ zu kommentieren.