顿辞肠迟测辫别という黒魔术の话
- 1. 顿翱颁罢驰笔贰という黒魔术の话 門屋 亮 @ryokdy
- 2. 自己紹介 ? 所属 サイボウズ ? 手がけた製品 – サイボウズ ガルーン 2.5 / 3.5 – サイボウズ Ｏｆｆｉｃｅ 8 / 9 – サイボウズ デヂエ 8 – サイボウズ メールワイズ 4 / 5 など
- 3. 想定するターゲット ? HTMLは書いたことがある ? DOCTYPEって聞いたことがあるけどよく知 らない ? これからはHTML5らしいので勉強してみた い ? なんか昔作られたサイトをリニューアル させられるっぽい
- 4. アジェンダ ? 90年代ブラウザ戦争 ? Standards mode / Quirks mode ? DOCTYPEをどう書けばいいか ? 代表的なサイトの例 ? 壊れたスタイルの直し方 ? まとめ
- 6. ’96/11/2 Netscape Navigator 3.0 日本語版発売 6,000
- 7. ’96/8/13 Internet Explorer 3.0 ダウンロード開始 0
- 8. シェア争いの結果 ? 安定性、安全性よりも差別化が優先され る ? 独自仕様による混乱 ? HTML規約に違反するページをIEは積極的 に補正。結果としてNetscapeでレイアウト がずれるケースが多発 ? 2000年にIEが市場シェアのほぼすべてを獲 得して第一次ブラウザ戦争は終結
- 10. W3C標準への準拠が進む ? Acid2 2005/4/13～ http://acid2.acidtests.org/
- 11. IE6
- 12. IE7
- 13. Firefox2
- 14. ここで切実な問題 ? W3C勧告には準拠したい ? 仕様にそって正しく表示するようにする と、古いサイトがきちんと表示されなく なる。 ? ブラウザのシェアが下がるのは嫌だ。
- 15. Microsoftのたどり着いた解 仕様どおりに表示してほしいときだけ そうすればよくない？
- 16. DOCTYPEの誕生 どんなふうにレンダリングしてほしいかは htmlタグより先に書け <DOCTYPE これは標準モードのHTML> <html>
- 17. ふー 一件落着
- 18. あれ、標準どおりに表示したつも りだったけど標準じゃなかった よ。。 どうする？？
- 20. というわけで ? Quirks Mode（互換モード） ? Standards Mode（標準モード） ? Almost Standards Mode（ほぼ標準モード）
- 22. 結局どうすればいいか HTML5ではこれだけ <!DOCTYPE html>
- 23. facebook 標準モード <!DOCTYPE html> <html lang="ja" id="facebook" class="no_js">
- 25. 2ch ほぼ標準モード <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
- 26. mixi 互換モード <html class="osWindows browserChrome browserChrome19 serviceLogoutQuirks pageHomeJpMixi domainJpMixi">
- 28. ミッション IE6 向けに作られたページを モダンブラウザでも見られるように直せ
- 29. 滨贰6だとこう见える
- 31. QuirksモードのQuirkなところ ? class, idなどの属性値がcase-insensitive ? CSSプロパティの数値単位を省略できる ? CSSプロパティの色指定で#を省略できる ? text-alignで幅が指定されたブロックレベル の中央寄せができる ? ボックスの解釈がおかしい
- 32. ボックスの间违った解釈 padding 正しいwidth border 間違ったwidth
- 33. まとめ ? DOCTYPEスイッチは過去の戦争の爪痕 ? HTML5だとかなり楽に書ける ? サイボウズOfficeにはこれからDOCTYPEを付ける つもり（たぶん） ? IEの独自仕様がっつりのページを直すのは大変
- 34. ありがとうございました