HTML5 ブラウザサポート

古いブラウザのHTML5を処理するのに役立ちます。

HTML5 ブラウザサポート

すべての現代ブラウザはHTML5をサポートしています。

また、すべてのブラウザ、新規か古いかに関わらず、未認識の要素は自動的にインライン要素として処理されます。

このため、古いブラウザで「未知の」HTML要素を処理する手助けができます。

注釈：石の時代のIE6に未知のHTML要素の処理方法を教えることもできます。

HTML5要素をブロックレベル要素として定義します

HTML5は新しい意味 HTML要素。すべてがブロックレベル要素

CSSを使って、 display 属性が設定されています block、古いブラウザでの正しい動作を確保するために：

例

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

HTMLに新しい要素を追加する方法

ブラウザのトリックを使ってHTMLにどんな新しい要素でも追加できます：

この例では、HTMLに <myHero> の新しい要素にスタイルを定義します：

例

<!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>

自分で試してみる

追加されたJavaScriptステートメント document.createElement("myHero")、IEのみに適用されます。

Internet Explorerの問題

このソリューションはすべての新しいHTML5要素に適用できますが、：

注意：Internet Explorer 8およびそれ以前のバージョンでは、未知の要素にスタイルを追加することは許可されていません。

幸いにも、Sjoerd Visscherが"HTML5 Enabling JavaScript"を創造しました "the shiv"：

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

このコードはコメントとしてありますが、IE9の初期バージョンではそれを読み取ります（理解します）。

完全なShivソリューション

例

<!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>初めての記事</h1>
<article>
ロンドンはイングランドの首都です。 
これはイギリスで最も人口の多い都市です。 
13百万以上の人口を有する大都市圏を持っています。
</article>
</body>
</html>

自分で試してみる

shiv 代码のリンクは、Internet Explorerがすべての新しい要素を読み込む前に認識する必要があるため、<head>要素内に配置する必要があります。

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 グラフィックス</a></li>
</ul>
</nav>
<section>
<h1>有名な都市</h1>
<article>
<h2>ロンドン</h2>
<p>ロンドンはイングランドの首都で、イギリスで最も人口が多い都市です。それは、</p>
<p>13百万以上の人口を持つ都市地域があります。</p>
</article>
<article>
<h2>パリ</h2>
<p>パリはフランスの首都で、人口が最も多い都市です。</p>
</article>
<article>
<h2>東京</h2>
<p>東京は日本の首都で、大東京地域の中心地です,</p>
そして世界で最も人口が多い都市地域です。</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. 全ての権利を保留します。</p>
</footer>
</body>
</html>

自分で試してみる