HTML5 -Browserunterstützung
Du kannst älteren Browsern beibringen, HTML5 korrekt zu verarbeiten.
HTML5‑Browserunterstützung
HTML5 wird von allen modernen Browsern unterstützt.
Darüber hinaus behandeln alle Browser, sowohl alte als auch neue, nicht erkannte Elemente automatisch als Inline‑Elemente.
Aus diesem Grund kannst du älteren Browsern „beibringen“, mit HTML‑Elementen zu arbeiten, die ihnen „unbekannt“ sind.
Du kannst sogar IE6 (Windows XP 2001) beibringen, wie man unbekannte HTML‑Elemente verarbeitet.
Semantische Elemente als Block‑Level‑Elemente definieren
HTML5 definiert acht neue semantische Elemente. Alle sind Block‑Level‑Elemente.
Um ein korrektes Verhalten in älteren Browsern sicherzustellen, kannst du die CSS‑Eigenschaft display für diese HTML‑Elemente auf block setzen:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Neue Elemente zu HTML hinzufügen
Du kannst auch neue Elemente zu einer HTML‑Seite hinzufügen, indem du einen Browser‑Trick verwendest.
In diesem Beispiel wird ein neues Element mit dem Namen <myHero> zur HTML‑Seite hinzugefügt und sein Stil definiert:
Beispiel
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Eine Überschrift</h1>
<myHero>Mein Hero‑Element</myHero>
</body>
</html>
Probiere es selbst »
Die JavaScript‑Deklaration document.createElement("myHero") ist erforderlich, um ein neues Element in IE9 und früheren Versionen zu erstellen.
Problem mit Internet Explorer 8
Du kannst die oben beschriebene Lösung für alle neuen HTML5‑Elemente verwenden.
Allerdings erlaubt IE8 (und frühere Versionen) keine Stilzuweisung für Elemente, die er nicht erkennt!
Doch zum Glück hat Sjoerd Visscher HTML5Shiv entwickelt! HTML5Shiv ist ein JavaScript‑Workaround, der die Stilunterstützung für HTML5‑Elemente in Internet Explorer‑Versionen vor Version 9 ermöglicht.
Du benötigst HTML5shiv, um die Kompatibilität für IE‑Browser älter als IE9 sicherzustellen.
Syntax für HTML5Shiv
HTML5Shiv wird normalerweise innerhalb des <head>-Tags platziert.
HTML5Shiv ist eine JavaScript‑Datei, die über ein <script>-Tag eingebunden wird.
Du kannst HTML5Shiv verwenden, wenn du neue HTML5‑Elemente wie <article>, <section>, <aside>, <nav>, <footer> nutzt.
Du kannst die neueste Version von HTML5Shiv bei GitHub herunterladen oder die CDN‑Version einbinden https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js, (oder alternativ eine neuere Version auf unserer Website: html5shiv.js)
Syntax
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
HTML5Shiv‑Beispiel
Wenn du das HTML5Shiv‑Skript nicht auf deiner eigenen Website herunterladen und speichern möchtest, kannst du auf die Version verweisen, die auf einem CDN bereitgestellt wird.
Das HTML5Shiv‑Skript wird normalerweise innerhalb des <head>-Elements platziert, nach allen Stylesheets:
Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</article>
</section>
</body>
</html>
Try it Yourself »
Hinweis vom Admin W3SchoolsDE. DasBeste. Tatsächlich ist es besser, den Verweis auf das HTML5Shiv‑Skript ganz am Ende der Webseite zu platzieren, direkt vor dem </body>-Tag (um das Laden der Seite zu beschleunigen).
