HTML5-selaimen tuki

Voit auttaa vanhoja selaimia käsittelemään HTML5.

HTML5-selaimen tuki

Kaikki nykyaikaiset selaimet tukevat HTML5:ää.

Lisäksi kaikki selaimet, uudet tai vanhat, käsittävät automaattisesti tunnistamattomat elementit riveittäin.

Tämän vuoksi voit auttaa vanhoja selaimia käsittelemään "tuntemattomia" HTML-elementtejä.

Huomautus:Voit jopa opettaa kivikauden IE6:lle, miten käsitellä tuntemattomia HTML-elementtejä.

määrittää HTML5-elementit loppupäällisiksi elementteiksi

HTML5 määrittää kahdeksan uuttasemanttisia HTML-elementti. Kaikki ovatloppupäällinenelementti.

Voit käyttää CSS:ää display ominaisuus asetetaan block, jotta varmistetaan, että vanhat selaimet toimivat oikein:

实例

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

Lisää uusia elementtejä HTML:hen

Voit käyttää selaimen trikiä lisätäksesi HTML:hen minkä tahansa uuden elementin:

Tämä esimerkki lisää HTML:hen elementin nimeltä <myHero> uusille HTML-elementeille ja määritä sen display-tyyli:

实例

<!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>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>

Kokeile itse

Lisätyt JavaScript-lauseet document.createElement("myHero"), mutta vain IE:lle.

Internet Explorerin ongelmat

Tämä ratkaisu voidaan käyttää kaikkiin uusiin HTML5-elementteihin, mutta:

Huomioitavaa:Internet Explorer 8 ja aikaisemmat versiot eivät salli tyylin lisäämistä tuntemattomille elementeille.

Onneksi Sjoerd Visscher loi "HTML5 Enabling JavaScript", "the shiv":

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

Tämä koodi on kommentti, mutta IE9:n varhaiset versiot lukevat sen (ja ymmärtävät sen).

Kattava Shiv-ratkaisu

实例

<!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>My First Article</h1>
<article>
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>
</body>
</html>

Kokeile itse

引用 shiv 代码的链接必须位于 <head> 元素中，因为 Internet Explorer 需要在读取之前认识所有新元素。

HTML5 Skeleton

实例

<!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 Grafiikat</a></li>
</ul>
</nav>
<section>
<h1>Tunnetut kaupungit</h1>
<article>
<h2>Lontoo</h2>
<p>Lontoo on Englannin pääkaupunki. Se on Yhdistyneen kuningaskunnan väkirikkain kaupunki,</p>
<p>metropolialueella yli 13 miljoonaa asukasta.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris on Ranskan pääkaupunki ja väkirikkain kaupunki.</p>
</article>
<article>
<h2>Tokio</h2>
<p>Tokio on Japanin pääkaupunki, suuren Tokion alueen keskus,</p>
ja maailman väkirikkain suurkaupunki.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. Kaikki oikeudet varattu.</p>
</footer>
</body>
</html>

Kokeile itse