html5セマンティックマークアップを使用してWebサイトをレイアウトしたいと思います。不思議なんだけど; html5を使用して、html4と同じようにセクションのスタイルを設定した場合でも、正しくレンダリングされますか?キャンバスのような最新のhtml5を使用したくないので、このサイトを将来にわたって利用できるようにしたいだけです。
3 に答える
HTML5固有のタグ(<nav>
またはなど<header>
)はブラウザによって無視されます。生のタグはページに表示されません(単語が表示されない<nav>
など)が、単に何もしません。それらに適用されたスタイルも機能しないことに注意してください-私はこれを難しい方法で見つけました。<nav>
ナビゲーションバーのスタイルを設定する場合は、タグのスタイルを設定しないでください。<div>
その中のまたは同様のタグのスタイルを設定します。
などのHTML5の「ユーティリティ」<video>
については、ブラウザの機能を検出して適切なコードを使用するJavascriptライブラリを使用することをお勧めします。たとえば、 Jplayerを使用すると、同じHTMLインターフェイスを使用しながら、使用可能な場合はHTML5を使用し、使用できない場合はFlashを使用するビデオとオーディオを埋め込むことができます。
Canvasを利用したシステムのような本当に見せびらかす機能が必要な場合は、これをサイトのメインエリアに使用せず、「これを正しく表示するには、最新のブラウザにアップグレードしてください」というメモを追加することをお勧めします。動作していないことを検出できる場合(これはvar check=document.createElement('canvas')
、値が未定義かどうかを使用して確認することで可能です。
シムを使用してこれを確実に行うことができます。これにより、すべてのHTML5セマンティックタグを使用できるようになり、古いブラウザー用に変換されます。ここでhtml5shimをチェックしてください:http ://code.google.com/p/html5shim/
そして、それらがどのように表示されるかをコードに含めるだけです。
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->