Masataka Yakura (myakura)
HTML5 Conference 2012
September 8, 2012
2011年12月：HTML5とか勉強会 #24
「HTML&API総まくり」 by 白石さん
HTML5関連のAPIを紹介したセッションが大好評。
「2012年版やってくださいよ！」
→ いつのまにか担当に……
→ あてがわれたのが大ホール……
できる限り紹介します。
新しめのものを紹介します。
今後いろいろ変わる可能性が高いです。
あしからず。
できるだけフォローアップします。
2011年5月：Last Callに。
2012年3月：最新WD公開。
なおも更新は続く。
Ian HicksonがWHATWG HTMLに専念。W3C HTML5からは離れる。
W3Cは新しいEditorの募集へ。
HTML5はWHATWG HTMLから切り出されている。
スナップショットとLiving Standard。
ブランチを切った感じ。共存可能。
Microsoft, Adobe, Apple, Googleの人などが参加。
9月：もうひとり追加。
勧告候補を公開する → 来年あたり？
実装2つ → 突き詰めると終わらない
勧告を早めたいW3C vs. 長くかかっても互換性を重視したいメンバー
次のHTMLも検討すべく、HTML WGの組織改編中。
WHATWG HTMLはもちろん、他からも提案を募る。
<dialog>様々な「ダイアログ」を定義。
(会話文の要素ではない)
ポップアップからオーバーレイ、モーダルダイアログまでカバー。
解像度/ピクセル密度ごとに画像を出し分ける仕組み。
<img srcset> ― WHATWG HTMLの案
<picture> ― Community Groupの提案
<input inputmode>入力モード（仮想キーボードの種類など）を指定。モバイルでは便利。
<label for="zip">郵便番号</label>
<input inputmode="numeric" name="zip" id="zip">Firefox 17でちょっと実装（値が仕様書のと違う）。
2011年：CSS 2.1, セレクタなど勧告。
CSS4 (セレクタ) の登場。
2012年：メディアクエリー勧告。他もいろいろ進む。
CSS3やCSS4の時代になってきた。
グラデーションなどを定義したモジュール。
4月：勧告候補に。
グラデーションはIE10, Firefox 16, Opera 12.50で接頭辞なし！
ただし……
接頭辞つき実装と互換性なし……
/* これまで */
-moz-linear-gradient(top, #fe0, #c00)
/* これから */
linear-gradient(to bottom, #fe0, #c00)角度の解釈も変わった……
0deg0degSassのMixinなどを使う場合は注意。
image() ― フォールバック
object-fit ― アスペクト比を保って拡大縮小
dppx ― デバイスピクセル比
image-set() ― Responsive Images系。Chrome, Safari 6で実装
element() ― 任意の要素を画像にして参照。-moz-elementの標準化。
cross-fade() ― 複数画像をクロスフェードで合成
そろそろ勧告候補に。
いろんなことができる：
元々Mozillaの拡張。WebKitで発展。
CSS WGに持ち込まれ構文が変わる。
IE9はPPで実装するも正式版ではサポートせず。
何度もプロパティ名や値が変わる……
Chrome ― おおよそCRに準拠
Firefox ― CR版を実装中
IE10 ― WD版をサポート
Safari ― Safari 6では無効に
.flex-container {
display: -webkit-flex; /* Chrome */
display: -ms-flexbox; /* IE10 */
display: -webkit-box; /* Safari, etc. */
display: -moz-box; /* Firefox */
}
CSS4のセレクタ。
CSS3セレクタの勧告と同時に発表。
「親セレクタ」など欲しかった機能が！
「親セレクタ」だけどさらに高機能。
/* <a> を子に持つ <li> を選択*/
ul > !li > a {
color: #c00;
}:matches()「このうちどれか」を選択
/* articleかsectionかどっちでもいい */
:matches(article, section) > h1 {
font-size: 220%;
}FirefoxとWebKitで先行実装。
→ :-moz-any(), :-webkit-any()
変数ライクな「カスタムプロパティ」
/* 色を定義 */
:root {
var-myBlue: #09c;
}
/* つかう */
:link {
color: var(myBlue);
}WebKitで実装。Chromeではflag有効で利用可能。
Firefoxも検討中。接頭辞なしで実装したい意向。
CSSOMで値をどう扱うかが検討中。
$fooは？$fooは他の変数ライクな機能を見据えて利用せず。
Sassの@extend的なものを提供する機能もアイデアとして提案済。
雑誌のようなレイアウトを実現。
テキストの流れる「領域」を定義。
columnの強化版みたいな感じ。
丸や矩形の中にテキストを流し込む。
もしくはある場所を「除外」してテキストを配置。
AdobeがCSS WGに提案し、WebKitで実装中。
Chromeでflag有効にすれば利用可能（今はRegionsのみ）。
MicrosoftもIE10でともに実装。
Microsoftが提案しIE10で実装。
かつてMetroとして知られていたレイアウトではかなり便利。
もう少し仕様を練る必要がありと判断され、構文が変わりそう。
サポートの有無、特定URL下などの条件で振り分け。
@supportsプロパティと値のサポートをチェック。
@supports (display: flex) or
(display: -webkit-flex) or
(display: -ms-flexbox) {
/* Flexboxつかうよ */
}
Firefox 17で実装（無効になるかも)
Operaでも実装予定ありとのこと。
拡張の多いWebKitやTridentにこそ欲しい……
@document特定ドメイン下においてスタイルシートを適用。
Mozilla由来 (@-moz-document)。
正規表現なども使えるように。
スクリプトやタッチデバイスの検出もできるように。
-webkit-device-pixel-ratioが標準化されるかは怪しい。
resolution と dppx で。
@media (min-resolution: 2dppx) {
/* Retina */
}matchMedia()メディアクエリーの状態を検出。
var query = '(max-width: 800px)';
var mql = window.matchMedia(query);
mql.addListener(function(mql){
if (mql.matches) { doSomething(); }
});
SVG meets CSS
SVG WGとCSS WGの合同タスクフォース。
SVGとCSSの機能を連携させる。
Transforms, Animationsなどが再編され公開済。
SVGフィルタをCSSでも使えるように。
CSS Shadersがカスタムフィルタとして取り込まれた。
-webkit-maskやMozillaのclip-pathを標準化。
強化された合成やブレンドモード。
元 (Web) DOM Core。
ECMAScriptとの親和性重視。
新しい機能もいくつか。
var eventDetail = { dom: 4 };
var ev = new CustomEvent('anevent',
{ detail: eventDetail }
);
obj.dispatchEvent(ev);
Mutation Eventsに変わって登場。
効率よくDOMの変化を監視。
Element.prepend(), Element.append(), Element.replace() など追加。
DOMのパーズ・シリアライズ関連APIを定義。
innerHTML, insertAdjacentHTML() などHTML5で定義されていたものが移管。
9月6日にLast Call。
イベントによって実装状況に違いあり。
Firefox 17ではWheelEventが実装。
基本的なタッチイベントを定義。 (touchstart, touchmove, etc.)
勧告候補後にAppleが特許開示。7月に「影響しない」と判断。
ジェスチャーイベントなどはなし。
仕様いっぱい。
XMLHttpRequestXHR2が「XHR」として一本化。
クロスオリジン通信（CORS）、フォーム・バイナリ送信などが可能に。
HTML, JSON, ArrayBuffer, Blobも取得可能に。
セレクタから要素を取得するAPI。
find(), findAll()メソッドが提案中。
メソッドチェーンで絞り込める。
Blob.slice() のprefixが外れた (Safari以外)。
Blob() コンストラクタのサポート。BlobBuilder がobsoleteに。
5月にLast Call。
Fx16, IE10でunprefix（なので多分だいたい実装）
WebKitの実装はまだちょっと仕様に沿ってないらしい。
任意の要素をフルスクリーン表示。
/* フルスクリーンに */
elem.requestFullscreen();
/* 解除 */
document.exitFullscreen();
/* スタイルシート */
elem:fullscreen { ... }マウスポインタを固定する。
Element.requestPointerLock() のほかMouseEvent.movementX, movementY を定義。
FPSのゲームなどによさそう。
デバイスの向き（縦か横か）を検知。
portrait-primary, landscape-primary など主にどちら向きかもわかる。
screen.lockOrientation()でロックもできる。
Googleが提案しChromeに実装。
Notification WG設立。
2012年：Appleが参加。Mountain LionのSafariで実装。
Chrome拡張APIとはデザインが違うのでご注意を。
Webアプリ版Intents。Chrome拡張で利用可能。
Webアプリ間だけでなくデバイスとの連携も視野に。
HTMLのプロトコルハンドラとの統合が検討中。
パフォーマンス関連仕様。
グループはRecharter中。
ページ読み込みに関する様々な情報を取得するAPI。
結構前から実装あり（IE9も実装）。もうほぼ勧告。
linkNegotiationStartなど追加。
画像などリソースに関する情報を取得。
/* 画像をロード */
img.onload = measureTiming;
/* 取得 */
function measureTiming () {
var list =
performance.getEntriesByType('resource');
...
}
ユーザーの行動に応じた情報を取得。
/* マーク */
performance.mark('startTask1');
taskOne();
performance.mark('endTask1');
/* 集計 */
var marks =
performance.getEntriesByType('mark');
...バックグラウンドにあるページではアニメーションを停止させたりできる。
document.hidden, visibilitychange など定義。
7月に勧告候補に。
PerformanceEntryを定義。
Resource/User Timingの基盤。
Navigation Timing level 2でも採用。
window.performance.now()を定義。
Date.now()より高精度。monotonic。
パフォーマンス系APIで標準的に使われるようになる。
requestAnimationFrame()のこと。
実装されている。2月にLast Call入り。
HighResTimeを使うように変更。
ハイレベルなAPI。
Chrome, Safari 6で対応。
Firefoxも計画中。
getUserMedia()を定義。
Webカメラなどからデータを取得。
アプリのコンポーネント、ウィジェット開発に。
隠れたDOM。Googleが提案。
WebKitで実装。Chromeでflag有効で利用可能。
デートピッカーはじめUIの実装に使われている。
カスタム要素をAPIつきで定義。
x-fooというかたちで定義。
テンプレートやShadow DOMと組み合わせるとより強力に。
げっそりもします…
でもわくわくもします！
気になったものは調べて共有しよう！