BookMarks: 2009年8月まとめ

はっきり仕様には書いてますね。気づかなかった。

書くとどうなるか。

pタグの中にdivを書くとこうなる。赤いボーダーがpタグ。pタグがdivをかこっているが、floatしたみたいに高さが消えている(Fx3[mac])。divの中にあるpタグは正しい挙動をしているのもわかる。そして、ブラウザによってタグの挙動が違う。

pタグの中にdivを書くと変な感じになる。

ブラウザ比較

p_div2.gif

firefox3.5

p_div1.gif

safari4

p_div3.gif

opera9

サンプルがすごく素直に動いてくれた。

urlに引数を付与しておいて、リンク先のページのjavascriptで引数を読み込み、ページ内のタブ切り替えを制御できるようにした。

↓とりあえず、タイトルがすごくながい。今まで見た中で一番か二番に長いかもしれない。

今日いじっているhtmlが、実はよく見るとdoctype宣言がない状態とほぼ等しい宣言だった。。。つまり後方互換モードになっていました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

↑ほぼすべてのモダンブラウザが後方互換モードになる。

↑この互換モードの一覧表を見ると、一目瞭然。この宣言だと表のすべてのブラウザで後方互換モードになる宣言のようだ。

そして、後方互換モードだと、:hoverなどの疑似要素はliなどの普通のタグでは効かなくなる。

firebugで一生懸命クラスを探しても認識されていないcssは表示されない。
このことから:hoverがブラウザに認識されていないことがわかる。

結論

後方互換モードで疑似要素を使う時はaタグなら動きます。

フラッシュみたいな動き。クリックするといろいろな反応をしてくれる。

CSSいじるだけだからもっと簡単にできるかと思ったけど、クロスブラウザ問題でややこしくなってますね。だからjQueryとかの外部ライブラリを利用したサンプルが横行してるんだ。

これはすごい。操作も簡単。マクロの編集も誰でもできる。

表の一番下に解説になっているのかなっていないのか、微妙な改行についての解説もありますね。

[ホワイトスペースの違いを無視] をオフにしてください。

と、書いてあるので、改行とホワイトスペースのマッチに関係がありそう。

世の中本当に面白くなってきましたね。名刺に音声情報が入っているのでしょうか?

AR Business Card from James Alliban on Vimeo.

設計事務所らしいデザインがjavascriptとマッチしている。

あわせて読みたいブログパーツ