firefox with html+css
DESCRIPTION
Mozilla + HTML5@福岡 勉強会TRANSCRIPT
![Page 1: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/1.jpg)
Running Firefoxwith HTML+CSSSlides @ Mozilla & HTML5+α
by Tomoya ASAI (dynamis)
last update on 2011.12.02see also: http://dynamis.jp/r
![Page 2: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/2.jpg)
Firefox 5 以降の主なHTML & CSS 新機能
JavaScript API 系は言及しません。
![Page 3: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/3.jpg)
about:me
http://dynamis.jp/
@dynamitter
facebook.com/ dynamismailto: Tomoya ASAI (dynamis) <dynamis mozilla-japan.org>@
![Page 4: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/4.jpg)
はじめに。
取りあえず業務連絡です
![Page 5: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/5.jpg)
http://firefoxhacks.org/
![Page 6: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/6.jpg)
…ということです。
発行/オライリー・ジャパン 発売/オーム社 定価(本体3,400円+税) オライリー・ジャパンFirefox Hacks Rebooted
ISBN978-4-87311-497-2
Mozilla Japan
推薦書!
Mozilla Japan代表理事 瀧田佐登子
ウェブを使い倒すテクニック満載! ●新しいユーザーインタフェース ●タブグループ ●アプリタブ●Firefox Syncを使ってブラウザ情報の同期を取ろう ●テキスト領域のリサイズ ●Personasで実現する着せ替えブラウザ ●ユーザープロファイルの基本 ●Vimperator ●KeySnail ●VimperatorとKeySnailの設計の違いからくる設計手法 ●Firefox Home ●FirefoxとTwitter ●Facebook関連 ●Add-on SDKとは何か ●Add-on SDKのセットアップ ●拡張機能の開発(基礎編) ●addon-kitライブラリ●api-utilsライブラリ ●拡張機能の開発(応用編) ●拡張機能のローカライズ ●拡張機能の自動テスト●再起動不要な拡張機能「Bootstrapped Extensions」の作り方 ●Bootstrapped Extensionsの制限●
外部スクリプトをBootstrapped Extensionsで読み込む ●FirefoxのUIをBootstrapped Exten-sionsで変更する ●Bootstrapped Extensionsの設定UI ●Bootstrapped ExtensionsでのResource URLの登録 ●Bootstrapped Extensionsと非同期な初期化処理や終了処理 ●XPCOMコンポーネントをBootstrapped Extensionsに組み込む ●Bootstrapped Extensionsでのchrome.manifestの利用 ●Bootstrapped ExtensionsのFirefox 3.6対応 ●e10sにおけるプロセス間通信の基本 ●メッセージマネージャのAPI詳説 ●コンテントスクリプト用のAPI詳説 ●Chromeスクリプトからコンテントスクリプトへ同期的にメッセージを送る ●Bootstrapped Extensionsでコンテントスクリプトを使う ●非同期処理のすすめ ●MozStorageの非同期API ●アドオンマネージャの非同期API●ワーカーによるマルチスレッド処理 ●JSDeferredで非同期処理をスッキリ書く ●Firefoxの非同期処理をDeferred化する ●HTML5再入門 ●ECMAScript5 ●ECMAScript for XML ●E4X 応用●CSS3時代のデザイン ●Webフォント徹底活用 ●テキスト領域のリサイズ ●Canvas入門 ●SVGとSMILによるアニメーション ●新しいアニメーション技術比較 ●コンテンツセキュリティポリシー ●イマドキのセキュリティ機能を活用する ●AndroidでもFirefox ●デバイスセンサーを活用する ●プラグインプロセスの分離 ●js-ctypesとXPConnectの違いを理解する ●js-ctypesの基本的な使い方 ●js-ctypesで自力でメモリを管理する ●Firefox.Future
最新のWeb技術、新世代Add-on SDKはもちろん、FirefoxとWebの未来がこの一冊に集約!日本のMozillaドリームチームが綴ったこの本がバイブルになることは間違いない!次はあなたがHackにチャレンジする番です。
![Page 7: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/7.jpg)
![Page 8: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/8.jpg)
![Page 9: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/9.jpg)
Rapid ReleaseRelease every 6 weeks...
![Page 10: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/10.jpg)
http://mozilla.jp/firefox/preview/faq/
![Page 11: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/11.jpg)
http://mozilla.jp/firefox/preview/faq/
![Page 12: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/12.jpg)
高速リリースプロセス 原則 6 週間毎にリリース
Nightly Aurora Beta Release
Fx 9 08/16 09/27 11/08 12/20Fx10 09/27 11/08 12/20 01/31Fx11 11/08 12/20 01/31 03/13Fx12 12/20 01/31 03/13 04/24Fx13 01/31 03/13 04/24 06/05
http://mozilla.jp/firefox/preview/faq/
![Page 13: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/13.jpg)
◎ 最新機能・技術をすぐ利用可能◎ Web 技術の発達を促進◎ より広く早いフィードバック◎ リリース日が事前に予期可能× バイナリアドオンの互換性× 一部 Web サイトの互換性
高速リリースの利点と欠点
http://mozilla.jp/firefox/preview/faq/
![Page 14: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/14.jpg)
ESR Proposalfor Enterprise Users...
![Page 15: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/15.jpg)
![Page 16: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/16.jpg)
![Page 17: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/17.jpg)
延長サポートリリース (案) セキュリティ・安定性修正のみ サポート期間は 54 週 = 約1年
検証・導入にそれぞれ 12 週間 Firefox 10 = ESR 10
2012/01/31 から開始 Firefox 17 = ESR 17
https://wiki.mozilla.org/Enterprise/Firefox/ExtendedSupport:Proposal
![Page 18: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/18.jpg)
Firefox in 2011Firefox 5, 6, 7, 8, 9
![Page 19: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/19.jpg)
CSS Animations Transitions を連続する機能
Transitions の拡張として定義 キーフレーム毎のスタイルを指定
CSS だけでアニメーション GPU を用いた高速処理
Firefox 5~ https://developer.mozilla.org/en/CSS/CSS_animations
![Page 20: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/20.jpg)
復習: CSS Transitions スタイル遷移をなめらかに 簡単にアニメーションできる GPU を用いた高速処理
Firefox 4~ https://developer.mozilla.org/en/CSS/CSS_transitions
![Page 21: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/21.jpg)
CSS Transitions 使用例
http://hacks.mozilla.org/2010/07/firefox4-beta2/
#somebox { color: black; background-color: yellow; /* すべてのスタイルを2秒かけて変化、開始はなめらかに */ -moz-transition: all 2s ease-in; transition: all 2s ease-in;}#somebox:hover { /* マウスオーバーで配色、サイズ、角度を変化 */ color: white; background-color: red; -moz-transform: rotate(-60deg) scale(1.5); transform: rotate(-60deg) scale(1.5);}
![Page 22: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/22.jpg)
CSS Transitions 発動条件 「スタイルの変更」時に発動
変更前の状態が一度描画されている必要がある
ページロード時に遷移するなら onload 後にスタイル指定が必要
left など一部スタイルは変化前にも left: 0px; などの指定が必要
![Page 23: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/23.jpg)
CSS Animationsに話を戻して...
![Page 24: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/24.jpg)
CSS Animations 使用例<div id="target"></div><style>@-moz-keyframes changecolor { /* アニメーション定義 */ from { } /* 開始する瞬間は既存スタイルのまま */ 50% { background: purple; } /* 半分の時間で紫に */ to { background: orange; } /* 最終的にオレンジに */}#target { background: blue; width: 100px; height: 100px;}#target:hover { -moz-animation: changecolor 4s; /* アニメーション適用 */}</style>
![Page 25: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/25.jpg)
CSS Animations の注意 完了後は元のスタイルに戻る
to スタイルは維持されない 開始前と from, to と完了後のスタイルは一瞬で切り替わる
滑らかに変化して維持するなら: from は既存スタイルと同じに to は完了後スタイルと同じに
![Page 26: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/26.jpg)
滑らかに変化して維持する<div id="target"></div><style>@-moz-keyframes changecolor { from { background: blue; } /* 既存スタイルと同じ */ 50% { background: purple; } to { background: orange; } /* 完了後と同じ */}#target { background: blue; width: 100px; height: 100px;}#target:hover { -moz-animation: changecolor 4s; background: orange; /* to {} と同じ */}</style>
![Page 27: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/27.jpg)
CSS Animations 発動条件 -moz-animation 設定するだけ
onload 前でも問題なし 一定時間後にアニメーションしたい場合は animation-delay を使って遅延時間を指定する
![Page 28: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/28.jpg)
XHR onloadend イベント XHR level2 にて定義 XHR 処理終了時のイベント
onload + onabort + onerror
Firefox 5~ http://www.w3.org/TR/XMLHttpRequest2/
![Page 29: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/29.jpg)
<progress> 要素の UI 進捗状況バー
value を指定しないと進捗不明 縦方向も (斜めは Transform...)
進捗不明な <progress> には:indeterminate 疑似クラス
完了済みバーの部分はprogress::-moz-progress-bar
Firefox 6~ https://developer.mozilla.org/en/HTML/Element/progress
![Page 30: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/30.jpg)
<progress> の基本<progress value="7" max="10">70%</progress><progress max="10">70%</progress><!-- 進捗不明 --><progress value="7" max="10" class="vert">70%</progress><style>.vert { -moz-orient: vertical; /* 縦方向のバーに */}/* 進捗不明 (value がない) 場合の疑似クラス */progress:indeterminate { height: 30px;}</style>
![Page 31: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/31.jpg)
<progress> をカスタマイズ<progress value="3" max="10">70 %</progress><style>/* background or/and border 指定すると非ネイティブ UI */progress { background-color: red; border: 1px solid black;}/* 進捗バーのうち完了している部分 */progress::-moz-progress-bar { background-image: url(progress-background.png);}</style>
![Page 32: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/32.jpg)
カスタムデータ属性 HTML5 data-* 属性サポート
任意要素に付加できる element.dataset でアクセス可能 カスタムメタデータに利用可能
Firefox 6~ https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*
![Page 33: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/33.jpg)
text-decoration の強化 波線 wavy などもサポート
やっと Web でも波線!
text-decoration を設定すると-moz-text-decoration-* は全てリセットされるので注意
Firefox 6~ https://developer.mozilla.org/en/CSS/text-decoration
.bothline { text-decoration: underline overline; }
.wavy { text-decoration: wavy; }
![Page 34: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/34.jpg)
hyphen プロパティ 英単語の音節で折り返し 折り返し位置の明示指定
U+2010 (HYPHEN) - ハード U+00AD (SHY, ­) - ソフト
p.auto { -moz-hyphens: auto;}
Firefox 6~ https://developer.mozilla.org/en/CSS/hyphens
![Page 35: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/35.jpg)
@document regexp() CSS3 Conditional Rules の@document 規則の対応強化
@-moz-document url(http://dynamis.jp/), url-prefix(http://dynamis.jp/foo/), domain(dynamis.jp), regexp("^https:.*"){ /* 指定 URL にマッチしたページ用のルール */ /* regexp() 以外は Firefox 1.5 からサポート */}
Firefox 6~ https://developer.mozilla.org/en/CSS/@-moz-document
![Page 36: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/36.jpg)
text-overflow: ellipsis テキストがボックス要素に収まらない場合の描画処理 clip - バサッと切り取る ellipsis - "..." で終わる
Firefox 7~ https://developer.mozilla.org/en/CSS/text-overflow
![Page 37: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/37.jpg)
more text-overflow Firefox 9 から高度なサポート
Two Value Syntax (左右両端) Custom String (末尾文字指定)
Firefox 9~ https://developer.mozilla.org/en/CSS/text-overflow
![Page 38: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/38.jpg)
https://developer.mozilla.org/en/CSS/text-overflow
![Page 39: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/39.jpg)
<menu> コンテキストメニュー サイト独自のカスタムメニュー
右クリックメニュー上部に追加 既存のメニューをなくさない
英辞郎 on the Web 採用済み 副作用なく使えるので安心 http://mozilla.jp/blog/entry/7448/
Firefox 9~ http://hacks.mozilla.org/2011/11/html5-context-...
![Page 40: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/40.jpg)
<menu> 要素の基本<menu type="context" id="supermenu"> <menuitem label="メニュー1" icon="menu1.png" onclick="..."> <menuitem label="メニュー2" icon="menu2.png" onclick="..."> <menu label="サブメニューあり"> <menuitem label="サブメニュー" onclick="..."> </menu></menu><div contextmenu="supermenu"> <!-- この要素上で右クリックする --></div>
Firefox 9~ http://hacks.mozilla.org/2011/11/html5-context-...
![Page 41: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/41.jpg)
insertAdjacentHTML() 兄弟はそのままで挿入可能に
innerHTML() より高速 既存部分を壊さない
挿入箇所を指定する<!-- beforebegin --><p><!-- afterbegin -->...
...children contents......<!-- beforeend --></p><!-- afterend -->
Firefox 9~ https://developer.mozilla.org/en/DOM/Element.insertAdjacentHTML
![Page 42: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/42.jpg)
font-stretch プロパティ 字間を調整するプロパティ
normal, semi-condensed, condensed,extra-condensed, ultra-condensed,semi-expanded, expanded,extra-expanded, ultra-expanded
Firefox 9~ https://developer.mozilla.org/en/CSS/font-stretch
h1 { font-stretch: extra-expanded }p { font-stretch: condensed }
![Page 43: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/43.jpg)
c.f. PDF.js ネイティブコードなしで PDF を
Web 技術の結晶状態 DTP 品質の描画に向けて...
font-stretch も PDF で必要な機能だったから実装された
Firefox 9~ https://github.com/mozilla/pdf.js
![Page 44: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/44.jpg)
![Page 45: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/45.jpg)
![Page 46: Firefox with HTML+CSS](https://reader033.vdocument.in/reader033/viewer/2022052522/5549a908b4c905fa728b52d1/html5/thumbnails/46.jpg)
もっと詳しく... Mozilla Hacks Blog を参照 他にももっと色々書いてます 日本語訳は modest にて http://r.dynamis.jp/mozhacks