Hauptmenü

Untermenü

HTML5 / CSS3 - Praxistutorial 2 - Zwischenfazit

1. Die Abschnitte

2. Was passt noch nicht?

Auch wenn der aktuelle Zwischenstand Anlass zur Hoffnung gibt, schauen wir uns erst mal alle Darstellungsfehler an und fragen uns nach den Ursachen.

Fehler IE 8 IE 9 IE 10
1. Die versch***ne Schrift wird nicht angezeigt Ja
2. Keine speziellen Farben bei Listenelementen Ja
3. Kein Schatten um <aside> Ja
4. Kein Hintergrund im zweiten <aside> Ja
5. Kein Schatten bei Überschriften Ja Ja
6. Footer-Verlauf weicht ab Ja Ja
7. Keine sauberen Rundungen Ja Ja
8. Kein border-image Ja Ja Ja
9. Der Ausklapp-Effekt funktioniert nicht sauber Ja Ja Ja

3. Ursachen

Fehler 1

Ich geb's auf, einfach im body-Block der styles.css eine Ausweichschrift definieren und gut ist.

Fehler 2 bis 4

Kann sich jeder denken. Der 8er unterstützt kein nth-child, box-shadow und last-child.

Fehler 5 und 6

Dito. Der 8er und 9er kennen weder text-shadow noch linear-gradient.

Fehler 7

Hier muss man zwischen dem 8er und 9er unterscheiden. Ersterer kommt natürlich nicht mit border-radius zu Rande. Beim 9er dagegen haben wir ein anderes Problem. Denn dort gibt es bei Rahmen zwar eine Rundung, aber die gilt ersten nur für die beiden oberen Ecken und zweitens ist der Hintergrundverlauf trotzdem noch eckig.

Tja, das liegt leider an der verwendeten filter: ...gradient-Funktion, die bereits im ersten Tutorial "in weiser Voraussicht" eingebaut wurde. Und das rächt sich nun. Denn merke, wenn man dazu gezwungen ist, diese Microsoft-eigenen Sonderanweisungen für CSS benutzt, so muss man immer davon ausgehen, dass sie nicht zum gewünschten Ergebnis führen.

Fehler 8

Liegt auch auf der Hand, Keine der genannten IE-Versionen beherrscht border-image.

Fehler 9

Die Ursache dafür ist bei jedem Browser eigentlich anders, so dass ich dazu an dieser Stelle noch nichts sagen werden. Die Details dazu kommen, wenn wir das Menü anpassen.

4. Lösungsmöglichkeiten

Ich habe es glaube ich schon gefühlte hundert Male gesagt, aber ein designsicherer Internetauftritt mit HTML5 und CSS3 ist immer eine Gratwanderung, wo man auch den zu erwartenden Aufwand berücksichtigen muss. Und in diesem Fall sage ich einfach, dass wir die fehlenden Rundungen im IE 8 als gottgegeben hinnehmen und diese Rumschnippelei mit irgendwelchen Bilderchen komplett vergessen. Um den Rest kümmern wir uns peu à peu im weiteren Verlauf.

Vorgehensweise

Zuerst nehmen wir uns die gemeinsamen Darstellungsfehler im IE 8 und 9 vor, danach sind speziell die für den 8er dran. Das Ausklappmenü kommt ganz zum Schluss, da es alle Browser betrifft und obendrein ein wenig tricky ist.

5. Vorarbeiten

Dazu tragt in der index.htm zusätzlich im <head<>-Bereich folgenden Code ein.


<!--[if IE]>
  <link rel="stylesheet" href="ie/ie.css" type="text/css" />
<![endif]-->
<!--[if 9 IE]>
  <link rel="stylesheet" href="ie/ie9.css" type="text/css" />
<![endif]-->
<!--[if IE 8]>
  <link rel="stylesheet" href="ie/ie8.css" type="text/css" />
<![endif]-->

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt