Firefox Developers Conference 2011 in Osaka (2011年5月14日開催) のトークセッションで使ったスライドです。

1. Web Platform
Moving Forward!
Masataka Yakura (myakura)

2. HTML5

3. 実装進んでます！

4. HTMLパーサはFx4, Cr7で実装。
dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-
svg-speed-and-more/

5. HTML中にSVGを書ける。
グラフや高解像度対応に最適。

6. フォームの実装も着々と。
developer.mozilla.org/ja/HTML/HTML5/Forms_in_HTML5

7. <input type=foo> のフル実装と
フォームのスタイルづけが課題か。

8. W3C Confirms May 2011 for
HTML5 Last Call
www.w3.org/2011/02/htmlwg-pr.html

9. 5/24に Last Call 公開（予定）
ただ、一回じゃ終わらない。

10. 安定すると思いきや
大きな変更の可能性も……

11. <hgroup> なくなるかも？
www.w3.org/html/wg/tracker/issues/164

12. CSS

13. CSS 2.1, Selectors, Color
そろそろ勧告。
www.w3.org/TR/CSS/
standards.mitsue.co.jp/resources/w3c/TR/css-2010/

14. CSS2がひと段落したので
今後はCSS3, CSS4 (!) が進む。

15. CSS Animations
Appleの拡張由来。Geckoで実装。
dev.w3.org/csswg/css3-animations/

16. CSS3 Text
影、下線、行送りなど。
dev.w3.org/csswg/css3-text/

17. text-decoration
下線とかのスタイルを変更できる。

18. mark.spelling {
text-decoration-color: red;
text-decoration-style: wavy;
}

19. CSS Image Values &
Replaced Content Module
dev.w3.org/csswg/css3-images/

20. Gradients, image(), element(),
object-fit などを定義。

21. Gradients
Opera, IEでも実装中。

22. -webkit-linear-gradient(...) (._. )...
-moz-linear-gradient(...)
-ms-linear-gradient(...)
-o-linear-gradient(...)
linear-gradient(...)
-webkit-gradient(linear, ...)

23. Gradientsを先に進めるため
遅れたものは Level 4 行きかも？

24. image()
代替画像、dpiの指定。

25. body {
background-image :
image( "vector.svg",
“raster-hi.png" 150dpi );
...
}

26. element()
任意の要素を画像として取得。

27. -moz-element() の標準化。
hacks.mozilla.org/2010/08/mozelement/

28. object-fit
アスペクト比を保って拡大縮小。
dev.opera.com/articles/view/css3-object-fit-object-position-ja/

30. img {
width: 500px;
height: 500px;
border: 10px solid;
...
}

31. img {
width: 500px;
height: 500px;
border: 10px solid;
object-fit: contain;
...
}

32. CSSレイアウト

33. レイアウトに関係する
モジュールがやたら多い。

34. • Template Lyt • Regions
• Grid Align • Exclusions

35. Template Layout
display, position を拡張。
www.w3.org/TR/css3-layout/

36. body {
display: "aaaa"
"bccc"
"dddd";
}
#header { position: a }
#sub { position: b }
#main { position: c }
#footer { position: d }

37. 実装なし。
なくなるかもしれない？

38. Grid Alignment
テーブルっぽい指定。
dev.w3.org/csswg/css3-grid-align/

40. #doc {
display: grid;
grid-columns: 150px 1fr;
grid-rows: 50px 1fr 50px;
}
#item1 {
grid-column: 2;
grid-row: 1 4;
}

41. Microsoftが提案
IE10で試験的に実装中。
blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platform-preview-
and-css-features-for-adaptive-layouts.aspx

42. Regions
テキストの流れる領域を指定。

44. Exclusions
四角形以外でfloatするような。

46. どちらもAdobeの提案。
試験実装あり。
www.adobe.com/devnet/html5/articles/css3-regions.html

47. 被る機能があるので
それぞれの提案を評価中。
lists.w3.org/Archives/Public/www-style/2011Mar/0216.html

48. Multi-column Layout
www.w3.org/TR/css3-multicol/

49. テキストを段組 これまで段組は から文章中心の
で 表 現 す る CSS table を 使 っ て Webサイトで広
モジュール。複 無理やり実現す く活用されてい
数のブラウザで るしかなかった。 くのではないだ
実装が進行中だ。 Multicol は こ れ ろうか。

50. #intro {
column-count: 3;
column-gap: 1.5em;
}

51. Gecko, WebKitは接頭辞あり、
Opera, IE10では接頭辞なしの実装。

52. Flexible Box Layout
dev.w3.org/csswg/css3-flexbox/

53. 幅にあわせ伸びるボックス、
ボックスの並び替えなどを実現。

54. SD HD

55. ここは固定幅
ほどよくのびてくれる

56. Gecko, WebKitが独自に実装。
TridentもIE10で実装中。

57. 新しいWDで仕様が変更に……
(実装は古いものを参照)

58. そのほか

59. WebApps WG
www.w3.org/2008/webapps/wiki/PubStatus

60. File APIs, IndexedDBが実装中。
Clipboard Oprsなど新しい仕様も。

61. Web Performance WG
www.w3.org/2011/04/webperf

62. 時間計測、描画最適化など
パフォーマンス関連の仕様を策定。

63. requestAnimationFrame()
dvcs.w3.org/hg/webperf/raw-
file/tip/specs/RequestAnimationFrame/Overview.html

64. オフスクリーン時などの
アニメーションの処理を最適化。
paulirish.com/2011/requestanimationframe-for-smart-animating/

65. CSS WG (!?)

66. CSSOM View
getClientRects()とかを定義。
dev.w3.org/csswg/cssom-view/

67. window.matchMedia()
メディアクエリーをスクリプトから。
developer.mozilla.org/en/CSS/Using_media_queries_from_code

68. var mql =
matchMedia("(orientation:landscape)");
mql.addListener(handleOrientationChange);
function handleOrientationChange(mql) {
if(mql.matches) { // よこよこ
// 横のなにか
} else {
// 縦のなにか
}
}

69. いろんなことが進んでますよ！