Web Platform
Moving 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 for
HTML5 Last Call
www.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 Animations
Appleの拡張由来。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 Module
dev.w3.org/csswg/css3-images/
Gradients, image(), element(),
object-fit などを定義。
Gradients
Opera, IEでも実装中。
-webkit-linear-gradient(...)    (._. )...
-moz-linear-gradient(...)
-ms-linear-gradient(...)
-o-linear-gradient(...)
 linear-gradient(...)

-webkit-gradient(linear, ...)
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 Layout
display, position を拡張。
www.w3.org/TR/css3-layout/
body {
  display: "aaaa"
           "bccc"
           "dddd";
}
#header { position: a }
#sub       { position: b }
#main      { position: c }
#footer { position: d }
実装なし。
なくなるかもしれない?
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-layouts.aspx
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 Layout
www.w3.org/TR/css3-multicol/
テキストを段組         これまで段組は          から文章中心の
で 表 現 す る CSS   table を 使 っ て    Webサイトで広
モジュール。複         無理やり実現す          く活用されてい
数のブラウザで         るしかなかった。         くのではないだ
実装が進行中だ。        Multicol は こ れ   ろうか。
#intro {
  column-count: 3;
  column-gap: 1.5em;
}
Gecko, WebKitは接頭辞あり、
Opera, IE10では接頭辞なしの実装。
Flexible Box Layout
dev.w3.org/csswg/css3-flexbox/
幅にあわせ伸びるボックス、
ボックスの並び替えなどを実現。
SD   HD
ここは固定幅




 ほどよくのびてくれる
Gecko, WebKitが独自に実装。
TridentもIE10で実装中。
新しいWDで仕様が変更に……
(実装は古いものを参照)
そのほか
WebApps WG
www.w3.org/2008/webapps/wiki/PubStatus
File APIs, IndexedDBが実装中。
Clipboard Oprsなど新しい仕様も。
Web Performance WG
www.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 View
getClientRects()とかを定義。
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(mql) {
  if(mql.matches) { // よこよこ
    // 横のなにか
  } else {
    // 縦のなにか
  }
}
いろんなことが進んでますよ!

Web Platform -- Moving Forward!