Favorite Labo

Perl5+OOPへ移行するにあたり、HTMLもXHTML+CSSへ移行しようとしている訳ですが、厳格なHTMLを書くためのメモ。と言うか、サイトや書籍からの覚え書き一覧。

XHTMLメモ

• ファイルの一行目に <?xml version="1.0" encoding="utf-8"?> を設定する事が推奨されている。でも、Win+IE6で標準準拠モードにならない不具合がある。
• <form> の hidden は <p> などに含める必要はない。
• <blockquote> 内は <p> などでマークアップする。title で引用元タイトル、cite で引用元URLを明記する。
• <pre> 要素内ではTabを使用せず、半角スペースなどでインデントする。
• 必要に応じて、<dd> 内は <p> などでマークアップする。
• コンピュータ特有のテキストは、<code> だけでなく <var>、<samp>、<kbd> も使用してマークアップする。
• <input> の checked は checked="checked" とする。
• <iframe> は使用せず、<object> を使用する。

リンク先を別ウインドウで開く

target="_blank" は使えないので、スクリプトなどで対応する必要がある。こんな感じで対応できそう。

//Open blank window
window.onload = function() {
  var node_a = document.getElementsByTagName('a');
  for (var i in node_a) {
    if (node_a[i].className == 'blank') {
      node_a[i].onclick = function() {
        window.open(this.href, '', '');
        return false;
      };
    }
  }
};

<a href="http://www.xxx.co.jp/" class="blank">リンク</a>

ブラウザスタイルの初期化

余計なデフォルトスタイルを無効にするために指定。でも、これ以上は初期化しないほうがよさそう。

* {
  margin: 0px;
  padding: 0px;
  border: 0px;

  font-size: 100%;
  font-style: normal:
}

CSSのプロパティ指定順

Mozilla.org 推奨のプロパティ指定順序。（視覚整形→ボックス→背景→フォントテキスト→生成内容）

* {
  display
  list-style
  position
  float
  clear
  width
  height

  margin
  padding
  border

  background
  color

  font
  text-decoration
  text-align
  vertical-align
  white-space
  other text

  content
}

Win IE6 互換モード調整

CSSハックは使いたくないけど、<?xml version="1.0" encoding="utf-8"?> を書くために…。

html>body {
}

この記事を投稿して初めて気づいたけど、この日記帳、管理モードから投稿すると実体参照が正しく反映されなくなってる…。とりあえず応急処置で投稿できるようにしたけど、そのうちきちんと直そう。