Web Platform -- Moving Forward!

  • 5,271 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,271
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
19
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Web PlatformMoving 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 forHTML5 Last Callwww.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 AnimationsAppleの拡張由来。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 Moduledev.w3.org/csswg/css3-images/
  • 20. Gradients, image(), element(),object-fit などを定義。
  • 21. GradientsOpera, 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/
  • 29. img { width: 500px; height: 500px; border: 10px solid; ...}
  • 30. img { width: 500px; height: 500px; border: 10px solid; object-fit: contain; ...}
  • 31. CSSレイアウト
  • 32. レイアウトに関係するモジュールがやたら多い。
  • 33. • Template Lyt • Regions• Grid Align • Exclusions
  • 34. Template Layoutdisplay, position を拡張。www.w3.org/TR/css3-layout/
  • 35. body { display: "aaaa" "bccc" "dddd";}#header { position: a }#sub { position: b }#main { position: c }#footer { position: d }
  • 36. 実装なし。なくなるかもしれない?
  • 37. Grid Alignmentテーブルっぽい指定。dev.w3.org/csswg/css3-grid-align/
  • 38. #doc { display: grid; grid-columns: 150px 1fr; grid-rows: 50px 1fr 50px;}#item1 { grid-column: 2; grid-row: 1 4;}
  • 39. Microsoftが提案IE10で試験的に実装中。blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platform-preview-and-css-features-for-adaptive-layouts.aspx
  • 40. Regionsテキストの流れる領域を指定。
  • 41. Exclusions四角形以外でfloatするような。
  • 42. どちらもAdobeの提案。試験実装あり。www.adobe.com/devnet/html5/articles/css3-regions.html
  • 43. 被る機能があるのでそれぞれの提案を評価中。lists.w3.org/Archives/Public/www-style/2011Mar/0216.html
  • 44. Multi-column Layoutwww.w3.org/TR/css3-multicol/
  • 45. テキストを段組 これまで段組は から文章中心ので 表 現 す る CSS table を 使 っ て Webサイトで広モジュール。複 無理やり実現す く活用されてい数のブラウザで るしかなかった。 くのではないだ実装が進行中だ。 Multicol は こ れ ろうか。
  • 46. #intro { column-count: 3; column-gap: 1.5em;}
  • 47. Gecko, WebKitは接頭辞あり、Opera, IE10では接頭辞なしの実装。
  • 48. Flexible Box Layoutdev.w3.org/csswg/css3-flexbox/
  • 49. 幅にあわせ伸びるボックス、ボックスの並び替えなどを実現。
  • 50. SD HD
  • 51. ここは固定幅 ほどよくのびてくれる
  • 52. Gecko, WebKitが独自に実装。TridentもIE10で実装中。
  • 53. 新しいWDで仕様が変更に……(実装は古いものを参照)
  • 54. そのほか
  • 55. WebApps WGwww.w3.org/2008/webapps/wiki/PubStatus
  • 56. File APIs, IndexedDBが実装中。Clipboard Oprsなど新しい仕様も。
  • 57. Web Performance WGwww.w3.org/2011/04/webperf
  • 58. 時間計測、描画最適化などパフォーマンス関連の仕様を策定。
  • 59. requestAnimationFrame()dvcs.w3.org/hg/webperf/raw-file/tip/specs/RequestAnimationFrame/Overview.html
  • 60. オフスクリーン時などのアニメーションの処理を最適化。paulirish.com/2011/requestanimationframe-for-smart-animating/
  • 61. CSS WG (!?)
  • 62. CSSOM ViewgetClientRects()とかを定義。dev.w3.org/csswg/cssom-view/
  • 63. window.matchMedia()メディアクエリーをスクリプトから。developer.mozilla.org/en/CSS/Using_media_queries_from_code
  • 64. var mql = matchMedia("(orientation:landscape)");mql.addListener(handleOrientationChange);function handleOrientationChange(mql) { if(mql.matches) { // よこよこ // 横のなにか } else { // 縦のなにか }}
  • 65. いろんなことが進んでますよ!