HTML5 browser support

Du kan hjälpa gamla webbläsare att hantera HTML5.

HTML5 browser support

Alla moderna webbläsare stöder HTML5.

Dessutom kommer alla webbläsare, oavsett ny eller gammal, att automatiskt behandla okända element som inline-element.

Därför kan du hjälpa gamla webbläsare att hantera "okända" HTML-element.

Kommentar:Du kan till och med lära förhistoriska IE6 hur man hanterar okända HTML-element.

definiera HTML5-element som blockelement

HTML5 definierar åtta nyasemantiska HTML-element. Alla ärblockelement.

Du kan använda CSS display egenskapen sätts till block, för att säkerställa korrekt beteende i gamla webbläsare:

Exempel

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

Lägg till nya element till HTML

Du kan lägga till vilka nya element som helst till HTML med hjälp av en browser-trick:

Detta exempel lägger till ett element till HTML med namnet <myHero> att definiera display-stil för de nya elementen:

Exempel

<!DOCTYPE html>
<html>
<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>
<body>
<h1>Min första rubrik</h1>
<p>Min första paragraf.</p>
<myHero>Min första hjälte</myHero>
</body>
</html>

亲自试一试

Läggda till JavaScript-satser document.createElement("myHero"), gäller endast IE.

Internet Explorer-problem

Ovanstående lösning kan användas för alla nya HTML5-element, men:

Observera:Internet Explorer 8 och äldre versioner tillåter inte att stilar läggs till på okända element.

Lyckligtvis skapade Sjoerd Visscher "HTML5 Enabling JavaScript", "the shiv":

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ovanstående kod är en kommentar, men IE9:s tidiga versioner läser den (och förstår den).

Komplett Shiv-lösning

Exempel

<!DOCTYPE html>
<html>
<head>
  <title>Styling HTML5</title>
  <![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<h1>Min första artikel</h1>
<article>
London är huvudstaden i England. 
Det är den mest befolkade staden i Förenade kungariket, 
med en storstadsområde över 13 miljoner invånare.
</article>
</body>
</html>

亲自试一试

Länken till shiv-koden måste finnas i <head>-elementet, eftersom Internet Explorer behöver känna igen alla nya element innan de läses in.

HTML5 Skelett

Exempel

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Skelett</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
  <h1>HTML5 Skelett</h1>
</header>
<nav>
<ul>
  <li><a href="html5_semantic_elements.asp">HTML5 Semantisk</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
  <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>
<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.
</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.
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. All rights reserved.</p>
</footer>
</body>
</html>

亲自试一试