HTML5 Browser Support

Du kan hjælpe ældre nettlesere med at håndtere HTML5.

HTML5 Browser Support

Alle moderne browsere understøtter HTML5.

Derudover vil alle browsere, uanset ny eller gammel, automatisk behandle ikke genkendte elementer som inline-elementer.

På grund af dette kan du hjælpe gamle browsere med at håndtere "ukendte" HTML-elementer.

Bemærk:Du kan endda lære stenalders IE6, hvordan den håndterer ukendte HTML-elementer.

definer HTML5-elementer som blokkenelementer

HTML5 har defineret otte nyesemantiske HTML-elementer. Alle erblokkeneelementer.

Du kan bruge CSS display egenskaben sættes til block, for at sikre korrekt opførsel i gamle browsere:

Eksempel

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

Tilføj nye elementer til HTML

Du kan tilføje nye elementer til HTML ved hjælp af en browser-trick:

Dette eksempel tilføjer et HTML-element kaldet <myHero> nye HTML-elementer, og definer display-stilen for dem:

Eksempel

<!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ørste overskrift</h1>
<p>Min første paragraf.</p>
<myHero>Min første Hero</myHero>
</body>
</html>

Prøv det selv

Tilføjede JavaScript-sætninger document.createElement("myHero"), kun til IE.

Problemer med Internet Explorer

Denne løsning kan bruges til alle nye HTML5-elementer, men:

Bemærk:Internet Explorer 8 og tidligere versioner tillader ikke at tilføje stilarter til ukendte elementer.

Heldigvis skabte Sjoerd Visscher "HTML5 Enabling JavaScript", "the shiv":

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

Dette kodeeksemplet er en kommentar, men tidlige versioner af IE9 læser det (og forstår det).

Komplet Shiv-løsning

Eksempel

<!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ørste artikel</h1>
<article>
London er hovedstaden i England. 
Det er den mest befolkede by i Det Forenede Kongerige, 
med en metropolområde med over 13 millioner indbyggere.
</article>
</body>
</html>

Prøv det selv

Referencelinken til shiv-koden skal placeres i <head>-elementet, fordi Internet Explorer skal kende alle nye elementer, før de læses.

HTML5 Skelet

Eksempel

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Skeleton</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 SKeleton</h1>
</header>
<nav>
<ul>
  <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
  <li><a href="html5_canvas.asp">HTML5 Grafik</a></li>
</ul>
</nav>
<section>
<h1>Berømte byer</h1>
<article>
<h2>London</h2>
<p>London er hovedstaden i England. Det er den mest befolkede by i Det Forenede Kongerige,</p>
<p>med et metropolområde på over 13 millioner indbyggere.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris er hovedstaden og mest befolkede by i Frankrig.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo er hovedstaden i Japan, centrum for den større Tokyo-området,</p>
og den mest befolkede metropol i verden.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. Alle rettigheder forbeholdes.</p>
</footer>
</body>
</html>

Prøv det selv