Dr. O. Hoffmann
Ich glaube nicht an den Fortschritt,
sondern an die Beharrlichkeit der menschlichen Dummheit.
Oscar Wilde
Wer heute ein web-Seiten-Layout nach aktuellen Regeln
der Kunst erstellt, wird den Inhalt gemäß den Standards
zu HTML oder XHTML erstellen und das eigentliche Layout
mit dem Standard CSS realisieren.
Dieses funktioniert auch mit aktuellen Darstellungsprogrammen der
fünften Generation ganz gut, sagen wir mal mit den meisten der üblichen Programme
seit 2004 oder 2005, zum Beispiel Mozilla/Gecko
(rev. 1.6ff), Opera 7.54ff oder Konqueror 3.2ff.
Darstellungsprogramme der dritten Generation (vor allem Netscape 3) haben ebenfalls keine Probleme mit einem CSS-Layout, weil sie dieses einfach ignorieren und die Vorgaben für HTML umsetzen.
Problematisch sind lediglich Darstellungsprogramme der vierten Generation (Mozilla4-kompatible wie Netscape 4 und der microsoft internet explorer - Version 4, 5 oder 6). Diese verstehen und interpretieren CSS oft falsch oder sehr lückenhaft. Wie also mit dem Problem umgehen?
Nach Jahren, in welchen die Nutzer Zeit hatten, ihr Darstellungsprogramm zu aktualisieren oder auf ein leistungsfähigeres umzusteigen, ist natürlich inzwischen (2013) auch die Frage berechtigt, ob man Programme aus dem letzten Jahrtausend wie Netscape 4 oder den microsoft internet explorer - Version 4, 5 oder 6 überhaupt noch gesondert berücksichtigen sollte, zudem es mittlerweise für viele Autoren schwierig werden dürfte, sich diese Programme überhaupt noch zu beschaffen, um damit etwas zu testen. Ist das nicht möglich oder gewünscht, sollte es in jedem Falle ausreichen, wenn man Nutzern, die diese alten Programme immer noch benutzen, einfach eine Variante ohne CSS zur Verfügung stellt.
Meine bisherigen Lösungen: Netscape 4 identifiziere ich mittels PHP und liefere eine leere Stilvorlage, so daß er eine Seitendarstellung wie die Darstellungsprogramme der dritten Generation erreicht.
Kritisch sind vor allem die vielleicht noch gelegentlich benutzten
Programme msie 5 und 6 - diese verstehen immerhin so viel
CSS, daß es sich lohnt, diesen solches auch anzubieten.
Allerdings dürften die Nutzerzahlen mit jedem Jahr geringer werden.
Und wer diese Programme noch verwendet, sollte eigentlich mittlerweile
um die Probleme wissen, die diese Programme verursachen.
All diese Programme werden also wegen einiger grober
Fehler und Lücken nicht ohne Korrektur mit dem Standard-CSS fertig.
Weithin bekannt sind beim msie der peinliche Fehler im Box-Modell, die
Probleme bei der Positionierung von Elementen und das mangelhafte
Verständnis des Pseudoformates :hover und noch peinlicher -
der idiotische Rückfall des msie 6 in die Anzeigefehler des msie 5
bei einer XML/XHTML Deklaration mit dem sogenannten Quirks-Modus.
Einfachste Lösungsansätze bislang sind Tricks, bei denen die
Lücken des Programmes ausgenutzt werden, um die
Fehler und Mängel des Programmes zu maskieren.
Brisant wird die Lage mittlerweile erneut, weil inzwischen erste Module von CSS 3 als Empfehlung veröffentlicht sind, die also ebenfalls verwendet werden können, aber natürlich von Programmen nicht verstanden werden, die deutlich früher als die Empfehlungen veröffentlicht werden.
Ein relativ elegantes historisches Beispiel für eine Kompensation von Fehlern durch weitere Fehler etwa beim msie war etwa eine solche Konstruktion:
div.logo
{
position: absolute;
right: 0em;
top: 0em;
width: 8em;
....
}
div.logo[class]
{
position: fixed;
...
}
Oder der eigentliche Trick in einer anderen Variante:
div.logo[class=logo]
{
position: fixed;
...
}
Oder analog bei einem Individualformat oder Fragmentidentifizierer:
div#id0815[id=id0815]
{
position: fixed;
...
}
Der msie und einige andere ältere Programme kennen
den Selektor mit den eckigen Klammern nicht und
ignorieren diese Anweisung daher. Ebenso ergeht es übrigens
dem alten Konqueror (getestet mit Version 2.2, Version 3 kennt den
Selektor bereits). Standardkonforme
Programme hingegen werden die Anweisung ausführen und
wie gewünscht position: fixed
realisieren, während etwa der msie bedingt durch einen Fehler stattdessen
position: static
realisieren würde, wenn es zu einer Interpretation dieser Anweisung käme.
Ähnlich kann man übrigens mit dem Fehler im
Box-Modell beim msie 5 und teilweise auch 6 fertig werden, was
eleganter ist als der allgemein bekannte 'Hack' nach Tantek.
Dieses sollte aber durch Vereinfachung passieren, nicht durch
falsche Korrekturen, weil sonst ältere Darstellungsprogramme, die ebenfalls
den Selektor nicht kennen, aber das Box-Modell richtig interpretieren,
eine falsche Anzeige generieren werden - es würde also gerade
das Gegenteil einer Korrektur erreicht werden.
Vorteil dieser Methode ist vor allem, daß neue
Darstellungsprogramme auch in Zukunft ein korrektes CSS interpretieren
können, während die bereits bekannten Mängel
bekannter alter Programme ausgenutzt werden, um diese
abzufangen. Da die Mängel von Programm zu Programm
verschieden sein können, ist das nur mit scharfem Verstand
sinnvoll einzusetzen -und sofern man das Verhalten mit den alten Programmen überhaupt noch
testen kann.
Den Nachteil sieht man beim Konqueror 2 - mit dem klassischen
msie-Trick wird auch vor ihm CSS verborgen, welches er eigentlich
ausführen könnte. Andererseits hat dieser wieder etwas
andere Mängel (zum Beispiel max-width, min-width versteht er
nicht), die man damit auch gleich beheben kann, auch wenn dann
der msie vielleicht weniger zu tun bekommt, als er könnte.
Eine weitere Möglichkeit, zum Beispiel den msie 6 auszuschließen, ist der Kindselektor (englisch: child-selektor) >, etwa so:
body>div#id0815
{
position: fixed;
...
}
Allerdings interpretiert der msie 5.0 Teile dieses Selektors, ab msie 5.5 wird der Selektor komplett ignoriert. Ähnlich geht es dem + Selektor.
Eine sehr elegante Methode ist auch die Nutzung sogenannter conditional comments der Firma microsoft. Dies ist die inzwischen von mir bevorzugte Methode bei neuen Seiten:
in der XHTML-Datei:
<link rel="stylesheet" type="text/css" href="stil.css" />
<!--[if lte IE 6.99]>
<link rel="stylesheet" type="text/css" href="msiestil.css" />
<![endif]-->
in der CSS-Datei stil.css:
div.logo
{
position: fixed;
right: 0em;
top: 0em;
width: 8em;
....
}
und in der CSS-Datei msiestil.css
nur jene Änderungen, die lediglich die Fehler
des msie bis Version 6.99 korrigieren oder maskieren:
div.logo
{
position: absolute;
...
}
Nur die internet-explorer (Versionen 5 bis 6.99) sollten dem zweiten
link folgen, während die standard-konformen Programme nur auskommentierten
Quelltext sehen, den sie nicht ausführen dürfen.
Immerhin kann man hier einmal eine Idee von microsoft sinnvoll anwenden, um
den Nutzern des msie in ihrer traurigen Lage wenigstens etwas zu helfen.
Dieser Trick ist nun wirklich spezifisch für den msie. Vorteil: die korrekte
Datei stil.css wird nicht verändert. Bei Bedarf kann der Kommentar einfach
wieder aus der XHTML-Datei gelöscht werden und man ist die Krücke wieder
los, wenn sie nicht mehr gebraucht wird.
Damit läßt sich gut die Idee realisieren, ein standard-konformes Layout für
die normalen Programme zu entwerfen und sich anschließend um die Fehler des alten msie
in einer extra Datei zu kümmern.
In Sachen Unterstützung von SVG und CSS 3
beginnt ein neuer Wettbewerb der Anbieter hinsichtlich der Leistung in den eigentlichen Aufgabenfeldern:
Korrekte Anzeige von Standardformaten wie CSS (3), XHTML,
SVG, MathML etc.
Damit divergieren die Fähigkeiten der einzelnen Programme und Programmversionen im Laufe der Jahre
natürlich immer, was praktisch das Ende der Bemühungen bedeutet, Fehler bestimmter Programmversionen
gezielt auszunutzen, um andere Fehler zu kompensieren. Man hat gar nicht mehr alle Programmversionen
verfügbar, um all dies zu testen und herauszufinden, daher mag man also noch bereits vorhandene und
vor Jahren getestete Tricks für alte Programmversionen behalten, bei neuen Projekten wird man aber
aus praktischen Gründen mehr und mehr darauf verzichten müssen und stattdessen nur noch einen
Umschalter auf eine leere Stilvorlage anbieten für all jene Programme, die zu alt sind.
Bei neuen Methoden von CSS 3 sollte man zudem, wie von CSS vorgesehen, gezielt Probleme damit umgehen, daß ganz allgemein definiert ist, daß unbekannte Eigenschaften einfach ignoriert werden sollen. Eine Stilvorlage sollte so also zunächst im Rahmen von CSS 2.1 erstellt werden, daß sie damit funktioniert. Anschließend kann man dann zusätzlich Verfeinungen mit CSS 3 notieren, welche von älteren Programmen ignoriert werden können. Weil die Module von CSS 3 zu ganz verschiedenen Zeitpunkten veröffentlicht werden, wird es natürlich nicht bei dieser einfachen Unterscheidung bleiben, weswegen auch der Ansatz schnell zu komplex werden wird, womit dann letztlich wieder nur bleibt, Nutzern von alten Programmen eine Version verfügbar zu machen, die mit einer leeren Stilvorlage auskommt.
In naher Zukunft wird man also dazu
übergehen, Mozilla4-kompatible Programme einfach komplett
zu selektieren und ihnen ein leeres CSS-Layout
präsentieren, wie dies bereits für Netscape 4
ausschließlich sinnvoll ist.
Bei komplexen Stilvorlagen, welche in Zukunft massiv CSS 3 nutzen mögen,
kann dies allerdings auch für Programme der fünften Generation notwendig werden.
Interessante Alternative: Man generiert die Stilvorlagen komplett mit PHP und fragt den user-agent ab. Nur wenn ein typisches Muster für den msie enthalten ist, wird die Version mit der Maskierung mit den Attribut-Selektoren ausgegeben. So bekommen Programme, die sich nicht als msie tarnen, die normale CSS-Ausgabe zu sehen und nur solche, die so tun, als seien sie ein msie, sehen die für den msie frisierte Version. So kann dann zum Beispiel gut zwischen Konqueror2 und msie unterschieden werden. Zwar bekommen alle Programme, die sich als msie ausgeben, die frisierte Version zu sehen, kennen sie den Attribut-Selektor, so stellen sie aber nach wie vor das geplante CSS dar. Nur Konqueror2, die sich als msie ausgeben, bekommen das vereinfachte CSS zu sehen.
Nun gibt es auch Bemühungen, die Fehler des msie mittels java-script auszutreiben,
etwa in Dean Edwards Projekt
IE7.
Da aber java-script beim msie unabhängig vom CSS deaktivierbar ist (anders als
bei Netscape 4), ist das keine zuverlässige Methode, hier steckt der Irrtum bereits im
Ansatz, wenngleich er auch bei der Mehrheit der msie-Nutzer funktionieren mag, die nur
niedrige Ansprüche in Richtung Sicherheit im internet haben. Das defekte CSS mit
java-script zu reparieren hieße, den Teufel mit dem Beelzebub auszutreiben - mag sein,
daß das bei microsoft und in der windows-Szene üblich ist, hat aber eigentlich
nichts mehr mit solidem Layout zu tun.
Nun könnte man sagen, daß Leute
mit höheren Ansprüchen vermutlich weder den msie noch überhaupt
windows nutzen werden. Doch auch darauf kann man sich nicht verlassen. So wären
es gerade jene, die ihr windows abzusichern versuchen, indem sie java-script deaktivieren,
die sich dadurch auch noch unzugängliche internet-Seiten einhandeln würden.
Somit entfällt dieser Ansatz leider. Es wäre eher an microsoft, diese Skripte
direkt in das Darstellungsfehler zu integrieren, um die Fehler zu beseitigen.
Wer es dennoch probieren möchte, sollte es zusätzlich zu den
conditional comments verwenden, etwa so
(Pfad zum java-script natürlich anpassen):
in der XHTML-Datei: <link rel="stylesheet" type="text/css" href="stil.css" /> <!--[if lt IE 7]> <script src="ie7/ie7-standard.js" type="text/javascript" /> <link rel="stylesheet" type="text/css" href="msie7stil.css" /> <noscript> <link rel="stylesheet" type="text/css" href="msiestil.css" /> </noscript> <![endif]-->
Es ist schön zu sehen, man hat so die mehrfache Arbeit durch dem msie. Erst wird das normale Layout
erstellt, dann wird das java-script getestet und sofern da noch Fehler bleiben, werden die mit
der Datei msie7stil.css kompensiert. Gibt es keine, kann die Zeile rausfallen.
Für den Fall, daß java-script nicht aktiviert ist, werden alle msie-Fehler
mit der Datei msiestil.css kompensiert. Auch werden alternative Stile noch nicht unterstützt
und die Korrektur gilt nicht für den Inhalt eines style-Attributes.
Diese Seite verfügt über zwei Korrekturmöglichkeiten der Fehler des msie. Einmal wird über die conditional comments eine extra-CSS-Datei eingebunden (das ist die Voreinstellung, die Seite wird nur zugänglich gehalten, das Layout sieht im msie bis Version 6.99 einfacher aus als bei modernen Darstellungsprogrammen), dann kann aber auch die oben genannte java-script-Lösung gewählt werden und es ist auch möglich, die Seite ganz ohne Korrektur anzusehen. Die java-script-Lösung beseitigt viele Fehler, leider aber nicht genug, um wirklich für die hiesige Seite ohne weitere Arbeit brauchbar zu sein.
Test mit dem msie durchführen:
Anmerkung: Der Test funktioniert auf jeder Seite im Bereich "XHTML, SVG, CSS, PHP", allerdings muß die Stilmodifikation dann direkt in der URI angegeben werden. Statt stil=s ruft man auf stil=0s für die Anzeige ohne Korrektur und stil=7s für die java-script-Korrektur auf. Aufruf einer anderen Seite oder eines anderes Stils über die Verweise im Menü stellen die Voreinstellung wieder her.