【HTML5】IEドキュメントモード(Quirksモード)対策

HTML5で制作しているウェブサイトをIE8・IE9でみるとレイアウトが崩れている。
文法など記述は間違っていないので、IEを疑って調べてみると、
IE上でhtml5(を宣言した時)の挙動がどうもおかしいらしい。

IE8やIE9には、ブラウザモードとドキュメントモードという2つのモードがあって、
このドキュメントモードが悪さをしている事が判明。

IEドキュメントモード

ドキュメントモードは、HTML上の”DOCTYPE宣言”の記述に従って自動選択されるらしいが、
どうやらIEではhtml5で<!DOCTYPE HTML>を宣言するとQuirksモード(IE5/IE6)に判定されてしまう。

しかし、IEではHTMLでドキュメントモードを指定できる”meta”タグが用意されているので、コチラで対応する。

<meta http-equiv="X-UA-Compatible" content="IE=8 ; IE=9" />

上記の例では、IE8で参照したらドキュメントモードをIE8標準モード、IE9で参照したらIE9標準モードが選択される。

【HTML5】videoタグの動画がFirefoxで動かない対処法

HTML5のvideoタグで再生される動画のフォーマットが、現状ブラウザによってバラバラになっている。
(サポートされている動画規格が統一されていない。)

【videoタグ使用例】

<video controls autoplay poster="firstimg.jpg" width="320" height="240">
	<source src="sample.mp4" />
	<source src="sample.ogv" />
	<source src="sample.webm" />
</video>

HTML5のvideoタグで動画が再生されるファイル形式はのうち、
FireFoxで現在標準となっている.ogvファイルOgg形式ファイルとして
設定されていないサーバーが多い。

今回はhtmlファイルと同じディレクトリ内に「.htaccess」を作って
下記のコードを記述して対応する。

【.htaccess記述例】

AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv

mp4形式などもサーバー設定によっては別途対応する必要がある。

【jQuery】ユーザ定義関数の使い方

jQueryでPHPの様にユーザ定義関数を使いたいと思って調べてみら、
基本PHPと書き方が同じだったのでメモ。

【ユーザ関数の定義例】

$(function(){
	// ユーザ定義関数
	function putTextAlert(text){
		alert(text);
	}

	var text = "テキスト";

	// 関数実行
	putTextAlert(text);
});

もちろん関数の定義は最後にまとめてもOK!

$(function(){
	var text = "テキスト";

	// 関数実行
	putTextAlert(text);

	// ユーザ定義関数
	function putTextAlert(text){
		alert(text);
	}
});