Firefox with HTML+CSS

2,479 views

Published on

Mozilla + HTML5@福岡 勉強会

Published in: Technology, News & Politics
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,479
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Firefox with HTML+CSS

  1. 1. Running Firefoxwith HTML+CSSSlides @ Mozilla & HTML5+by Tomoya ASAI (dynamis) last update on 2011.12.02 see also: http://dynamis.jp/r
  2. 2. http://dynamis.jp/ @dynamitter facebook.com/ dynamismailto: Tomoya ASAI (dynamis) <dynamis@mozilla-japan.org>
  3. 3. Rapid ReleaseRelease every 6 weeks...
  4. 4. http://mozilla.jp/firefox/preview/faq/
  5. 5. http://mozilla.jp/firefox/preview/faq/
  6. 6. http://mozilla.jp/firefox/preview/faq/
  7. 7. http://mozilla.jp/firefox/preview/faq/
  8. 8. ESR Proposalfor Enterprise Users...
  9. 9. https://wiki.mozilla.org/Enterprise/Firefox/ExtendedSupport:Proposal
  10. 10. Firefox in 2011Firefox 5, 6, 7, 8, 9
  11. 11. Firefox 5~ https://developer.mozilla.org/en/CSS/CSS_animations
  12. 12. Firefox 4~ https://developer.mozilla.org/en/CSS/CSS_transitions
  13. 13. #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/
  14. 14. <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>
  15. 15. <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>
  16. 16. Firefox 5~ http://www.w3.org/TR/XMLHttpRequest2/
  17. 17. Firefox 6~ https://developer.mozilla.org/en/HTML/Element/progress
  18. 18. <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>
  19. 19. <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>
  20. 20. Firefox 6~ https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*
  21. 21. .bothline { text-decoration: underline overline; } .wavy { text-decoration: wavy; } Firefox 6~ https://developer.mozilla.org/en/CSS/text-decoration
  22. 22. p.auto { -moz-hyphens: auto;} Firefox 6~ https://developer.mozilla.org/en/CSS/hyphens
  23. 23. @-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
  24. 24. Firefox 7~ https://developer.mozilla.org/en/CSS/text-overflow
  25. 25. Firefox 9~ https://developer.mozilla.org/en/CSS/text-overflow
  26. 26. https://developer.mozilla.org/en/CSS/text-overflow
  27. 27. http://mozilla.jp/blog/entry/7448/Firefox 9~ http://hacks.mozilla.org/2011/11/html5-context-...
  28. 28. <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-...
  29. 29. <!-- beforebegin --><p><!-- afterbegin -->... ...children contents......<!-- beforeend --></p><!-- afterend --> Firefox 9~ https://developer.mozilla.org/en/DOM/Element.insertAdjacentHTML
  30. 30. h1 { font-stretch: extra-expanded }p { font-stretch: condensed } Firefox 9~ https://developer.mozilla.org/en/CSS/font-stretch
  31. 31. Firefox 9~ https://github.com/mozilla/pdf.js
  32. 32. http://r.dynamis.jp/mozhacks

×