Skip to content

Progressive Enhancement ::: CSS 3 einerseits jedoch IE 6 andererseits

Progressive Enhancement? im Deutschen könnte man stufenweise Verbesserung oder Erweiterung des Layouts dazu sagen. Hinter diesem Begriff verbirgt sich ein Konzept sich beim Design nicht mehr an den ältesten Browsern zu orientieren und nur zu nutzen, was auch diese umsetzen, sondern Stück für Stück auch kleine Extras für moderne Browser einzubauen. Einen guten Artikel mit Beispielen dazu gibts bei Dieter.

PNG-Transparenz und hover einsetzen

  • Firefox Standardansicht
  • winkt mittels hover im Firefox
  • IE 6 graue Kästen statt Transparenz
In den Sonnenseiten der Webkrauts berichtet Nicolai Schwarz über eine Spielerei bei Qwitter mit den CSS-Sprites. Wie in den Abbildungen des Firefox zu sehen ist, winkt das Männchen. Realisiert wird das schlicht mittels eines Hover-Effekts durch CSS-Sprites, wie es beispielsweise im Artikel von Stefan David beschrieben wird. Eine schöne und einfach ohne JavaScript umzusetzende Spielerei. Die Designer von Qwitter beschlossen, dass sie sich nicht die Mühe machen mit zusätzlichem Aufwand einen ähnlichen Effekt im IE6 zu erzielen. Wie auf dem Screenshot des IE 6 zu erkennen ist, haben die Bilder des Gesichts, des Arms und des Logos PNG-Transparenzanteile, die dieser nur als grauen Hintergrund darstellt. Der Hovereffekt klappt hier ebenfalls nicht, denn der IE 6 akzeptiert hover ausschließlich für Links. Klar, kann man darüber diskutieren, dass die Nutzer des IE 6 hier nicht dasselbe geliefert bekommen. Allerdings wäre es in diesem alten Browser (so grade eben aus diesem Jahrtausend) nur mit sehr viel mehr Aufwand und nicht ohne JavaScript lösbar. Für einen netten, aber inhaltlich nicht notwendigen Effekt ist solch ein Aufwand wohl kaum gerechtfertigt. Die meisten Webentwickler verwenden seit Jahren mehr Zeit für die Anpassungen an den IE 6, als für jeden anderen Browser. Fast alle anderen Browser orientieren sich an den Webstandards und benötigen nur selten einmal spezielle Anpassungen. Insbesondere der IE 6 ist jedoch deutlich aufwändiger von vielen Designideen zu überzeugen, siehe auch den Beitrag Webstandards oder Internet Explorer.

Webseiten für den IE 6

Manch eine Webseite für speziell für den IE 6 erstellt und funktioniert auf keinem anderen Browser richtig. Leider ist es je nach Webauftritt jedoch noch immer eine große Zahl an Besuchern, die den IE 6 nutzen.

Warum nutzen immernoch so viele den IE6?

Wie schon im Artikel über das Metatag für den IE 8 beschrieben, viele Entwickler schrieben ihre Webapplikationen lange Zeit ausschließlich für den Marktführer, also über einige Jahre speziell für den IE 6. Da dieser sicher kaum an Standards hält funktionieren viele Anwendungen ausschließlich mit dem IE 6 oder mit einem Nachfolger, der sich so verhält, als sei er ein IE 6. Applikationen sind teuer, daher benutzen noch viele Firmen den IE 6, um die darauf angepassten Programme nutzen zu können. Hinzu kommen all die Besucher, die eine ältere Windowsversion, wie Windows 2000 nutzen, denn für dieses Betriebssystem wurde leider keine Version, des deutlich standardkonformeren IE 7 angeboten.

Warum sollte man den IE 6 überhaupt noch berücksichtigen?

Klare Sache, wegen seines Marktanteils. Inzwischen ist er zwar weit davon entfernt noch Marktführer zu sein, wie das lange der Fall war. Einen großen Teil hat der IE 7 übernommen, jedoch auch seit Einführung des Firefox (Hinweis an die Jüngeren: ja, es gab eine Zeit mit Internet und ohne den Firefox;-) ) verlor der Internet Explorer deutlich an Bedeutung. Inzwischen werden viele Diskussionen geführt, was man tun könnte, um den IE 6 endlich loszuwerden. Manch einer hat die Nase voll und liefert zumindest bei eigenen Seiten für den IE 6 nur noch den reinen Text aus. Andere passen ihr Layout teilweise an und liefern an den IE 6 mit einem Hinweis auf den Firefox-Download aus. Für Kundenseiten bleibt den meisten bislang kaum etwas anderes übrig, als das jeweilige Layout weitgehend auch für den IE 6 anzupassen. Rund 20% Besucher, die nach wie vor den IE 6 nutzen, sind auf manchen Seiten keine Seltenheit.

Lösung durch Progressive Enhancement

Aus obigen Gründen, ist es meist nicht möglich völlig auf die Darstellung im IE 6 zu verzichten. Statt jedoch bei Layoutentwürfen nur darüber nachzudenken, wie etwas auch im IE 6 umgesetzt werden kann, bietet es sich an schrittweise vorzugehen. Schritt- oder stufenweise ist es wie im genannten Beispiel durchaus möglich bereits zusätzliche Verbesserungen und Erweiterungen einzuführen, ohne dass der IE 6 völlig vernachlässigt wird. In CSS 3 gibt es einige interessante Eigenschaften (runde Ecken usw.) und bezogen auf den IE 6 stehen auch in CSS 2 noch viele ungenutzte Möglichkeiten offen. Meines Erachtens ist das der optimale Weg, um einerseits zusätzliche, neue und interessante Varianten zu nutzen, jedoch andererseits nicht diejenigen Besucher zu ignorieren, die halt einen sehr alten Browser nutzen. Wer mehr darüber wissen will, sollte sich das Buch Transcending CSS anschauen, besser beschreibt es zur Zeit meines Erachtens niemand, wie man auf diesem Weg neue Ideen umsetzen kann.href="http://miradlo.net/bloggt/index.php?3206-s"">CSS 3 gibt es einige interessante Eigenschaften (runde Ecken usw.) und bezogen auf den IE 6 stehen auch in CSS 2 noch viele ungenutzte Möglichkeiten offen. Meines Erachtens ist das der optimale Weg, um einerseits zusätzliche, neue und interessante Varianten zu nutzen, jedoch andererseits nicht diejenigen Besucher zu ignorieren, die halt einen sehr alten Browser nutzen. Wer mehr darüber wissen will, sollte sich das Buch Transcending CSS anschauen, besser beschreibt es zur Zeit meines Erachtens niemand, wie man auf diesem Weg neue Ideen umsetzen kann.

Trackbacks

Keine Trackbacks

Kommentare

Noch keine Kommentare

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
BBCode-Formatierung erlaubt
Gravatar, Twitter, Favatar Autoren-Bilder werden unterstützt.
tweetbackcheck