html5を使う準備をする

■準備

DOCTYPE宣言

以下のように記述する。

<!DOCTYPE html>

エンコード

以下のように記述する。

<meta charset="UTF-8" />

もしくは以下のように記述する。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

どっちかだけ書くように(o^-‘)b

■時代遅れのブラウザで使う準備

block要素として認識してほしいものをcssで指定。

section,
header,
footer,
nav,
aside,
article,
address,
figure,
hgroup,
menu {
    display: block;
}
[hidden],
menu[type="context"],
command,
datalist,
rp,
source {
    display: none;
}

IE6~8

面倒なので以下のスクリプトを書いて終わりにする。m(｡･ε･｡)m

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

中身が気になる。｢(ﾟﾍﾟ)

// html5shiv MIT @rem remysharp.com/html5-enabling-script
// iepp v1.5.1 MIT @jon_neal iecss.com/print-protector
(function (p, e)
{
    var q = e.createElement("div");
    q.innerHTML = "<z>i</z>";
    q.childNodes.length !== 1 && function ()
    {
        function r(a, b)
        {
            if (g[a]) {
                g[a].styleSheet.cssText += b;
            }
            else {
                var c = s[l], d = e[j]("style");
                d.media = a;
                c.insertBefore(d, c[l]);
                g[a] = d;
                r(a, b)
            }
        }
        function t(a, b)
        {
            for (var c = new RegExp("\\b(" + m + ")\\b(?!.*[;}])", "gi"), d = function (k)
            {
                return ".iepp_" + k;
            },
            h =- 1;
            ++h < a.length;
            ) {
                b = a[h].media || b;
                t(a[h].imports, b);
                r(b, a[h].cssText.replace(c, d))
            }
        }
        for (var s = e.documentElement, i = e.createDocumentFragment(), g = {}, m = "abbr article aside audio canvas details figcaption figure footer header hgroup mark meter nav output progress section summary time video".replace(/ /g, 
        '|'), n = m.split("|"), f = [], o =- 1, l = "firstChild", j = "createElement";
        ++o < n.length;
        ) {
            e[j](n[o]);
            i[j](n[o])
        }
        i = i.appendChild(e[j]("div"));
        p.attachEvent("onbeforeprint", function ()
        {
            for (var a, b = e.getElementsByTagName("*"), c, d, h = new RegExp("^" + m + "$", "i"), k =- 1; ++k < b.length; )
            {
                if ((a = b[k]) && (d = a.nodeName.match(h))) 
                {
                    c = new RegExp("^\\s*<" + d + "(.*)\\/" + d + ">\\s*$", "i");
                    i.innerHTML = a.outerHTML.replace(/\r|\n/g, " ").replace(c, a.currentStyle.display == "block" ? "<div$1/div>" : "<span$1/span>");
                    c = i.childNodes[0];
                    c.className += " iepp_" + d;
                    c = f[f.length] = [a, c];
                    a.parentNode.replaceChild(c[1], c[0]) 
                }
                t(e.styleSheets, "all");
            }
        });
        p.attachEvent("onafterprint", function ()
        {
            for (var a =- 1, b; ++a < f.length; ) {
                f[a][1].parentNode.replaceChild(f[a][0], f[a][1]);
            }
            for (b in g) {
                s[l].removeChild(g[b]);
            }
            g = {};
            f = [];
        })
    }
    ()
})(this, document);

古いIEって大変だね。ヾ(･･;)

■その他

タグは省略できるが、個人的にはチャント書く。
場合によっては無くても良いが、個人的に属性値はチャント”で括る。

バリデート

こいつを使う。o(^o^)o

新要素

ほんの一部をピックアップ。

section	文章のアウトライン
header	セクションのヘッダー
footer	セクションのフッター
nav	外側のセクションに対するナビゲーション
aside	外側のセクションに対する補足情報
article	セクションみたいな感じで、独立したコンテンツ
hgroup	h1~h6をまとめる
menu	コマンドのリスト
figure	キャプションとセットの要素を埋め込む際に使用
video	動画
audio	音声
source	videoやaudioで使う
canvas	キャンバス

TrackBack URL :

Comments (0)

@blog.justoneplanet.info

html5を使う準備をする

■準備

DOCTYPE宣言

エンコード

■時代遅れのブラウザで使う準備

IE6~8

■その他

バリデート

新要素

コメントはまだありません»

Leave a comment