Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML5 Grundkurs

Anzeigeprobleme in älteren Browsern beheben

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ältere Browser kennen die neuen HTML5-Elemente noch nicht und ignorieren sie einfach. Allerdings gehen ältere Versionen des Internet Explorer auf eine besondere Art und Weise vor, was beim Einsatz von CSS zu Problemen führen könnte. Glücklicherweise gibt es einen JavaScript-basierten Workaround.
13:26

Transkript

Bei mir sehr sehr wichtiges Anliegen ist, dass solange auf ein Vertritt bei ist, auch ältere Browser noch unterstützt werden können. Das bezieht sich häufig vor allem auf den Internet Explorer, weil der Internet Explorer viele HTML5 Features und Features in Grunde HTML5, teilweise erst in Version 9, oder gar 10 unterstützt teilweise auch sogar erst ab Version 11. Bei einigen der Dinge ist es dann eben so, dass man eine harte Entscheidung treffen muss. Schon nutze ich dieses Feature, und schließe damit möglicherweise ältere Browser aus oder nutze ich das Feature nicht. Häufig gibt es ein Kompromiss. Und zwar, dass vielleicht ein Feature älteren Browsers nicht geht, aber es gibt möglicherweise einen Workaround. Klar als Entwickler bin ich gerne immer bei dem Standpunkt dabei, dass ich sage, ich nehme nur das Neuste und entwickle nur für Nutzer mit ganz ganz modernen neuen Browsern, ähnliche Komputialisierung etc, aber wissen ja alle, dass das in der Praxis einfach nicht zu erwarten ist. Da muss man sich nachdem richten, was einfach im MAC vorhanden ist, und nicht nur bei earlier Doctypes. Bei diesen neuen semantischen HTML5 Elementen ist es so, dass wir hier tatsächlich gerade in einigen älteren Internet Explorer Versionen auf potenzielle Probleme stoßen könnten. Ich will diese Probleme kurz thematisieren und dann ein Workaround anbieten, der diese Probleme unschärfen kann. Der ist gar nicht so aufwendig und mag in den anderen Situationen sehr sehr gut helfen. Um das ein bisschen zu demonstrieren, füge ich noch bisschen CSS ein. Und will vor allem diese neuen Elemente hier mal per CSS formatieren, zum Beispiel den Hinweiskasten aside und den Footer. Es gibt also CSS an und kann dabei gleich eine der Neuerungen von HTML5 zeigen. Man muss hier mal sagen halt, type ist gleich text/css neuen HTML5, wenn man Zweck liest, dieses Attribut, dann geht der Browser automatisch davon aus, dass es CSS ist. Das hat zwar bisher noch kein Browser interessiert, in dem Sinne, als das auch ohne dieses Type Attribut alles funktioniert hat, Jetzt aber ist es standalisiert, das heißt, jetzt ist es sogar korrekt so, wie ich das mache. Nun, mache ich also ein bisschen Formatierung, ich will sehr sehr einfach halten, weil ich auf einen anderen Punkt hinauswill. Ich könnte also beispielsweise sagen, dass der Hinweiskasten irgendeinem sorge text Farbe hält, also color orange, und beim Footer vielleicht gebe ich noch eine Rahmfarbe und eine Rahmgröße an. Machen wir mal gepunktet den Rahmen, machen wir ein bisschen dicker, dann sieht man ihn vielleicht noch etwas besser. Also Hinweiskasten hat es orange Textfarbe und der Footer, der hat immerhin den Rahmen. Schauen wir uns das an! Im Google Chrome geben wir die URL dran, go, sieht es natürlich nicht besonders schön aus, aber es geht hier darum, dass tatsächlich das CSS angewandt wird. In der Tat, wir haben also hier, orangenen Text, und wir haben hier entsprechend ein Rahmen um diesen Footerbereich. URL kommt zwischen der Ablage, und wir probieren das Ganze im Internet Explorer aus. Keine Überraschung, sieht sehr gut aus. Jetzt rufe ich die F12 Tools auf. Und schalte in den IE9, [ ] ganz gut aus, und dann schalte ich den IE8. Sprich vor allem bei denen, die noch WindowsXP verwenden, werden immer weniger, aber gibt noch genug. Werfen Sie einen Blick in ihre Browser, Statistik oder ihre Besucher Statistik und in IE8, ja da ist irgendwie die Farbe weg, und da ist der Rahmen weg. Und gibt noch so einen anderen kleinen Hacken. Wo liegt das jetzt, was ist die Ursache dafür? Und die Ursache dafür ist, tja, wenn es man weiß, eigentlich logisch, wenn man es nicht weiß, dann findet das man entweder durch Zufall oder fragt sich wieso, weil einen Sinn scheint es hier nicht zu geben. Die Sache ist, schauen wir noch mal kurz in den Code! Wir haben hier unser MAC App und haben wir da unter anderem unser aside Element und unser footer Element. Der Internet Explorer 8, der hier evoliert wird, der kennt diese Elemente nicht, der weiß nicht, dass es ein Aside Element gibt, der weiß nicht, dass es ein Footer Element gibt. Es ist das ja schon, seither so gewesen, wenn der Browser ein nicht bekanntes HTML-Element findet, dann gibt er natürlich keine viele Meldungen aus, sondern er ignoriert das Element, zeigt aber sein Inhalt an, deswegen steht bei uns auch dieses Weiterführende Informationen im Browser und Quellen, Fußnoten steht auch im Browser. Die Frage ist aber, wie wir das Ganze dann gepasst an ein HTML-Regel denken, Erinnern Sie sich daran? Wir haben Element mit dem Inhalt und wir haben Elemente ohne Inhalt. Mit dem Inhalt ist es zum Beispiel "P" für den Absatz, ohne Inhalt ist zum Beispiel "PR" für den Umbruch. Was ist jetzt aside, was ist jetzt footer. Nun, der Browser kann es nicht wissen, er kennt, wie gesagt, diese Elemente nicht, er kennt kein aside und er kennt keinen footer. Its könnte man sich, wenn man Browserentwickler ist, ja so oder so entscheiden. Und das Internet Explorer Team hat sich entschieden zu sagen, na ja, wenn ich so ein unbekanntes Element finde, dann ignoriere ich es, und vor allem, ich schließe es sofort wieder, ich schaue also nicht, ob dieses Element irgendwo später noch geschlossen wird. Mach also keine Heuristik oder bin optimistisch, dass das Element irgendwo wieder zugeht, sondern ich schließe das hier einfach sofort, und das auch an anderen Stellen.Ihr könnt das nachvollziehen, den Browser, und zwar, haben wir ja, hier die HTML-Ansicht, von HTML-Struktur, ich mache das mal etwas größer, und dann klappen wir hier auf, und haben wir den Body-Bereich. Jetzt sieht man es ja wunderbar. Man hat hier das aside Element und das aside Element wird sofort wieder geschloßen, dann haben wir wieder den Text dazwischen, Weiterführende Informationen, und dann kommt /aside/, also eigentlich das Element, das aside schließt, aber für den Internet Explorer hat es mit dem vorherigen aside nichts zu tun. Es soll sozusagen ein neues Element, beginnend mit einem Slash zufällig, wird auch sofort wieder geschlossen. Gleich ist bei footer, /footer/ Wir sind es ja an vielen Stellen, section sofort geschlossen, header sofort geschlossen, /header/, /section/. Schwierig auszusprechen, geil schwierig zu verstehen, der Internet Explorer hat sich halt so entschieden. Ich zeige das noch mal kurz in Code, was der Internet Explorer sich sozusagen denkt, also, aside Element wird geschlossen, und hier, na ja, wird das Element auch geschlossen, und das passiert dann mit einfach / vor in anderem dran, also sozusagen // aside oder, was die Internet Explorer hier in der Darstellung macht, ist, er schließt das Element, indem er hier, nehmen wir noch ein / einfügt. Sieht sehr sehr komisch aus, aber das ist die Erklärung dafür, dass dann der CSS Selector hier nicht funktioniert. Schauen wir uns das bei aside an, aside ist jetzt hier geschlossen, sofort, wie schaut jetzt der CSS Selector aus, ich rolle nach oben. aside ist der Selektor, also gib mir das aside Element oder alle Elemente mit Namen aside, na ja, das Element ist jetzt nur noch hier dieser leere Text, der wäre jetzt tatsächlich orange . Dieser Text ist nicht mehr innerhalb des aside Elements. Und das erklärt, warum die Darstellung, so muselig ist. Was machen wir jetzt, nun, jetzt können wir natürlich aufgeben und einfach sagen, wir verwenden einfach diese neuen Elemente nicht, in der nur semantische Elemente bringt also vielleicht ehe noch nicht so viel, wenn wir das jetzt einsetzen. Geht natürlich, aber wenn man JavaScript Unterstützung hat in Anwendung, also wenn die Anwendung, dass beispielsweise ehe braucht, und Nutzer und JavaScript nicht zu lachen haben, oder vielleicht ein Alternativversion der Anwendung bekommen, dann ohne HTML5 Elemente, dann gebe es da etwas. Auch das ist eine Sache, die auf den ersten Blick vielleicht nicht ganz so logisch erscheint, aber wenn sie einmal funktioniert, lässt die sich wunderbar auf alles adaptieren. Ich lege mal ein JavaScript Block an, und auch hier ist es ähnlich wie , bei dem style Element, ich muss jetzt nicht mehr das type Attribut vergeben, also ich könnte natürlich immer noch "text/javascript" brauche ich nicht mehr standardmäßig JavaScript. Was mache ich jetzt? Ich rufe die Methode document.createElement. Document.createElement erzeugt ein DOM-Element im Speicher, zum Beispiel könnte ich ein aside was jetzt eigentlich passiert ist, dass der Browser entspeichert so ein aside Element anliegt, aber Sie sehen die Rückgabe von dieser Anweisung, die wird neu abgespeichert. Das heißt, das wird im Speicher angeliegt, und dann gleich wieder weggeworfen. Und dasselbe mache ich noch für den Footer, und entsprechend auch für die anderen Elemente, die neu sind in HTML5. Der Internet Explorer führt es jetzt aus, Browser wird es natürlich auch ausführen, liegt die Elemente an, so weit, so gut. Und jetzt passiert was komisches. Wenn jetzt der Internet Explorer die Seite weiter rendert, sieht ihr, dass hier das aside Element kommt, und das irgendeinem schwererklärlichen Grund, sagt sich jetzt der Internet Explorer, ach aside , ja das Element kenne ich, das habe ich doch vorher mal erzeugt, bist du noch mal da, aber ich habe es erzeugt, ja, und jetzt auf einmal fängt die Höheste ganz zu laufen, und der Internet Explorer sagt, okay, Element geht ja auf, geht es vielleicht irgendwo zu, ah hier geht es zu, das gehört zusammen. Ich schließe diese Elemente nicht mehr automatisch. Finde komisch, ist aber so. Ich lade neu. Und sie sehen, die Farbe ist wieder da, und der Rahmen ist wieder da. Wenn wir in den F12 Tools, in Inspector schauen, sehen wir auch dass zum Beispiel so was wie nav /header/ sofort wieder geschlossen wird, aber aside und footer jetzt tatsächlich einen Inhalt haben und jetzt korrekt interpretiert werden. Das ist natürlich eine tolle Sache, weil damit ist das Problem gelöst, die so alt ist, im Internet Explorer8 fast so aus in einem Browser oder in neueren Internet Explorer Versionen. Das einzige schöne ist, dass das nebeneinander steht, denn obwohl wir das Element mal erzeugt haben mit JavaScript, kennt der Internet Explorer die Funktionalität des Elementes nicht. Insbesondere weiß der Internet Explorer natürlich nicht, ist es ein Floss-Element oder ist es ein Block-Element. Standardverhalten ist, es ist ein Floss-Element, weil Block-Element hat ja ein extra Umbruch, und das will man vielleicht nicht, wenn man ein unbekanntes Element hat, deswegen standardmäßig Floss-Element, das können wir wiederum aber mit CSS ändern, wir haben je schon unsere Regeln oben, was ich jetzt als Recht praktischer weiß, ich gebe an display block, und auch hier noch mal display block, speichern, neu laden, und jetzt steht das Ganze untereinander, wenn ich IE8 auf IE9 schalte, sieht es immer noch mehr oder minder gleich aus. Und das ist die wohl einfachste Möglichkeit, auch wenn sie ein wenig merkwürdig ist. Um dieses Anzeigeverhalten von den neuen semantischen HTML5 Elementen in älteren Internet Explorer Versionen entsprechend zu steuern, und vor allem zu korrigieren. So soll es für andere Elemente machen, nicht mehr nur aside und footer, sondern eben auch eine Reihe von weiteren Elementen. Jetzt muss nur sich diese Mühe allerdings auch nicht unbedingt machen, sondern man kann sich da auch helfen lassen und zwar gibt es ein Projekt, das heißt html5Shim.googlecode.com, auch bekannt unter dem Namen html5shiv, mit "v", ist dasselbe beiden Namen gebräuchlich gewesen, und das enthält quasi diesen Ansatz, den wir gerade gefragt haben. Das heißt, dieser "p" der Code da drin, der macht genau das, der macht das Create-Elements und erzeugt damit die unbekannten Elemente, und er sorgt auch dafür, dass entsprechend die CSS Anweisung gesetzt werden, mit klass, was ist ein Block-Element und was nicht. Interessant ist hier noch, wie das eingebaut wird, dann, und zwar mit einem konditionalen Kommentar, sieht man hier, hätten wir jetzt auch bei unseren Code gerade eben machen können, und zwar konditionaler Kommentar ist etwas, was der Internet Explorer versteht, andere Browser haben in der Regel einfach ignorieren, das heißt, andere Browser denken o, hier ist es ein HTML-Kommentar, o, hier hört der HTML-Kommentar auf, den Rest ignoriere ich. Internet Explorer sagt, aha, das ist für mich eine Instruktion, was soll ich tun? Wenn es sich um ein Internet Explorer handelt, der Kleine lässt den, kleiner ist als Versions IE9, also deutsch wenn IE 8 oder gar noch älter ist, dann wird diese html5shiv Das heißt, dieser Code, dieser Kombitivilitätscode, der läuft dann auch tatsächlich nur auf einem Browser, der das in der Tat nötig hat. Und somit haben wir nicht nur ein Anzeigeproblem gelöst, und damit auch ältere Browser bisschen besser unterstützt, sondern wir sorgen dafür, dass jeder dieser Workaround, dieser Heck, hätte ich fast gesagt, auch tatsächlich nur zur Ausfügung kommt , auf Browsern, das brauchen nämlich IE 8 und gegebenenfalls älter.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 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!