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

• Grid Align

• Regions

• 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を使って

無理やり実現す

るしかなかった。

Multicolはこれ

から文章中心の

Webサイトで広

く活用されてい

くのではないだ

ろうか。

#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 {

// 縦のなにか

}

}

いろんなことが進んでますよ！