Date post: | 06-May-2015 |
Category: |
Technology |
Upload: | dynamis- |
View: | 2,143 times |
Download: | 4 times |
Running Firefoxwith HTML+CSSSlides @ Mozilla & HTML5+α
by Tomoya ASAI (dynamis)
last update on 2011.12.02see also: http://dynamis.jp/r
Firefox 5 以降の主なHTML & CSS 新機能
JavaScript API 系は言及しません。
about:me
http://dynamis.jp/
@dynamitter
facebook.com/ dynamismailto: Tomoya ASAI (dynamis) <dynamis mozilla-japan.org>@
はじめに。
取りあえず業務連絡です
http://firefoxhacks.org/
…ということです。
発行/オライリー・ジャパン 発売/オーム社 定価(本体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にチャレンジする番です。
Rapid ReleaseRelease every 6 weeks...
http://mozilla.jp/firefox/preview/faq/
http://mozilla.jp/firefox/preview/faq/
高速リリースプロセス 原則 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/
◎ 最新機能・技術をすぐ利用可能◎ Web 技術の発達を促進◎ より広く早いフィードバック◎ リリース日が事前に予期可能× バイナリアドオンの互換性× 一部 Web サイトの互換性
高速リリースの利点と欠点
http://mozilla.jp/firefox/preview/faq/
ESR Proposalfor Enterprise Users...
延長サポートリリース (案) セキュリティ・安定性修正のみ サポート期間は 54 週 = 約1年
検証・導入にそれぞれ 12 週間 Firefox 10 = ESR 10
2012/01/31 から開始 Firefox 17 = ESR 17
https://wiki.mozilla.org/Enterprise/Firefox/ExtendedSupport:Proposal
Firefox in 2011Firefox 5, 6, 7, 8, 9
CSS Animations Transitions を連続する機能
Transitions の拡張として定義 キーフレーム毎のスタイルを指定
CSS だけでアニメーション GPU を用いた高速処理
Firefox 5~ https://developer.mozilla.org/en/CSS/CSS_animations
復習: CSS Transitions スタイル遷移をなめらかに 簡単にアニメーションできる GPU を用いた高速処理
Firefox 4~ https://developer.mozilla.org/en/CSS/CSS_transitions
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);}
CSS Transitions 発動条件 「スタイルの変更」時に発動
変更前の状態が一度描画されている必要がある
ページロード時に遷移するなら onload 後にスタイル指定が必要
left など一部スタイルは変化前にも left: 0px; などの指定が必要
CSS Animationsに話を戻して...
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>
CSS Animations の注意 完了後は元のスタイルに戻る
to スタイルは維持されない 開始前と from, to と完了後のスタイルは一瞬で切り替わる
滑らかに変化して維持するなら: from は既存スタイルと同じに to は完了後スタイルと同じに
滑らかに変化して維持する<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>
CSS Animations 発動条件 -moz-animation 設定するだけ
onload 前でも問題なし 一定時間後にアニメーションしたい場合は animation-delay を使って遅延時間を指定する
XHR onloadend イベント XHR level2 にて定義 XHR 処理終了時のイベント
onload + onabort + onerror
Firefox 5~ http://www.w3.org/TR/XMLHttpRequest2/
<progress> 要素の UI 進捗状況バー
value を指定しないと進捗不明 縦方向も (斜めは Transform...)
進捗不明な <progress> には:indeterminate 疑似クラス
完了済みバーの部分はprogress::-moz-progress-bar
Firefox 6~ https://developer.mozilla.org/en/HTML/Element/progress
<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>
<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>
カスタムデータ属性 HTML5 data-* 属性サポート
任意要素に付加できる element.dataset でアクセス可能 カスタムメタデータに利用可能
Firefox 6~ https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*
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; }
hyphen プロパティ 英単語の音節で折り返し 折り返し位置の明示指定
U+2010 (HYPHEN) - ハード U+00AD (SHY, ­) - ソフト
p.auto { -moz-hyphens: auto;}
Firefox 6~ https://developer.mozilla.org/en/CSS/hyphens
@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
text-overflow: ellipsis テキストがボックス要素に収まらない場合の描画処理 clip - バサッと切り取る ellipsis - "..." で終わる
Firefox 7~ https://developer.mozilla.org/en/CSS/text-overflow
more text-overflow Firefox 9 から高度なサポート
Two Value Syntax (左右両端) Custom String (末尾文字指定)
Firefox 9~ https://developer.mozilla.org/en/CSS/text-overflow
https://developer.mozilla.org/en/CSS/text-overflow
<menu> コンテキストメニュー サイト独自のカスタムメニュー
右クリックメニュー上部に追加 既存のメニューをなくさない
英辞郎 on the Web 採用済み 副作用なく使えるので安心 http://mozilla.jp/blog/entry/7448/
Firefox 9~ http://hacks.mozilla.org/2011/11/html5-context-...
<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-...
insertAdjacentHTML() 兄弟はそのままで挿入可能に
innerHTML() より高速 既存部分を壊さない
挿入箇所を指定する<!-- beforebegin --><p><!-- afterbegin -->...
...children contents......<!-- beforeend --></p><!-- afterend -->
Firefox 9~ https://developer.mozilla.org/en/DOM/Element.insertAdjacentHTML
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 }
c.f. PDF.js ネイティブコードなしで PDF を
Web 技術の結晶状態 DTP 品質の描画に向けて...
font-stretch も PDF で必要な機能だったから実装された
Firefox 9~ https://github.com/mozilla/pdf.js
もっと詳しく... Mozilla Hacks Blog を参照 他にももっと色々書いてます 日本語訳は modest にて http://r.dynamis.jp/mozhacks