• 投稿者:
  • 投稿コメント:1件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2022年3月31日

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を使う必要がありましたが、現在はサポート終了で使用できません。


1件のコメントがあります

コメントを残す