Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Media Queries im Internet Explorer 8

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Internet Explorer 8 beinhaltet keine passende Funktionalität, um Media Queries zu verarbeiten. Die Lösung besteht darin, sämtliche Stile in ein neues Stylesheet zu kopieren und diese mit einer bedingten Anweisung an den Browser auszuliefern.

Transkript

Der Internet Explorer in der Version 8 hier über F12 in den Entwicklertools hier in der Emulation dargestellt, der kann keine Media Queries, und die Reparatur ist aber entsprechend erstaunlich einfach. Hier haben die Desktop.css und alles was hier in dieser Media Query steht, das ist für den Internet Explorer in der Version 8 nicht existent. Die Reparatur besteht also darin, diese Datei unter einem anderen Namen zu speichern und dann die Media Query zu entfernen, und das Ganze ausschließlich an den Internet Explorer 8 auszuliefern. und das ist gar nicht so schwierig, zuerst Datei speichen unter, wir ändern den Vornamen der Datei in IE8 speichen die im selben Ordner und enfernen hier die Media Query. Da diese Zeile soll raus, und unten auch das Ende der Media Query natürlich. So, und oben ändern wir dann die Beschreibung nur für IE8.Kopie von Desktop. css ohne Media Query, und hier den Dateinamen auch im Commentar noch anpassen,so das ist es schon was hier im Stylesheet passieren muss er versteht hier alles Wrapper width:max , width:min, width:slogen position:absolute kein Problem sogar Box-sizing, Border-Box versteht der Internet Explorer 8 die negativ Margins, er kann mit allen umgehen, das sieht also eigentlich recht vielversprechend aus, aber jetzt müssen wir es noch einbinden und das geschieht nicht in zentrale.css, sondern hingehen conditional comment, hier auf den Webseiten selbst, hier werde ich jetzt also für den IE8, die Bedingung stimmt schon [if lt IE 9], das wäre IE8, hier baue ich jetzt den Link ein, href ist gleich ei8.css, und sage noch, dass es ein Stylesheet ist, relation(rel) Stylesheet. Soweit diese Zeile kopieren ich und füge sie auf Galerie.html ein, so ein bisschen einrücken und ebenso auf Kontakt.html, so, damit wird das Stylesheet aufgerufen, und zwar nur, wenn der Internet Explorer 8 die Seite zeigt. So, zurück in den Internet Explorer und ich lade die Seiten neu, er springt dann hier wieder rüber und zeigt das alle schon gut an, hier wir sind immer noch im IE8 und hier ist das soweit schon repariert. Also die Ursache war, dass der IE8 keine Media Queries versteht die Reparatur bestand darin alles, weil hier aus der Desktop.css, weil wir das hier sehr schön ordentlich aufbereitet hatten, das alles zu kopieren in eine andere Stylesheet, ohne Media Query, und das dann nur an den IE8 auszuliefern. Der Aufwand hält sich in Grenzen, trotzdem ist das natürlich optional, es kommt ein bisschen darauf an, wieviele Besucher mit IE8 man tatsächlich noch erwartet, ob sich der Aufwand dafür lohnt. So, jetzt haben wir IE8 und IE9 umgefähr auf Gleichstand, beiden fehlt eigentlich nur noch der Farbverlauf in der horizontalen Navigation.

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!