position fixed: Elemente im Browserfenster fest positionieren mit CSS

Freitag, 21 November 2008 14:22 MET

Thema:
Webgestaltung  
Stichworte:
, , ,  
 
Button with text: Too Cool for IE6
position fixed: Elemente im Browserfenster fest positionieren mit CSS [hyperkontext | Weblog]

Dieser Beitrag ist kein Tutorial und offenbart auch keine neuen Tricks, um veralteten Anzeigeprogrammen die fixe Positionierung beizubringen.

Der Artikel beinhaltet Verweise mit Anmerkungen zu ausgesuchten Beiträgen der letzten Jahre. Meist ging es vor allem um Möglichkeiten, dem IE6 auf die Sprünge zu helfen, der die CSS Anweisung position:fixed überhaupt nicht versteht.

Ich wurde in den letzten Monaten zwei Mal in Gesprächen darauf angesprochen, wie ich auf meinem Blog den fest positionierten Sprungmarker – unten rechts – nach oben bewerkstellige beziehungsweise es mit der Kompatibilität zum Internet Explorer 6 (IE6) halte. Dann erhielt ich unlängst auch eine E-Mail mit solch einer Frage.

Nun, eigentlich liegt es nahe, das Thema doch gleich in einem Blog-Eintrag aufzubereiten.

Da es bereits unzählige Tutorials dazu gibt, muss ich ja nicht noch eines schreiben. Zumal die mangelnde Unterstützung durch IE6 schon vor Jahren durchgekaut wurde und nämliches Programm langsam, dafür aber sicher, in den digitalen Annalen verschwindet.

Ich habe daher, angereichert mit etwas eigenem Senf, ein paar Verweise zusammengestellt, die genügend Information und praktische Anleitung zur fixen Positionierung geben sollte.

Einfach mit CSS (Cascading StyleSheets)

Wir verankern ein Element mit der CSS-Angabe position:fixed und nach Bedarf noch mit den Positionsangaben top, right, bottom, left an einer fixen Stelle im Viewport. Ein so positioniertes HTML-Element wird aus der Reihenfolge der Seite herausgelöst und scrollt auch nicht mehr mit. Jedes zeitgemäße Ausgabeprogramm versteht das.

Es kommt nun auf die Wichtigkeit eines solcher Art positionierten Elementes an, in welcher Tiefe wir uns in Folge noch mit den Problemen der mangelnden Unterstützung durch IE6 auseinandersetzen müssen.

IE6 kann es halt nicht, na und?

Handelt es sich um eine optische Kleinigkeit, so what. Entweder in einer normalerweise meist sowieso obligatorisch vorhandenen CSS-Quarantäne-Datei für ältere IE-Versionen das Element mit display:none rausschmeißen oder mit position:static versehen und kleiner gleich IE6 halt mitscrollen lassen.

Webgestalter sollten keinen neurotischen Perfektions­drang entwickeln.

Der IE6 bekommt es eben gar nicht mit und die anderen können sich an dem Feature erfreuen.

Der Sprunglink zum Seitenanfang

Der immer im Blickfeld positionierte Pfeil rechts unten auf dieser Seite (in den derzeitigen Layouts) ist für bedauernswerte IE6-Benutzer eben nur am tatsächlich sichtbaren Ende der Seite vorhanden, um sich zum Seitenanfang zu klicken.

Außerdem käme in diesem speziellen Fall einer freigestellten Grafik hinzu, dass ich dem IE6 auch noch den Alpha-Kanal per JavaScript beibringen müsste. Ansonsten nämlich unterschiedliche Hintergründe – über denen der Pfeil zum Liegen kommt –, eine nicht gerade ansehnliche Optik erzeugt.

Konkret: Der fix positionierte Pfeil auf dieser Seite ist eine PNG-Grafik. IE6 und 5.5 bekommt – durch die eigens geladene CSS-Datei – eine GIF-Grafik verpasst, die an den Hintergrund des Footer angepasst ist und auch nur dort steht. Im kontrastreichen Layout gibt es überhaupt nur den Link als Text nach oben. Basta.

Für Kunden-Projekte gilt: Nicht erklären, was meist nicht verstanden wird.

Wenn Auftraggeber selbst noch mit ’nem IE6 herum­fuhr­werken, dann ist das für sie sowieso die Norm. Vielleicht bemerken sie später einmal woanders, dass ihre Seiten in einem modernen Programm noch bequemer benutzbar sind. Dann haben sie den Unterschied selbst erfahren. Und eigene Erfahrungen machen meist schlauer, als mühsame Erklärungen von Dritten.

Ansonsten hilft Literatur vergangener Tage

Wenn wir umfangreiche Konzepte mit fixen Positionierungen planen, stellt sich erst einmal die Frage, ob es nun wirklich in genau dieser Form nötig ist.

Mit Frame-Konzepten des Web aus dem vorigen Jahrhundert beispielsweise wieder reüssieren – Erfolg haben – zu wollen, kann nicht wirklich der eigene Wunsch sein. Leider geistert diese Vorstellung noch in vielen Köpfen herum.

Vor allem von Auftraggebern der Sorte eigentlich netzabstinent aber Inter-, Intranet-Site brauchen wir halt. Hier sind einfache und überzeugende Argumente gefragt, solche Umsetzungs­vorstellungen in eine vernünftige Richtung zu lenken.

Wenn wir also schlussendlich auf die Schwierigkeiten stoßen, welche fixe Positionierungen im IE6 so mit sich bringen, dann machen wir uns am besten bei den unzähligen Beiträgen und Diskussionen vergangener Jahre schlau, die wir vielleicht schon vergessen hatten.

Ein paar ausgewählte Beiträge zum Thema position:fixed und IE6:

Aus dieser Unfähigkeit des IE6 entstand einmal das Projekt
To Cool for IE

Innovationshemmer IE6

Allein an diesem Beispiel sehen wir, warum der IE (6) für Webgestalter ein Albtraum ist. Während fixe Positionierung in CSS 2 seit spätestens 2003 ohne Probleme mit fast allen Browsern bereits möglich war, konnte es trotzdem nur mit viel Herumgetrickse eingesetzt werden. Der IE6 hatte damals einen Marktanteil von 90% und erst das Nachfolgemodell, in Gestalt von Version 7 seit Ende 2006 ist dieser einfachen CSS-Anweisung mächtig und interpretiert sie richtig.

Solche Beispiele mit fehlenden, mangelhaft oder falsch interpretierten CSS-Anweisungen im IE6 gibt es zur Genüge. Die Zeit arbeitet aber unaufhaltsam dafür, dass dieses Unding in den Browser-Statistiken bald endgültig nur mehr eine Null vor dem Komma tragen wird.

Abschnitt 1 von 1

Externe Verweise dieses Artikels wurden zuletzt am 21. November 2008 auf Relevanz geprüft.

Datum:
veröffentlicht am 21 November 2008, 14:22 MET.
Artikel:
position fixed: Elemente im Browserfenster fest positionieren mit CSS [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/173
Thema:
Webgestaltung 
Stichworte:
, , ,  
Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

« neuerer Artikel
Rezension: Das Google-Imperium
älterer Artikel »
Warum der Internet Explorer für Webgestalter ein Albtraum ist