HTML5 + CSS3 雑感

HTML misc

手持ちぶさただったのでちょっといじってみた。 vim 用 template ぽいものをこさえるところまで。 xhtml5 のつもりで xml 宣言をしているけど間違っているかもしれないとか head 要素内のいわゆるお約束がどうなってるんだろうとかまだ詰めなきゃいけないところたくさん。

これを Firefox 4 beta 4 と Google Chrome 6.0.472.53 で見てみると以下のような感じになる。

HTML5 は文書の流れをきちんと markup できるようになっていて書きやすい。それに伴って CSS3 も selector に気を使わないといけないようになってるけどこれが本来あるべき姿なんだよな。てかこっちのほうがわかりやすい。

ここらへん見てると分野によっては IE とか切り捨ててでも使いたい表現力。 web まわりの技術情報扱ってるところはもう問答無用で HTML5 + CSS3 で組むとかでもいいと思う。 IE6 の時代の感覚とかもう脱ぎ捨てないとな。

あーついでに上記の html について point の整理をしておくと以下のような感じ。

  • article, section, header, footer, nav 要素を使うと楽
  • header 要素はできるだけ軽く
    • title 以外は載せない方向かな。重要なのは article 要素内の内容であってその他はすべて蛇足、というと言い過ぎだけどなくてもその page は成立するように書くべき。
  • nav 要素は footer 要素内に書く
    • これも基本 article 要素だけでいいという主張からなんだけど重要なものほど前に出すべきなのでこういう rule 。
    • というのは建前で本音は vimpeator の hint mode が文書の上にある anchor から番号を振るからなんだけど。でもまぁ UI 大切よね。
  • article 要素毎に address 要素
    • これ複数人で post する blog だとか news site だともうやってるのかもしれないけど個人的に目からウロコ。
  • head 要素のお約束 ?
    • meta 要素内で http-equiv 属性に "Content-Script-Type" を指定したりとかの作法って HTML5 でも必要なのかなとかそういう。
    • script 要素も rel="stylesheet" な link 要素も type 属性で MIME 指定できるというかそうしなさいよ的な雰囲気なのでいらなさそう。 script 要素だと type 属性の default が "text/javascript" だと言うし。

ちなみに css のほうで参照している reset.css は以下のようなものを想定。 google:css reset あたりを参照。

/*
 * reset.css
 *  reset styles to flat one
 * */

* {
    margin: 0;
    padding: 0;
    border-width: 0;
    border-style: none;
    border-color: inherit;

    font-style:         normal;
    font-variant:       normal;
    font-weight:        normal;
    font-stretch:       normal;
    font-size:          100%;
    font-size-adjust:   none;

    text-indent:        0;
    text-decoration:    none;
    text-shadow:        none;
    letter-spacing:     normal;
    word-spacing:       normal;
    text-transform:     normal;
    white-space:        normal;

    background-color:       transparent;
    background-image:       none;
    background-repeat:      repeat;
    background-attachment:  scroll;
    background-position:    0% 0%;

    outline-color:  invert;
    outline-style:  none;
    outline-width:  100%;

    vertical-align: baseline;
    line-height:    normal;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, q:before
blockquote:after,  q:after {
    content: "";
}

:focus {
    outline: 0;
}

ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}