Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Websites auf älteren Internet-Explorer-Versionen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ältere Versionen des Internet Explorers unterstützen verschiedene aktuelle CSS-Funktionen nicht und stellen daher bestimmte Teile einer Website inkorrekt dar.

Transkript

Die Beispielseiten sollen jetzt im Internet Explorer getestet werden. Sie sehen jetzt hier den IE11, das ist ein moderner, standardkonformer Browser, hier sitzt alles genau so, wie es soll, und da gibt es im Allgemeinen wenig Probleme. Es sind im Augenblick 2 Dinge gemacht worden bereits hier, damit das funktioniert und zwar zeige ich im Editor hier einmal in der index.html ein conditional comment, das bedeutet, wenn - less than - kleiner als IE9, dann führe dieses Skript aus und hier ist das Ganze zu Ende. Dieser conditional comment, das verstehen nur Internet Explorer bis zu Version 10, damit kann man denen dann maßgeschneiderte Reparaturen zukommen lassen. dieser html5shiv zum Beispiel sorgt dafür, dass IE8, der hier angesprochen wird, die modernen HTML 5 Elemente überhaupt erst versteht. Das ist eine Reparatur, das ist auf allen drei Webseiten vorhanden, und dieser Conditional Comment auf gut Deutsch IE8 oder kleiner, den können wir nachher auch noch weiter benutzen, und die zweite Reparatur, die es bereits gibt, das ist hier in fundament.css. HTML5-Elemente als Block definieren, auch der IE11 und moderne Internet Explorer, die verstehen main nicht, das ist wirklich wichtig und wenn man schon mal dabei ist, dann kann man hier alle HTML5-Elemente gleich als Block-Element definieren, damit man die vernünftig gestalten kann. Diese beiden Dinge sind also bereits erledigt und jetzt geht es wieder rüber in den Internet Explorer zum IE Countdown. der Elfer ist in Ordnung, da passiert selten was, dann kommen wir zum Countdown 10, 9, 8, 7, 6 fehlt und 5. 5 und 7 können wir ignorieren, aber IE8 ist noch im Einsatz, es gibt noch viele Maschinen mit Windows XP, wo IE8 die höchstmögliche Internet Explorer Version ist, auch wenn XP eigentlich auf dem Abstellgleis ist, aber die Realität sieht oft noch anders aus, also 8 ist der kleinste, unterstützte Nenner hier, 8, 9, 10 fangen wir umgekehrt an, ich gehe einmal auf 10 und das sieht alles gut aus hier, der emuliert das jetzt, deswegen wackelt das hier manchmal so ein bisschen, weil der tut nur so, als ob er der Zehner ist, dann gehe ich runter auf 9, und achten Sie jetzt auf die horizontale Navigation. So und da ist sie, der 9 erkennt linear-gradient-Function nicht. Also die CSS 3 Farbverläufe, es bleibt hier alles bedienbar, eine Reparatur wäre also optional und würde beinhalten, dass man hier mit Grafiken arbeitet, mit einem grafischen Farbverlauf, um den CSS 3 Verlauf nachzubauen. Das wäre also im Neuner, der Rest ist soweit in Ordnung wenn man sich das hier anschaut, sieht das alle so weit ok aus. So, jetzt wird es spannend, jetzt kommt der Internet Explorer 8 und da bricht die Sache auseinander. Das sieht schlimmer aus, als es ist. Man kann alles lesen hier auch der Internet Explorer 8 versteht keine Media Queries. Das bedeutet im Editor hier, alles was im Desktop css hier ausgeliefert wird an Browser, ab einer Browserfensterbreite von 768px, das kennt der überhaupt nicht, das ignoriert der komplett. Die Reparatur wäre dafür also etwas aufwendiger, aber ist auch durchaus noch zu leisten. Also, zusammengefasst IE11 sieht gut aus, IE10 ebenso bei IE9 optional kann man hier die Navigation nachbessern und den Farbverlauf mit Grafiken simulieren, und dem im IE8 natürlich auch die Navigation, aber hier ist doch eine kleine Reparatur unerlässlich, denn das möchte man doch keinem Besucher so zeigen.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!