厳選、メタ検索・メタディレクトリ付属日記

はてなブックマークの新バージョンへの雑感と要望

はてな関連

おそれおおくもはてな運営（b:id:hatenabookmark）からベータ版のご招待をいただいたので、試してみた。

＊新バージョンと旧バージョンは任意に切り替えられるので、普段は旧バージョンのままにしてます。

今のところは、スタイルシート設定によるデザイン調整はできない。これは、正式版になったときに何とかしてくれるだろう。今ある機能を削るとは考えにくいし。

将来の実装に備えて、ユーザースタイルシートをあてて試してみた成果物→http://d.hatena.ne.jp/mount-root-yy/20111123/1322047106

idとclassが整理された感じで、スタイルシートはあてやすい。

各エントリーにスニペットがデフォルトで表示されてる。

リンク集や「非ソーシャル」ブックマークとして利用している人にとっては、このスニペットは邪魔な感がある。

スタイルシート設定ができるようになれば、消し飛ばしてしまえばすむことだが。

将来的には、設定でスニペットの表示・非表示を切り替えられるようにするということも考えられる。

右サイドバーは、画面の横幅が広いときのみ表示される。

これは、たぶん、画面サイズで適用スタイルシートを振り分けるCSS3の機能を利用していると推測されるが。

この右サイドバーの表示項目については、個人的にはあまり有用性を感じないので、これもスタイルシート設定ができるようになったあかつきには消し飛ばしてしまえ。

b.hatena.ne.jp/ユーザID/にアクセスしたときに、ログインしている当人とそれ以外とで表示するページが違うのは、いただけない。

URLの一意性に反するし、初心者は戸惑うだろう。

ログインしている当人だとマイホットエントリーが表示されるのだが、今までどおり自分のブックマークを表示することを希望するユーザーもいるだろう。少なくても、設定で指定できるようにすべきである。

インタレストは、現行のはてブプラスの「気になる言葉」タブの後継ということになるのだろうか。

有料オプションを無料にしてしまうのは営利企業としてはどうかとも思うが、ユーザーにとってはありがたいことだろう。

左上のa.profile-usernameとa.profile-nicknameのリンク先は、はてなのプロフィールページ（www.hatena.ne.jp/ユーザーID）の方がいいのではないか。

マイホットエントリーは、お気に入り０、twitterのフォロー０の人間には試しようがないので、スルー。

Permalink | トラックバック(0) | 06:24

はてなブックマークの新バージョンのユーザーページをシンプルに仕上げるCSS暫定版

はてな関連

http://twitter.com/#!/jkondo/status/138899753596493824

はてなブックマークのユーザーページの新バージョンが招待制でベータリリースされたようだ。

今のところは、CSSでデザインを調整できる機能は具備されてない模様。おそらく、正式リリース直前か直後あたりじゃないと、その辺の実装は難しいだろうと推測される。

できれば、招待制でなくて、bbeta.hatena.ne.jp/ユーザーIDかb2.hatena.ne.jp/ユーザーIDで、新バージョン表示になるようにしてほしいな。

そうすれば、正式リリース前に自分の新バージョンページにユーザースタイルシートを当ててデザインをいろいろと試せるし、既存の自分のページ（b.hatena.ne.jp/ユーザーID）はそのままのデザインで公開しておける。

とりあえず、b:id:jkondoとb:id:naoyaのページを踏み台にして、いろいろとユーザースタイルシートを当てて試してみた。

ログインしてる本人でないと試せない部分も多々あるので不充分だけど、暫定的に新はてブユーザーページをシンプルに仕上げるCSSを公開しとく。

コンセプトは、現行の私のはてブページと変わらず、余計な贅肉を徹底的に削ってシンプルな公開型リンク集に仕上げるといったところ。

＊＊＊＊＊＊＊＊＊

２０１１年１１月２５日追記

はてな運営から招待をいただいたので、さっそく試してみた。

予想どおり、今のところはデザイン調整はできなかったので、ユーザースタイルシートをあてての試行。前に比べて、idやclassの割り当てが整理された感じなので、スタイルシートではいじりやすい感じだ。

下記のCSSは、使いたい人は自由に使って結構です。

新バージョンと旧バージョンを任意に切り替えられるので、いろいろと試しているとき以外は、旧バージョンのままにしてます。

＊＊＊＊＊＊＊＊＊

最終：２０１１年１１月２６日

body{background-image:none !important; background-color:#ffffcc !important; color:#000000 !important}
body *{background-image:none !important; background-color:transparent !important; color:#000000 !important; border-style:none !important; text-decoration:none !important; -moz-border-radius:0 !important; -webkit-border-radius:0 !important; border-radius:0 !important}
#username-window{background-color:#ffffcc !important; border:solid #666666 1px !important}

a:link{color:#0000ff !important; text-decoration:underline !important}
a:visited{color:#660066 !important; text-decoration:underline !important}
a:hover,a:active,a:focus{color:#cc0000 !important; background-color:#ccffff !important; text-decoration:underline !important}

a.user-tag,
a.relation-tag,
#tag-handle-list li a
{text-decoration:none !important}

a.category-link:before{content:'＊' !important}

#profile-count-navi dl dd a:link{color:#0000ff !important; text-decoration:underline !important}
#profile-count-navi dl dd a:visited{color:#660066 !important; text-decoration:underline !important}
#profile-count-navi dl dd a:hover,
#profile-count-navi dl dd a:active,
#profile-count-navi dl dd a:focus{color:#cc0000 !important; background-color:#ccffff !important; text-decoration:underline !important}

#profile-actions a,
.inplace-form input.bookmark-appender-submit,
.inplace-form span.bookmark-appender-cancel,
#add-interest-tag-button,
#add-interest-tag .submit-button
{color:#000000 !important; background-color:#cccccc !important; border-style:solid !important; border-width:2px 3px 3px 2px !important; border-color:#999999 #333333 #333333 #999999 !important; text-decoration:none !important}
#profile-actions a:hover,
.inplace-form input.bookmark-appender-submit:hover,
.inplace-form span.bookmark-appender-cancel:hover,
#add-interest-tag-button:hover,
#add-interest-tag .submit-button:hover,
#profile-actions a:focus,
.inplace-form input.bookmark-appender-submit:focus,
.inplace-form span.bookmark-appender-cancel:focus,
#add-interest-tag-button:focus,
#add-interest-tag .submit-button:focus
{color:#000000 !important; background-color:#ffffff !important}
#profile-actions a:active,
.inplace-form input.bookmark-appender-submit:active,
.inplace-form span.bookmark-appender-cancel:active,
#add-interest-tag-button:active,
#add-interest-tag .submit-button:active
{color:#000000 !important; border-color:#333333 #999999 #999999 #333333 !important; border-width:2px 1px 1px 2px !important}

.result-window-inner-container a.user:link,
.result-window-inner-container a.user:visited,
.result-window-inner-container a.user:hover,
.result-window-inner-container a.user:focus,
.result-window-inner-container a.url:link,
.result-window-inner-container a.url:visited,
.result-window-inner-container a.url:hover,
.result-window-inner-container a.url:focus,
span.users a:link,
span.users a:visited,
span.users a:hover,
span.users a:focus,
.domain a:link,
.domain a:visited,
.domain a:hover,
.domain a:focus,
#profile-count-navi dl dd a[href*="/follow"]:link,
#profile-count-navi dl dd a[href*="/follow"]:visited,
#profile-count-navi dl dd a[href*="/follow"]:hover,
#profile-count-navi dl dd a[href*="/follow"]:focus
{font-weight:normal !important; background-color:#ffffcc !important; color:#999999 !important; text-decoration:none !important; outline-style:none !important; pointer-events:none !important; cursor:text !important; -o-link:'' !important; -o-link-source:current !important;}
.result-window-inner-container a.user:active,
.result-window-inner-container a.url:active,
span.users a:active,
.domain a:active,
#profile-count-navi dl dd a[href*="/follow"]:active
{visibility:hidden !important}

.other-user-page,.my-user-page,.wrapper-container-inner,.wrapper-container{width:100% !important; margin:1px !important; padding:0  !important}
#left-container{width:25% !important;}
#center-container{width:70% !important; margin-left:25% !important; position:absolute !important; top:0 !important}
#tag-handle-list li{display:block !important}
.mine div{display:inline !important; margin-left:-32px}
.timestamp{color:#999999 !important}
#profile-count-navi dl dt{z-index:10 !important}

.mine,
.sub-navi,
#profile-container,
#tag-handle
{border:solid #666666 1px !important}

.inplace-edit-icon,.inplace-delete-icon{display:inline !important; position:relative !important; top:0 !important}
.inplace-form input.private{display:block !important; position:relative !important; top:0 !important; left:0 !important}
.inplace-form input.comment,
#user-search-field,
#add-interest-tag .input-text
{border:solid #000000 1px !important; background-color:#ffffff !important; color:#999999 !important}
.inplace-form input.comment:focus,
#user-search-field:focus,
#add-interest-tag .input-text:focus
{color:#000000 !important; outline:#0000ff !important}

.hatena-star-comment-container,.hatena-star-comment-button,.hatena-star-add-button,.hatena-star-star-container,.hatena-star-inner-count,
.profile-image,.entry-favicon,
.username,
.entry-image-block,
.entry-summary,
.entry-comment-fold,
.favorite,.bookmark,.interest,.hotentry,
#tag-more-show,
#right-container,
#without-entry-content,
ul#follow-user,
.invitation,
.others,
.twitter,
.tweets,
.twitter *,
.tweets *
{display:none !important}

.result-window-inner-container{border:solid #999999 4px !important; margin-left:-55% !important; width:180% !important; background-color:#ffffcc !important}
.result-window-inner .result li{width:100% !important}
.pager-prev,.pager-next{color:#0000ff !important}
.result-window div.progress{background-color:#ffffff !important; border:solid #333333 1px !important}
.result-window div.progress-bar{background-color:#cccccc !important}

/*全文検索用暫定*/
div.user-search input#query{background-color:#ffffff !important; border:solid #000000 1px !important}
div.user-search input.inputbutton{width:10em !important; border-style:solid !important; border-width:2px 3px 3px 2px !important; border-color:#999999 #333333 #333333 #999999 !important; background-color:#ccccff !important}
div.user-search input.inputbutton:hover,
div.user-search input.inputbutton:focus,
div.user-search input.inputbutton:active{color:#cc0000 !important; background-color:#ffffff !important}
div.user-search input.inputbutton:active{border-color:#333333 #999999 #999999 #333333 !important; border-width:2px 1px 1px 2px !important}
a:link strong{color:#0000ff !important}
a:visited strong{color:#660066 !important}
a:hover strong,
a:active strong,
a:focus strong{color:#cc0000 !important}
body.search strong{background-color:#ccffff !important}
.search ul.threshold .selected a{background-color:#ccffff !important}
.search ul.threshold{visibility:visible !important}
/**/

/*follow follower用暫定*/
.hatena-module-profile .hatena-module-body ul:first-child li a[href*='favorite']{color:#000000 !important; background-color:#ffffcc !important; text-decoration:none !important; outline-style:none !important; pointer-events:none !important; cursor:text !important; -o-link:'' !important; -o-link-source:current !important;}
.hatena-module-profile .hatena-module-body ul:first-child li a[href*='follower']{color:#000000 !important; background-color:#ffffcc !important; text-decoration:none !important; outline-style:none !important; pointer-events:none !important; cursor:text !important; -o-link:'' !important; -o-link-source:current !important;}
* html .hatena-module-profile .hatena-module-body ul li a{color:#000000 !important; background-color:#ffffcc !important; text-decoration:none !important; outline-style:none !important; cursor:text !important; margin-left:-5em !important; text-indent:5em !important;}
* html .hatena-module-profile .hatena-module-body ul li a img{cursor:pointer !important}
.hatena-module-profile .hatena-module-body ul:first-child li a[href*='favorite']:active{visibility:hidden !important}
.hatena-module-profile .hatena-module-body ul:first-child li a[href*='follower']:active{visibility:hidden !important}

.hatena-module-profile .hatena-module-body ul:first-child li.following+li a:link{color:#0000ff !important; text-decoration:underline !important; cursor:pointer !important}
.hatena-module-profile .hatena-module-body ul:first-child li.following+li a:visited{color:#660066 !important; text-decoration:underline !important; cursor:pointer !important}
.hatena-module-profile .hatena-module-body ul:first-child li.following+li a:hover,
.hatena-module-profile .hatena-module-body ul:first-child li.following+li a:active,
.hatena-module-profile .hatena-module-body ul:first-child li.following+li a:focus{color:#cc0000 !important; text-decoration:underline !important; cursor:pointer !important}

.hatena-module-profile .hatena-module-favoritelist ul.sidebar-users li a:link{color:#0000ff !important; text-decoration:none !important; cursor:pointer !important}
.hatena-module-profile .hatena-module-favoritelist ul.sidebar-users li a:visited{color:#660066 !important; text-decoration:none !important; cursor:pointer !important}
.hatena-module-profile .hatena-module-favoritelist ul.sidebar-users li a:hover,
.hatena-module-profile .hatena-module-favoritelist ul.sidebar-users li a:active,
.hatena-module-profile .hatena-module-favoritelist ul.sidebar-users li a:focus{color:#cc0000 !important; text-decoration:none !important; cursor:pointer !important}
/**/

Permalink | トラックバック(0) | 20:18

HTML5のdetails要素を実際に使ってみた感想

厳選、メタ検索・メタディレクトリの話題

　２０１１年１０月１０日現在、手元にあるブラウザの中で、details要素に対応してるのはGoogle Chrome（14.0.835.202）だけだけど。

　当サイト「厳選、メタ検索・メタディレクトリ」のメタ検索フォームの部分に使ってみた（地味だけど、実用的なのを試みてみた）。

　Chromeで閲覧すれば、右向き三角形が頭についた青い文字が見えるはず。それをクリックすれば開閉できる。開くと三角形が下向きになる。

　未対応ブラウザに対しては、スクリプトでsummary要素を消してるので、青い文字は見えないはず。

　未対応ブラウザに対しては、ジャバスクリプトでエミュレートすることも可能だろうけど、無くて困るような機能ではないのでそこまではしてない。プログレッシブ・エンハンスメントというやつだ。

　仕様上の定義はともかく、Chromeの実装上はsummary要素のテキストをクリックすれば開閉できる。クリックできるのが右向き三角形部分だけだと不便なのでこの実装は妥当だろう。

　実態としては、summaryというよりはcaptionという方が近い感じ。detailcaptionなんて名前に変更になる可能性もあるかも。

　Chromeの今のところの実装では、summary要素のデフォルトスタイルは「なし」のようだ。親要素から何も承継しなければ、普通に黒い文字である。頭に右向き三角形がつくだけ。

　これだと「クリックできるんだ」という訴求力が弱いので、CSSで装飾してそれらしくしておく必要があるだろう。とりあえず、色を青くして、カーソルをpointerに指定しておいた。

　実装としては、右向き三角形じゃなくて、開閉できるものによくある「＋」「−」のアイコンみたいなのを使う手もありだろう。他のブラウザがどう実装してくるか見物である。

Permalink | トラックバック(0) | 13:52

Yahoo!くくるは、将来的にYahoo!カテゴリと入れ替えることを意図しているか？

検索・ポータル関係の話題

Yahoo!くくる

なんか、NAVERまとめの丸ぱくりっぽい部分もかなりある（UIは洗練されてるけど）のだが、それはともかくとして。

• Yahoo!カテゴリの下部に、Yahoo!くくるへの案内があって「Yahoo!カテゴリの姉妹サービス」と題されていたり。
• Yahoo!カテゴリの検索窓下部に、「Yahoo!くくる」と「Yahoo!カテゴリ全体」から検索対象を選ぶオプションが追加されてたり。
• Yahoo!検索の検索窓右上の「一覧」のところから、Yahoo!カテゴリを検索する「登録サイト」がなくなり、代わりに「くくる」が追加されてたり。
• Yahoo!くくるから検索した検索結果は、くくる検索結果と登録サイト（Yahoo!カテゴリ）検索結果が両方とも表示されたり。
• そもそも、Yahoo!くくるでは、Yahoo!サーファー活躍しまくりだったり。

といった感じで、Yahoo!カテゴリの延長線上という位置づけっぽい意図が感じられる。

将来的には、Yahoo!カテゴリを廃止あるいはほぼ停止して、Yahoo!くくるに入れ替えるようなことを意図してるかもしれない。ガチガチのカテゴリに分類するより、テーマにタグ付けして分類する方が柔軟だしね。

Permalink | トラックバック(0) | 04:58

NAVERから「統合検索」がなくなって、単なるウェブ検索ベースのブレンド検索になった

検索・ポータル関係の話題

NAVER統合検索がリニューアル

「統合検索」がリニューアルといってるが、「統合検索」はなくなっている。

トップページでも検索結果画面でも、「統合検索」がなくなって「ウェブ」検索のオプションが先頭にきている。

そして、そのウェブ検索結果は、ウェブ検索結果をベースとしていろんな分野の検索結果をまぜるタイプ。つまりは、Googleのユニバーサル検索や、YahooやBingのブレンド検索と変わり映えしないものとなった。

結局それがユーザーにとって最適なUIだというのは分からんでもないのだが。

「統合検索」は、とりあえず全分野を見せるのが基本で（最近は、キーワードによって、ユーザーの意図するだろう分野をかなり絞り込んでいたが）、キーワードによっては意外な発見もあって面白かっただけに、少々残念な気がしないでもない。

Permalink | トラックバック(0) | 04:58

HTML4からの移行と後方互換性と将来的なXHML5移行をにらんだ、(HTML構文の)HTML5の書き方

未分類

Polyglot Markup: HTML-Compatible XHTML Documents

↑意訳すれば、「XML構文としてHTML構文としても妥当なXHTML5の書き方」ってなところだろう。

ただ、これはXHTML5（XML構文のHTML5）の方に軸足をおいてるので、（HTML構文の）HTML5の方に軸足をおいたものは考えられないかなと思った次第。

つまり、「旧式ブラウザへの後方互換性に留意しつつ、HTML4からの移行及びHTML4への出戻りも容易で、かつ、XHTML5への移行も容易な、（HTML構文の）HTML5の書き方」を考えてみようというわけ（自分用のメモ）。

１．後方互換性の問題

• ＜!DOCTYPE html＞は必ず書く。旧式ブラウザで標準モードのレンダリングをさせるためには必須。

• IE8以下等では未知の要素を空要素として解釈するためスタイルシートがまともに適用されないという困った問題があるので、それを解決するためにhead要素の上部（スタイルシートの読み込み前）に以下を記述。ジャバスクリプトを切ってる人やジャバスクリプト未対応ブラウザのことまでは面倒みきれない。

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>

• HTML5の新要素のうち、ブロックにした方がよさそうなものは、スタイルシートで指定しておく。

article,aside,figure,figcaption,footer,header,hgroup,nav,section{display:block}

• mark要素も、適当なスタイルをあてておいた方がよいだろう。

mark{background:yellow; color:black}

• 未対応ブラウザでdatalist要素が表示されないようにスタイルをあてておく。

datalist{display:none}

• video要素,audio要素,canvas要素には、適切な代替コンテンツを内包しておく。

<video src="xxx.mpg">
<object data="xxx.swf">videoタグにもフラッシュにも未対応の方ごめんなさい。</object>
</video>

• svg要素,math要素には、前後に未対応ブラウザ向けの記述をしておく。

<p>下記の数式は未対応ブラウザでは、正常に表示されてないかもしれません。</p>
<math>・・・・・・・・</math>

• input要素等のform属性は使わず、form要素への関連付けはform要素に内包する形で行う。

• input要素,button要素のformaction属性等（親form要素の各属性値を無視するやつ）は使用しない。

• scope属性付きstyle要素で特定範囲にだけスタイルシートを適用する方法は使わない。

• iframe要素でsrcdoc属性を指定するときは、代替のsrc属性も指定しておく。

• iframe要素のseamless属性を指定する場合は、未対応ブラウザでも支障のないようにする（特にスタイルやスクリプトでの取り扱い）。

２．HTML4からの移行及び出戻り

• HTML5の新要素の使用頻度→HTML4への出戻りの可能性が低いならば後方互換性に留意しつつ使いまくればいいし、そうでないなら控えた方がいいだろう。

• HTML5では文書構造に関する要素が増えてるので、divブロックを適切な要素に変更することを検討する。
  • section,article,header,footer,nav,asideなど。
  • スタイルシートやスクリプトの適用のため「だけ」に範囲を設定した場合は、div要素やspan要素を使う。論理や構造のための要素をスタイル・スクリプトのため「だけ」に転用してはいけない。

• HTML5で廃止された要素・属性・属性値は削除・変更する。
  • 例）frame要素は廃止なので、iframe要素を二つ並べるなどの手法をとる。
  • 例）a要素のname属性は廃止なので、各要素のid属性値をアンカー着地点にするように変更。
  • 例）img要素等のwidth属性,height属性の値には％指定はできなくなったので、書き換えるかスタイルシート（スタイルシートなら％指定もＯＫ）で対応。

• HTML5で意味が変更された要素には注意する。
  • 例）b,hr,i,s,small,uは論理要素に変更されたので、HTML5仕様に合致しないものは削除・変更。
  • 例）menu要素は、HTML4でもHTML5でもそれなりにうまく行くようにコーディングする。
  • 例）del要素,s要素の使い分けに注意。
  • 例）strong要素,em要素,mark要素の使い分けに注意。
  • 例）address要素の利用は、そのページ・記事・サイトの著者・所有者の連絡先を示すものに限定されたので、合致しないものは削除・修正。

• 意味の変更というわけでもないが、HTML5仕様ではbr要素の使いどころが狭く定義されてるので、合致しないものは削除・変更。
  • 内容や構造に応じて、p要素、ul要素、ol要素、pre要素あたりを利用して組みなおす形になるだろう。
  • ただ単に見た目目的で改行だけしたい場合は、該当要素にスタイルシートで「display:block」を指定するか、該当要素をdiv要素で囲うという手もある（form内のinput要素とかの整形など）。

• HTML4では必須で、HTML5では必須でなくなった属性を省略しない。そうしておけば、HTML4への出戻りも楽にできる。
  • script要素のtype属性、style要素のtype属性、img要素のalt属性など。

• 旧ブロック要素を旧インライン要素の中に入れるのは、なるべく避ける。そうしておけば、HTML4への出戻りも楽にできる。

• HTML5のform関連要素のバリデーション機能には頼りきらないで、必要なバリデーションは必ずサーバーサイドスクリプトでも行う。

• iframe要素の中身は、HTML4では代替コンテンツだけど、HTML5では無意味（いかなる場合でもレンダリングされないはずだし、いかなる解釈もされないはず）なので、留意すること。
  • 後方互換性の観点からは残しておいた方がいいかもしれない。
  • なお、XHTML5ではiframe要素の中身には何も書いてはいけない（下記は、XHTML5ではアウト）ので、XHTML5への移行可能性が高いなら消す。

<iframe src="example.html"><a href="example.html">iframe未対応の方はこちら</a></iframe>

• HTML構文でRDFaを使うのは面倒なので、使用しない。Microdataの方を使う。

• Microdataを使う場合でも、itemprop属性付きのlink要素やmeta要素をbody要素内に配置するのは極力避ける。未対応ブラウザで表示されてしまう可能性も否定できないため。

• アクセシビリティに特に留意しなければならないサイトでは、WAI−ARIAのrole属性,aria−xx属性の使用も考慮する。
  • HTML4に出戻りする場合は、WAI−ARIAの仕様の中に「HTML4.01 plus WAI−ARIA」のDTDがあるので、DOCTYPE宣言でそれを使えばよい。

３．将来におけるXHTML5への移行容易性

• 文字コードはutf8を使用する。utf8未対応ブラウザは、切捨て。
  • XMLはutf8かutf16が基本。HTML5ではutf8が推奨されている。

• 文字コードの指定は、HTML4の＜meta http−equiv="content−type" content=""＞方式ではなく、＜meta charset=""＞で行う。
  • meta要素のhttp−equiv属性の値「content−type」は、XHTML5ではアウト。
  • ＜meta charset=""＞はそれなりに後方互換性もある。
  • HTML4に出戻りする場合でも、修正箇所は一箇所なのでたいして手間ではない。

• xmlns属性は指定しない。
  • あくまでHTML構文ベースなので、XML名前空間の使用は避ける。
  • 将来的にHTML5とXHTML5の区別指標の一つとして「xmlns属性の有無」を用いるユーザーエージェントが登場する可能性も否定はできない。
  • XHTML5に移行する場合でも、html,svg,mathの各要素だけに指定すればとりあえずはＯＫなので、たいして手間ではない

• xml:langなどのxml構文特有の属性は使用しない。
  • あくまでHTML構文ベースなので、HTML4への後方互換性・出戻りの方を重視。
  • XHTML5に移行する場合でも、xml:lang属性等の追加はたいして手間ではあるまい。

• 原則として、要素名・属性名・属性値は小文字で記述する。ただし、SVG,MATHML関連等で例外的に大文字でなければならないものもあるので注意。

• 属性値は必ずダブルコーテーションで囲む。

• HTML構文では省略できるタグであっても、省略は絶対にしない。
  • XHTMLではタグの省略は一切不可。
  • 特にtbodyを省略しないように注意。

• スクリプト、スタイルシートは、すべて外部ファイル化する。インライン記述は一切しない。
  • HTML構文とXHTML構文とではスクリプト等のインライン記述の書き方が違ったりすることもあって面倒なので。
  • イベントの捕捉もスクリプト内で実行し、イベントハンドラ属性は使用しない。
  • 外部ファイル読み込み方式に未対応なブラウザは、切捨て。

• ジャバスクリプトでは、document.writeやdocument.writelnではなく、原則として、innerHTMLを使う。
  • document.writeやdocument.writelnは、XHTML5ではアウト。
  • innerHTML未対応ブラウザにどうしても対応したい場合は、ユーザーエージェント判定で振り分けて、例外的にdocument.write等を使用。

• 文字実体参照は＆amp;,＆lt;,＆gt;,＆quot;のみとし、他は数値参照とする。
  • XHTML5では、これらに加えて＆apos;しか使えないため。
  • ＆apos;は後方互換性の観点から使用せずに、数値参照を使う。
  • 特に、＆nbsp;に注意。この際だから見た目目的の＆nbsp;はすべて削除しちゃえ。どうしても必要なものは、数値参照で＆#160;

• noscript要素は使用しない。
  • XHTML5では、noscript要素はアウト。
  • スクリプト未対応ブラウザ向けの記述をスクリプトで消す方法が推奨されている。

• 空要素の閉じ方は、＜br /＞で統一する。
  • 後方互換性のため、スラッシュの前にスペースを入れる。
  • ＜br＞＜/br＞は、HTML構文としてはアウトなので使わない。

• boolean属性の最小化表記はしない。
  • ＜option selected＞とせず、＜option selected="selected"＞と書く。
  • 非最小化表記に未対応なブラウザもあるらしいが、シェアは少ないと推測される。

Permalink | トラックバック(0) | 12:13