Web Platform -- Moving Forward!

6,250 views

Published on

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

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,250
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
20
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Web Platform -- Moving Forward!

  1. 1. Web PlatformMoving Forward!Masataka Yakura (myakura)
  2. 2. HTML5
  3. 3. 実装進んでます!
  4. 4. HTMLパーサはFx4, Cr7で実装。dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-svg-speed-and-more/
  5. 5. HTML中にSVGを書ける。グラフや高解像度対応に最適。
  6. 6. フォームの実装も着々と。developer.mozilla.org/ja/HTML/HTML5/Forms_in_HTML5
  7. 7. <input type=foo> のフル実装とフォームのスタイルづけが課題か。
  8. 8. W3C Confirms May 2011 forHTML5 Last Callwww.w3.org/2011/02/htmlwg-pr.html
  9. 9. 5/24に Last Call 公開(予定)ただ、一回じゃ終わらない。
  10. 10. 安定すると思いきや大きな変更の可能性も……
  11. 11. <hgroup> なくなるかも?www.w3.org/html/wg/tracker/issues/164
  12. 12. CSS
  13. 13. CSS 2.1, Selectors, Colorそろそろ勧告。www.w3.org/TR/CSS/standards.mitsue.co.jp/resources/w3c/TR/css-2010/
  14. 14. CSS2がひと段落したので今後はCSS3, CSS4 (!) が進む。
  15. 15. CSS AnimationsAppleの拡張由来。Geckoで実装。dev.w3.org/csswg/css3-animations/
  16. 16. CSS3 Text影、下線、行送りなど。dev.w3.org/csswg/css3-text/
  17. 17. text-decoration下線とかのスタイルを変更できる。
  18. 18. mark.spelling { text-decoration-color: red; text-decoration-style: wavy;}
  19. 19. CSS Image Values &Replaced Content Moduledev.w3.org/csswg/css3-images/
  20. 20. Gradients, image(), element(),object-fit などを定義。
  21. 21. GradientsOpera, IEでも実装中。
  22. 22. -webkit-linear-gradient(...) (._. )...-moz-linear-gradient(...)-ms-linear-gradient(...)-o-linear-gradient(...) linear-gradient(...)-webkit-gradient(linear, ...)
  23. 23. Gradientsを先に進めるため遅れたものは Level 4 行きかも?
  24. 24. image()代替画像、dpiの指定。
  25. 25. body { background-image : image( "vector.svg", “raster-hi.png" 150dpi ); ...}
  26. 26. element()任意の要素を画像として取得。
  27. 27. -moz-element() の標準化。hacks.mozilla.org/2010/08/mozelement/
  28. 28. object-fitアスペクト比を保って拡大縮小。dev.opera.com/articles/view/css3-object-fit-object-position-ja/
  29. 29. img { width: 500px; height: 500px; border: 10px solid; ...}
  30. 30. img { width: 500px; height: 500px; border: 10px solid; object-fit: contain; ...}
  31. 31. CSSレイアウト
  32. 32. レイアウトに関係するモジュールがやたら多い。
  33. 33. • Template Lyt • Regions• Grid Align • Exclusions
  34. 34. Template Layoutdisplay, position を拡張。www.w3.org/TR/css3-layout/
  35. 35. body { display: "aaaa" "bccc" "dddd";}#header { position: a }#sub { position: b }#main { position: c }#footer { position: d }
  36. 36. 実装なし。なくなるかもしれない?
  37. 37. Grid Alignmentテーブルっぽい指定。dev.w3.org/csswg/css3-grid-align/
  38. 38. #doc { display: grid; grid-columns: 150px 1fr; grid-rows: 50px 1fr 50px;}#item1 { grid-column: 2; grid-row: 1 4;}
  39. 39. Microsoftが提案IE10で試験的に実装中。blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platform-preview-and-css-features-for-adaptive-layouts.aspx
  40. 40. Regionsテキストの流れる領域を指定。
  41. 41. Exclusions四角形以外でfloatするような。
  42. 42. どちらもAdobeの提案。試験実装あり。www.adobe.com/devnet/html5/articles/css3-regions.html
  43. 43. 被る機能があるのでそれぞれの提案を評価中。lists.w3.org/Archives/Public/www-style/2011Mar/0216.html
  44. 44. Multi-column Layoutwww.w3.org/TR/css3-multicol/
  45. 45. テキストを段組 これまで段組は から文章中心ので 表 現 す る CSS table を 使 っ て Webサイトで広モジュール。複 無理やり実現す く活用されてい数のブラウザで るしかなかった。 くのではないだ実装が進行中だ。 Multicol は こ れ ろうか。
  46. 46. #intro { column-count: 3; column-gap: 1.5em;}
  47. 47. Gecko, WebKitは接頭辞あり、Opera, IE10では接頭辞なしの実装。
  48. 48. Flexible Box Layoutdev.w3.org/csswg/css3-flexbox/
  49. 49. 幅にあわせ伸びるボックス、ボックスの並び替えなどを実現。
  50. 50. SD HD
  51. 51. ここは固定幅 ほどよくのびてくれる
  52. 52. Gecko, WebKitが独自に実装。TridentもIE10で実装中。
  53. 53. 新しいWDで仕様が変更に……(実装は古いものを参照)
  54. 54. そのほか
  55. 55. WebApps WGwww.w3.org/2008/webapps/wiki/PubStatus
  56. 56. File APIs, IndexedDBが実装中。Clipboard Oprsなど新しい仕様も。
  57. 57. Web Performance WGwww.w3.org/2011/04/webperf
  58. 58. 時間計測、描画最適化などパフォーマンス関連の仕様を策定。
  59. 59. requestAnimationFrame()dvcs.w3.org/hg/webperf/raw-file/tip/specs/RequestAnimationFrame/Overview.html
  60. 60. オフスクリーン時などのアニメーションの処理を最適化。paulirish.com/2011/requestanimationframe-for-smart-animating/
  61. 61. CSS WG (!?)
  62. 62. CSSOM ViewgetClientRects()とかを定義。dev.w3.org/csswg/cssom-view/
  63. 63. window.matchMedia()メディアクエリーをスクリプトから。developer.mozilla.org/en/CSS/Using_media_queries_from_code
  64. 64. var mql = matchMedia("(orientation:landscape)");mql.addListener(handleOrientationChange);function handleOrientationChange(mql) { if(mql.matches) { // よこよこ // 横のなにか } else { // 縦のなにか }}
  65. 65. いろんなことが進んでますよ!

×