Recomendados
Mais conteúdo relacionado
Semelhante a Doctypeという黒魔術の話
Semelhante a Doctypeという黒魔術の話 (20)
Mais de 亮 門屋
Último
Último (11)
Doctypeという黒魔術の話
- 1. DOCTYPEという黒魔術の話 門屋 亮 @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. IE6だとこう見える
- 31. QuirksモードのQuirkなところ • class, idなどの属性値がcase-insensitive • CSSプロパティの数値単位を省略できる • CSSプロパティの色指定で#を省略できる • text-alignで幅が指定されたブロックレベル の中央寄せができる • ボックスの解釈がおかしい
- 32. ボックスの間違った解釈 padding 正しいwidth border 間違ったwidth
- 33. まとめ • DOCTYPEスイッチは過去の戦争の爪痕 • HTML5だとかなり楽に書ける • サイボウズOfficeにはこれからDOCTYPEを付ける つもり（たぶん） • IEの独自仕様がっつりのページを直すのは大変
- 34. ありがとうございました