HTML5を正しく処理するように古いブラウザに教えることができます。
HTML5 ブラウザのサポート
HTML5は最近のすべてのブラウザでサポートされています。
さらに、新旧を問わず、すべてのブラウザは認識されない要素を自動的にインライン要素として処理します。
このため、「未知の」HTML要素を処理するように古いブラウザに「教える」ことができます。
未知のHTML要素を処理する方法をIE6(Windows XP 2001)に教えることもできます。
タグの要素をブロック要素として定義する
HTML5は8つの新しいセマンティック要素を定義しています。これらはすべてブロックレベルの要素です。
古いブラウザで正しい動作を確保するために、これらのHTML要素のCSS 表示プロパティをブロックに設定できます。
header, section, footer, aside, nav, main, article, figure {
display: block;
}
スポンサーリンク
HTMLに新しい要素を追加する
ブラウザのトリックを使ってHTMLページに新しい要素を追加することもできます。
この例ではHTMLページに呼び出される新しい要素を追加し、<myHero>
スタイルを定義します。:
例文
<!DOCTYPE html>
<html>
<head>
<script>document.createElement(“myHero”)</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>A Heading</h1>
<myHero>My Hero Element</myHero>
</body>
</html>
JavaScriptステートメントdocument.createElement("myHero")
は、IE 9以前で新しい要素を作成するために必要です。
Internet Explorer 8の問題
すべての新しいHTML5要素のために上記の解決策を使うことができます。
ただし、 IE 8(およびそれ以前)では、未知の(実装される前)要素のスタイル設定はできません。!
IE 9より古いIEブラウザとの互換性を提供するためにHTML5shivを使う必要がありましたが、現在はサポート終了で使用できません。
ピンバック: 40.HTML5 セマンティック要素について | Youneed