Downloaded 22 times
MY
Uploaded byMasataka Yakura
3,443 views
Web Platform -- Moving Forward!
Firefox Developers Conference 2011 in Osaka (2011年5月14日開催) のトークセッションで使ったスライドです。
Recommended
More Related Content
What's hot
Similar to Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
- 1.Web PlatformMoving Forward!MasatakaYakura (myakura)
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.W3C Confirms May2011 forHTML5 Last Callwww.w3.org/2011/02/htmlwg-pr.html
- 9.5/24に Last Call公開（予定）ただ、一回じゃ終わらない。
- 10.
- 11.
- 12.
- 13.CSS 2.1, Selectors,Colorそろそろ勧告。www.w3.org/TR/CSS/standards.mitsue.co.jp/resources/w3c/TR/css-2010/
- 14.
- 15.
- 16.
- 17.
- 18.mark.spelling {text-decoration-color: red; text-decoration-style: wavy;}
- 19.CSS Image Values&Replaced Content Moduledev.w3.org/csswg/css3-images/
- 20.
- 21.
- 22.-webkit-linear-gradient(...) (._. )...-moz-linear-gradient(...)-ms-linear-gradient(...)-o-linear-gradient(...) linear-gradient(...)-webkit-gradient(linear, ...)
- 23.
- 24.
- 25.body {background-image : image( "vector.svg", “raster-hi.png" 150dpi ); ...}
- 26.
- 27.
- 28.
- 30.img {width: 500px; height: 500px; border: 10px solid; ...}
- 31.img {width: 500px; height: 500px; border: 10px solid; object-fit: contain; ...}
- 32.
- 33.
- 34.• Template Lyt • Regions• Grid Align • Exclusions
- 35.Template Layoutdisplay, 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.
- 40.#doc {display: grid; grid-columns: 150px 1fr; grid-rows: 50px 1fr 50px;}#item1 { grid-column: 2; grid-row: 1 4;}
- 41.
- 42.
- 44.
- 46.
- 47.
- 48.
- 49.テキストを段組 これまで段組は から文章中心ので 表 現 す る CSS table を 使 っ て Webサイトで広モジュール。複 無理やり実現す く活用されてい数のブラウザで るしかなかった。 くのではないだ実装が進行中だ。 Multicol は こ れ ろうか。
- 50.#intro {column-count: 3; column-gap: 1.5em;}
- 51.
- 52.
- 53.
- 54.SDHD
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.File APIs, IndexedDBが実装中。ClipboardOprsなど新しい仕様も。
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.var mql =matchMedia("(orientation:landscape)");mql.addListener(handleOrientationChange);function handleOrientationChange(mql) { if(mql.matches) { // よこよこ // 横のなにか } else { // 縦のなにか }}
- 69.