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

Web Platform -- Moving Forward!

6,583 views

Published on

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

Published in: Technology
  • Be the first to comment

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. いろんなことが進んでますよ!

×