HTML5 / CSS3 - Praxistutorial 2 - Zwischenfazit
1. Die Abschnitte
- Überblick
- Das Problem und die Lösung
- Zwischenfazit
- Anpassungen IE 8 und 9
- Anpassungen IE 8 Teil 1
- Anpassungen IE 8 Teil 2
- Das Ausklappmenü Teil 1
- Das Ausklappmenü Teil 2
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 | |||
2. Keine speziellen Farben bei Listenelementen | |||
3. Kein Schatten um <aside> |
|||
4. Kein Hintergrund im zweiten <aside> |
|||
5. Kein Schatten bei Überschriften | |||
6. Footer-Verlauf weicht ab | |||
7. Keine sauberen Rundungen | |||
8. Kein border-image |
|||
9. Der Ausklapp-Effekt funktioniert nicht sauber |
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