Mozilla + HTML5＠福岡 勉強会

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...

10. http://mozilla.jp/firefox/preview/faq/

11. http://mozilla.jp/firefox/preview/faq/

12. http://mozilla.jp/firefox/preview/faq/

13. http://mozilla.jp/firefox/preview/faq/

14. ESR Proposal
for Enterprise Users...

17. https://wiki.mozilla.org/Enterprise/Firefox/ExtendedSupport:Proposal

18. Firefox in 2011
Firefox 5, 6, 7, 8, 9

19. Firefox 5~ https://developer.mozilla.org/en/CSS/CSS_animations

20. Firefox 4~ https://developer.mozilla.org/en/CSS/CSS_transitions

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>

28. Firefox 5~ http://www.w3.org/TR/XMLHttpRequest2/

29. Firefox 6~ https://developer.mozilla.org/en/HTML/Element/progress

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>

32. Firefox 6~ https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*

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

36. Firefox 7~ https://developer.mozilla.org/en/CSS/text-overflow

37. Firefox 9~ https://developer.mozilla.org/en/CSS/text-overflow

38. https://developer.mozilla.org/en/CSS/text-overflow

39. http://mozilla.jp/blog/entry/7448/
Firefox 9~ http://hacks.mozilla.org/2011/11/html5-context-...

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

43. Firefox 9~ https://github.com/mozilla/pdf.js

46. http://r.dynamis.jp/mozhacks