HTML5ブラウザのサポート

HTML5 ブラウザのサポート

一部の古いブラウザ (HTML5 をサポートしていない) で HTML5 をサポートすることができます。

HTML5 ブラウザのサポートサポート

最新のブラウザは HTML5 をサポートしています。

さらに、新旧を問わずすべてのブラウザーは、認識されない要素を自動的にインライン要素として扱います。

このため、ブラウザに「未知の」HTML 要素を処理するように「教える」ことができます。

IE6 (Windows XP 2001) ブラウザに未知の HTML 要素を処理するよう教えることもできます。

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

HTML5 では、8 つの新しい HTML セマンティック要素が定義されています。これらの要素はすべてブロックレベルの要素です。

古いバージョンのブラウザでこれらの要素を正しく表示できるようにするには、CSS 表示属性値をブロックに設定できます:

Instance

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

HTML に新しい要素を追加します

新しい要素を次のように追加できますHTML要素。

このインスタンスは、HTML に新しい要素を追加し、要素のスタイルを定義します。要素の名前は <myHero>:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>为 HTML 添加新元素</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>
<body>
<h1>标题</h1>
<p>内容</p>
<myHero>元素</myHero>
</body>
</html>

Internet Explorer ブラウザーの問題

上記のメソッドを使用して、 HTML5 要素を IE ブラウザーに追加しますが、:

Internet Explorer 8 およびそれ以前の IE バージョンのブラウザーは、上記の方法をサポートしていません。

この問題を解決するには、Sjoerd Visscher によって作成された「HTML5 Enabling JavaScript」「shiv」を使用できます:

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

上記のコードはコメントであり、IE ブラウザーのバージョンが 1 である場合に html5.js ファイルを読み取るために使用されます。 IE9 より小さいものを解析してください。

注: 国内ユーザーは Baidu 静的リソースライブラリを使用してください (Google リソースライブラリは中国では不安定です):

<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

html5shiv は IE ブラウザにとってより良いソリューションです。 html5shiv は主に、HTML5 で提案された新しい要素が IE6-8 で認識されず、子要素をラップする親ノードとして使用できず、CSS スタイルを適用できないという問題を解決します。

完璧な Shiv ソリューション

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shiv</title>
  <!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
</head>
<body>
<h1>文章标题：简单是一种方法</h1>
<article>
橄榄树嘲笑无花果树说：
“你的叶子到冬天时就落光了，光秃秃的树枝可真难看，哪像我终
年翠绿，美丽无比。
”不久，一场大雪降临了，橄榄树身上都是翠绿的叶子，雪堆积在上面，
最后由于重量太大把树枝压断了，
橄榄树的美丽也遭到了破坏。
而无花果树由于叶子已经落
尽了，
全身简单，雪穿过树枝落在地上，
结果无花果树安然无恙。
外表的美丽不一定适应环
境有时是一种负担，
而且往往会因为生存带来麻烦或灾难。
相反，
平平常常倒能活得自由自
在。所以，
不如放下你外表虚荣的美丽，
或者是不实的身份和地位，踏踏实实地去体会真实
简单的生活，相信这样你将获得更多的乐趣。
</article>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>shiv</title>  </head> <body> <h1>文章标题：简单是一种方法</h1> <article> 橄榄树嘲笑无花果树说： “你的叶子到冬天时就落光了，光秃秃的树枝可真难看，哪像我终年翠绿，美丽无比。 ”不久，一场大雪降临了，橄榄树身上都是翠绿的叶子，雪堆积在上面，最后由于重量太大把树枝压断了，橄榄树的美丽也遭到了破坏。而无花果树由于叶子已经落尽了，全身简单，雪穿过树枝落在地上，结果无花果树安然无恙。外表的美丽不一定适应环境有时是一种负担，而且往往会因为生存带来麻烦或灾难。相反，平平常常倒能活得自由自在。所以，不如放下你外表虚荣的美丽，或者是不实的身份和地位，踏踏实实地去体会真实简单的生活，相信这样你将获得更多的乐趣。 </article> </body> </html>

提出するリセットコード

自動運転