Firefox with HTML+CSS
- 1. Running Firefox with HTML+CSS Slides @ Mozilla & HTML5+ by Tomoya ASAI (dynamis) last update on 2011.12.02 see also: http://dynamis.jp/r
- 3. http://dynamis.jp/ @dynamitter facebook.com/ dynamis mailto: Tomoya ASAI (dynamis) <dynamis@mozilla-japan.org>
- 9. Rapid Release Release every 6 weeks...
- 14. ESR Proposal for Enterprise Users...
- 18. Firefox in 2011 Firefox 5, 6, 7, 8, 9
- 21. #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); } http://hacks.mozilla.org/2010/07/firefox4-beta2/
- 24. <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>
- 26. <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>
- 30. <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>
- 31. <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>
- 33. .bothline { text-decoration: underline overline; } .wavy { text-decoration: wavy; } Firefox 6~ https://developer.mozilla.org/en/CSS/text-decoration
- 34. p.auto { -moz-hyphens: auto; } Firefox 6~ https://developer.mozilla.org/en/CSS/hyphens
- 35. @-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
- 40. <menu type="context" id="supermenu"> <menuitem label="メニュー１" icon="menu1.png" onclick="..."> <menuitem label="メニュー２" 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-...
- 41. <!-- beforebegin --><p><!-- afterbegin -->... ...children contents... ...<!-- beforeend --></p><!-- afterend --> Firefox 9~ https://developer.mozilla.org/en/DOM/Element.insertAdjacentHTML
- 42. h1 { font-stretch: extra-expanded } p { font-stretch: condensed } Firefox 9~ https://developer.mozilla.org/en/CSS/font-stretch