Your SlideShare is downloading. ×
0
CSS.2012  ~Latest & Coming CSS Features~Slides @ CSS Nite in Osaka vol.31 on 2012/06/29           by Tomoya ASAI (dynamis)...
about:
about:dynamis                   Mozilla Japan               http://dynamis.jp                @dynamitter            facebo...
about:slides           下線なしリンクも使います           コードは要点だけの簡略版               特に注意が必要なとき以外は               -moz- 以外の接頭辞など割愛   画像...
Web Standards
Multi           Media      Mouse,  HTML5               Key ev.  Forms            W3C                            OfflineHTML5...
Canvas                                 Web         WHATWG                 Messag-                                  ing    ...
Canvas                                 Web         WHATWG                 Messag-                                  ing    ...
Khronos              SMIL              Vibra-                                                   tion                 WebGL...
Khronos              SMIL              Vibra-                  MP3  WebCL                                                 ...
Khronos              SMIL              Vibra-                  MP3  WebCL                                                 ...
今日はここの話です                 Media     Layout     Queries    Trans          CSS3~            Flex                           B...
CSS.2012
マルチデバイス対応      &DTP レベルのデザイン
Responsive
Media Queries           デバイスに応じたスタイル             画面サイズ、解像度、縦横...         https://developer.mozilla.org/en/CSS/Media_queries
画面サイズ別 CSS を書く<style>/*	 @media	 規則で画面サイズ別ルールを記述	 */@media	 only	 screen	 and	 (min-width:	 481px)	 {	 	 #header	 {	 backg...
Responsive Web Design             ピクセル単位で調整しない               Web はピクセル指向ではない             画面サイズに応じて適切に     http://www.alist...
http://www.alistapart.com/articles/responsive-web-design/
背景画像も                                     左右切り取り横幅に応じてサイズを変更  http://www.alistapart.com/articles/responsive-web-design/
http://colly.com/link_to_the_document
横幅に応じて要素数を増減         http://colly.com/   link_to_the_document
<meta> viewport              拡大率制御には viewport                ユーザのズーム禁止も可能              表示領域の CSS ピクセル幅                iPho...
viewport を指定する<!--	 デバイスの画面幅で等倍表示	 --><meta	 name="viewport"	 	 	 	 	 	 content="device-width,	 initial-scale=1.0"><!--	 幅...
Retina?
高解像度ディスプレイ対応    見なかったことに!(・・).     それが一番楽ですよね。             link_to_the_document
高解像度ディスプレイ対応    高解像度版だけを使う     ファイルサイズが…    解像度別の画像を用意     手間が掛かります…    CSS, SVG, WebFont に     可能ならこれがベスト?               ...
解像度別の画像を用意    Device Pixel Rate     CSS または JS で条件分岐    srcset 属性    image-set() 関数     Gecko で対応するか未定    サーバサイドで自動変換
Device Pixel Rate                          CSS の論理ピクセルと端末                          画面のピクセル比                            iPh...
Device Pixel Rateheader	 {	 /*	 通常サイズの画像	 */	 	 background:	 url(head.png);}/*	 "only"	 で媒体型のみ対応する古いブラウザ除外	 *//*	 min/max	...
JS では matchMedia()var	 q	 =	 "(min--moz-device-pixel-ratio:	 1.5),	 	 	 	 	 	 	 	 	 (-webkit-min-device-pixel-ratio:	 1.5)...
srcset 属性<!--	 高解像度ディスプレイには別画像を使う	 --><img	 src="fire.png"	 srcset="fire-2x.png	 1.5x"><!--	 更に細かく画像を分けるのも比較的容易	 --><img	 ...
CSS, SVG, WebFonts に         グラデーション、影付き、         角丸などは CSS で実現          ボタン程度は CSS で十分         SVG 画像に置き換える         WebFo...
Text
Web Fonts            ダウンロードフォント            IE9 なども WOFF サポート            iPhone は WOFF 未サポート            WOFF: Web用圧縮フォント   ...
Web Fonts の使い方@font-face	 {	 	 /*	 IE8	 以前用	 EOT	 フォント設定	 (最初に)	 */	 	 font-family:	 Sawarabi;	 	 src:	 url(Sawarabi.eot)	...
Web Fonts の使い方@font-face	 {	 	 font-family:	 Lisa;	 	 src:	 url(Lisa.eot);	 	 src:	 url(Lisa.eot?#iefix)	 /*	 IEバグ対応Hack	 ...
WOFF フォントに変換     WOFF コンバータ      Windows, Mac アプリ     @font-face kit generator      Web サービス (サイズ制限あり)                   h...
サブセットフォントを作る    必要文字だけで軽量化    サブセットフォントメーカー     Windows, Mac アプリ    @font-face kit generator     Expert モードの Subsetting で ...
デコもじ       日本初の WebFont サービス       http://decomoji.jp/        字游工房のフォントもある!       JavaScript 埋め込み型        個人 ¥315/月∼      ...
webfonts.fonts.com          多言語 WebFont サービス          http://webfonts.fonts.com/           10,000 以上のフォント           日本語フォン...
Google Web Font API         フォントは約 500 種類          開始当初は 18 しかなかった         日本語フォントなし          メニューなど限られた用途で         サブセットも...
Web Font API の使い方<html><head>	 	 <link	 rel="stylesheet"	 type="text/css"	 	 	 href="http://fonts.googleapis.com/css?famil...
ファイルサイズを小さくサブセットフォントをカテゴリーで指定 http://fonts.googleapis.com/css? family=Philosopher& subset=latin使用する文字列を指定して最小限のフォントを取得 htt...
http://webfont.fontplus.jp/
Font+        日本語フォント 500 以上!        フォントワークス、モリサワ、        イワタ、モトヤ ...        サブセットの事前 DL 可能        あるいは JS 埋め込み        ¥10...
Font Control Features               CSS3 font-variant               フォントの詳細機能を制御                 分数、桁          え、合字、旧字体......
http://hacks.mozilla.org/2009/10/font-control-for-designers/
http://hacks.mozilla.org/2009/10/font-control-for-designers/
text-decoration           破線や波線などにも対応              もはや Keynote より高機能…           text-decoration 設定すると           -moz-text-...
text-decoration/*	 複数同時指定も可能	 */.bothline	 {	 	 text-decoration:	 underline	 overline;}/*	 Firefox	 は	 wavy	 などにも対応	 */.wa...
hyphen          英単語の音節で折り返し          折り返し位置の明示指定            U+2010 (HYPHEN) - ハード            U+00AD (SHY, &shy;) - ソフト    ...
text-overflow         Fx7 で ellipsis (...) に対応         Fx9 でサポートを強化           左右両端指定の 2 値構文           省略時の末端文字を指定         h...
https://developer.mozilla.org/en/CSS/text-overflow
font-stretch             字間のつまり具合を調整               normal, condensed, expanded,               semi-condensed, semi-expande...
c.f. PDF.js              プラグインフリー PDF              Web 技術の結晶状態              DTP 品質の描画を...              font-stretch も PDF ...
http://firefoxhacks.org/sample.html
text-align-last           最終行だけ行                     え変更              Fx12 からサポート              justify だと最後の行がスカスカ        ...
text-size-adjust           スマートフォン向けの文字           サイズ変更を許可・不許可              Fx11 からサポート              意図せず拡大されてしまっている      ...
Box
border-image 仕様更新       border-image = shorthand        *-source, *-slice, *-repeat に加え        *-width, *-image-outset にも対...
border-image 仕様更新//	 ボーダー画像の中央部分も使用する場合-moz-border-image:	 url(my-border.png)	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 30	 3...
border-image 仕様更新//	 これまでの記述-moz-border-image:	 	 	 	 url(my-border.png)	 30	 30	 30	 30	 /	 2em	 	 	 	 	 	 	 	 	 	 	 	 	 ...
background-repeat - 2値構文            X, Y 方向別に設定可能に              Fx13 からサポート              repeat = repeat repeat           ...
background-position - 4値構文            左上以外の角から位置指定     https://developer.mozilla.org/en/CSS/background-position
Transform
CSS Transform           任意の要素を変形させる             拡大縮小、回転、移動、歪み             IE8 は Matrix Transform           skew は Fx14 で廃止...
CSS Transform 使用例<iframe	 id="skewframe"	 width="800"	 height="600"	 	 	 	 	 	 	 src="http://mozilla.jp/"></iframe><style>...
turn (角度の単位)       Transform などの値で使用       当面は deg とかが無難        turn は Fx13 からサポート          https://developer.mozilla.org/...
3D Transform              3次元版                Fx10 からサポート                rotateZ や translateZ を使う                視点は persp...
3D Transform の注意        Firefox は最新仕様に厳格         perspective など単位が必須         iphone 3.0 は逆に単位なし         WebKit だけ…って時は単位確認...
今回に合わせて Firefox にも対応! http://pr.fontplus.jp/sample/02/
Animation
CSS Transitions            スタイル遷移をなめらかに            簡単にアニメーション            GPU を用いた高速処理               今日は詳細割愛します        http...
CSS Transitions 使用例#somebox {  color: black; background-color: yellow;  /* すべてのスタイルを2秒かけて変化、開始はなめらかに */  -moz-transition: ...
CSS Transitions 発動条件        「スタイル変更」時に発動         変更前の状態が一度描画されて         いる必要がある         ページロード時に遷移するなら         onload 後にスタ...
CSS Animations           Transitions を連続する機能             キーフレーム毎のスタイルを指定           CSS だけでアニメーション           GPU を用いた高速処理  ...
CSS Animations 使用例<div	 id="target"></div><style>@-moz-keyframes	 changecolor	 {	 /*	 アニメーション定義	 */	 	 from	 {	 	 }	 /*	 開...
CSS Animations の注意        完了後は元のスタイルに戻る         to スタイルは維持されない        開始前と from, to と完了後の        スタイルは一瞬で切り替わる        滑らかに...
滑らかに変化して維持する<div	 id="target"></div><style>@-moz-keyframes	 changecolor	 {	 	 from	 {	 background:	 blue;	 }	 	 	 /*	 既存スタ...
CSS Animations 発動条件        -moz-animation を設定         onload 前でも問題なし        一定時間後に発動したい場        合は animation-delay を使っ    ...
Layout
多段レイアウト(column-fill)       雑誌や新聞などの多段組        column-fill: auto ¦ balance        https://developer.mozilla.org/en/CSS/column...
https://bug695222.bugzilla.mozilla.org/attachment.cgi?id=578376
Flexbox Layout 仕様変更        残りを X:Y で分割など         XUL 由来のレイアウト機能         古い仕様は Fx2 からサポート         複数回仕様変更されててカオス        互換対...
-vendor-prefix
ベンダー接頭辞サポート終了      接頭辞なしを使いましょう:        border-radius* @Fx13        box-shadow @Fx13      その他も今後のため接頭辞      なしを併記する習慣を    ...
other...
CSS3 calc()          サイズを計算式で指定可能              width: -moz-calc(20% + 1rem)          -moz- prefix に注意              IE9 はいきな...
CSS3 calc()/*	 margin	 分を考慮した左右の分割を行う例	 */#main	 {	 	 	 	 width:	 75%;	 	 	 	 margin-right:	 1rem;}#side	 {	 	 	 	 width:	...
@document regexp()                     CSS3 Conditional Rules の                     @document 規則の対応強化@-moz-document url(ht...
@規則の入れ子利用      @media や @document 内で      も @規則が利用可能に        Fx11 から入れ子サポート    https://bugzilla.mozilla.org/show_bug.cgi?i...
新機能や互換性情報はMozilla Developer Street:      dev.mozilla.jp
CSS.2012
Upcoming SlideShare
Loading in...5
×

CSS.2012

5,955

Published on

CSS Nite in Osaka vol.31 で使用したスライド(に若干加筆したもの)

Published in: Technology, Design
0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,955
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
49
Comments
0
Likes
27
Embeds 0
No embeds

No notes for slide

Transcript of "CSS.2012"

  1. 1. CSS.2012 ~Latest & Coming CSS Features~Slides @ CSS Nite in Osaka vol.31 on 2012/06/29 by Tomoya ASAI (dynamis) Last Update: 2012/07/05
  2. 2. about:
  3. 3. about:dynamis Mozilla Japan http://dynamis.jp @dynamitter facebook.com/ dynamis レッサーパンダが好き。 mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  4. 4. about:slides 下線なしリンクも使います コードは要点だけの簡略版 特に注意が必要なとき以外は -moz- 以外の接頭辞など割愛 画像からも時々 右下には補足や リンクしてます 一次情報源 URL mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  5. 5. Web Standards
  6. 6. Multi Media Mouse, HTML5 Key ev. Forms W3C OfflineHTML5 HTML5 SupportParser WAI- XHTML5 ARIA Semantic Elements
  7. 7. Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- OfflineHTML5 HTML5 Support Sent ev.Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Workers Micro- HTML Data
  8. 8. Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- OfflineHTML5 HTML5 Support Sent ev.Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Media Workers Layout Queries Micro- HTML Data Trans CSS3~ Flex Box form Anim Regions ation
  9. 9. Khronos SMIL Vibra- tion WebGL Geo- SVG other location Orien- tation Canvas WHATWG Web IETF Messag- ing Web Multi SPDY Web Sockets DNT Media Mouse, Sockets HTML5 Key ev. XHR2 FileAPI CSP Forms W3C Server- Offline ECMAHTML5 HTML5 Support Sent ev. ECMA ScriptParser Indexed Web WAI- DB XHTML5 Storage ARIA Semantic Elements Web Media Workers Layout Queries Micro- HTML Data Trans CSS3~ Flex Box OGP XPath form RSS Anim Math Regions ation ML WOFF DOM4
  10. 10. Khronos SMIL Vibra- MP3 WebCL Webm Opus tion WebGL Geo- SVG H.264 other location Orien- Web Audio Notifi- tation Web Canvas cation WHATWG Web IETF RTC Messag- ing Web TCP Tel Multi SPDY Web Sockets DNT Socket Media Mouse, Sockets HTML5 Key ev. XHR2 Radio FileAPI CSP Forms Net W3C Server- Info Offline ECMAHTML5 HTML5 Support Sent ev. ECMA Script ECMA NFCParser 6th Indexed Web Device WAI- DB Storage Storage XHTML5 ARIA Semantic Web Elements Web SQL Media USB Workers Layout Queries File Micro- Sys HTML Data Trans CSS3~ Flex Battery Status Box OGP XPath form Proxi- Anim mitySchema RSS Math Regions .org ation ML WOFF RDF DOM4
  11. 11. Khronos SMIL Vibra- MP3 WebCL Webm Opus tion WebGL Geo- SVG H.264 other location Orien- Web Audio Notifi- tation Web Canvas cation WHATWG Web IETF RTC Messag- ing Web TCP Tel Multi SPDY Web Sockets DNT Socket Media Mouse, Sockets HTML5 Key ev. XHR2 Radio FileAPI CSP Forms Net W3C Server- Info Offline ECMAHTML5 HTML5 Support Sent ev. ECMA Script ECMA NFCParser 6th Indexed Web Device WAI- DB Storage Storage XHTML5 ARIA Semantic Web Elements Web SQL Media USB Workers Layout Queries File Micro- Sys HTML Data Trans CSS3~ Flex Battery Status Box OGP XPath form Proxi- Anim mitySchema RSS Math Regions .org ation ML WOFF RDF DOM4
  12. 12. 今日はここの話です Media Layout Queries Trans CSS3~ Flex Box form Anim Regions ation
  13. 13. CSS.2012
  14. 14. マルチデバイス対応 &DTP レベルのデザイン
  15. 15. Responsive
  16. 16. Media Queries デバイスに応じたスタイル 画面サイズ、解像度、縦横... https://developer.mozilla.org/en/CSS/Media_queries
  17. 17. 画面サイズ別 CSS を書く<style>/* @media 規則で画面サイズ別ルールを記述 */@media only screen and (min-width: 481px) { #header { backgournd: url(head.png); /* 大きい画像 */ }}@media only screen and (max-width: 480px) { #header { backgournd: url(head-small.png); /* 小さい画像 */ }}</style><!-- 外部ファイルで分けるときは media 属性 --><link rel="stylesheet" type="text/css" href="pc.css" media="only screen and (min-width:481px)"><link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width:480px)"> cm など物理サイズは iPhone などで正しくないので注意
  18. 18. Responsive Web Design ピクセル単位で調整しない Web はピクセル指向ではない 画面サイズに応じて適切に http://www.alistapart.com/articles/responsive-web-design/
  19. 19. http://www.alistapart.com/articles/responsive-web-design/
  20. 20. 背景画像も 左右切り取り横幅に応じてサイズを変更 http://www.alistapart.com/articles/responsive-web-design/
  21. 21. http://colly.com/link_to_the_document
  22. 22. 横幅に応じて要素数を増減 http://colly.com/ link_to_the_document
  23. 23. <meta> viewport 拡大率制御には viewport ユーザのズーム禁止も可能 表示領域の CSS ピクセル幅 iPhone はデフォルト 980px Firefox for Mobile は 800px https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
  24. 24. viewport を指定する<!-- デバイスの画面幅で等倍表示 --><meta name="viewport" content="device-width, initial-scale=1.0"><!-- 幅 500px の領域に描いて等倍表示 --><meta name="viewport" content="width=500, initial-scale=1.0"/><!-- デバイスの画面幅で等倍固定表示 --><meta name="viewport" content="width=device-width, user-scalable=no"> https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
  25. 25. Retina?
  26. 26. 高解像度ディスプレイ対応 見なかったことに!(・・). それが一番楽ですよね。 link_to_the_document
  27. 27. 高解像度ディスプレイ対応 高解像度版だけを使う ファイルサイズが… 解像度別の画像を用意 手間が掛かります… CSS, SVG, WebFont に 可能ならこれがベスト? link_to_the_document
  28. 28. 解像度別の画像を用意 Device Pixel Rate CSS または JS で条件分岐 srcset 属性 image-set() 関数 Gecko で対応するか未定 サーバサイドで自動変換
  29. 29. Device Pixel Rate CSS の論理ピクセルと端末 画面のピクセル比 iPhone 4 以降の高解像度端末 では 1:1.5 や 1:2 の端末が多い 高解像度画像や SVG などを 使わないとぼやけてしまうhttps://developer.mozilla.org/en/CSS/Media_queries/#-moz-device-pixel-ratio
  30. 30. Device Pixel Rateheader { /* 通常サイズの画像 */ background: url(head.png);}/* "only" で媒体型のみ対応する古いブラウザ除外 *//* min/max と -moz-/-webkit- の順に注意 */@mediaonly screen and (min--moz-device-pixel-ratio: 1.5),only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) { header { /* 2倍解像度画像 */ background: url(head-2x.png); }} 注: 古い WebKit は使わない画像も両方 DL するバグあり
  31. 31. JS では matchMedia()var q = "(min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)";if (window.matchMedia(q).matches) { // 高解像度時の処理  } else {   // 低解像度時の処理}   https://developer.mozilla.org/ja/DOM/window.matchMedia
  32. 32. srcset 属性<!-- 高解像度ディスプレイには別画像を使う --><img src="fire.png" srcset="fire-2x.png 1.5x"><!-- 更に細かく画像を分けるのも比較的容易 --><img src="fox.png" srcset="fox-1.5x.png 1.5x, fox-2x.png 2x">
  33. 33. CSS, SVG, WebFonts に グラデーション、影付き、 角丸などは CSS で実現 ボタン程度は CSS で十分 SVG 画像に置き換える WebFonts を使う ... などサイズ非依存に
  34. 34. Text
  35. 35. Web Fonts ダウンロードフォント IE9 なども WOFF サポート iPhone は WOFF 未サポート WOFF: Web用圧縮フォント フォントサービスも充実 やっと時代が変わりましたね… https://developer.mozilla.org/ja/CSS/@font-face
  36. 36. Web Fonts の使い方@font-face { /* IE8 以前用 EOT フォント設定 (最初に) */ font-family: Sawarabi; src: url(Sawarabi.eot) /* IE8 以前 format() 非対応 */;}@font-face { /* WOFF 非対応ブラウザ向けフォント設定 */ font-family: Sawarabi; src: url(Sawarabi.otf) format("opentype");}@font-face { /* WOFF 対応ブラウザには WOFF を */ font-family: Sawarabi; src: url(Sawarabi.woff) format("woff");}body { font-family: Sawarabi, sans-serif; } http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  37. 37. Web Fonts の使い方@font-face { font-family: Lisa; src: url(Lisa.eot); src: url(Lisa.eot?#iefix) /* IEバグ対応Hack */ format(embedded-opentype), url(Lisa.woff) format(woff), url(Lisa.ttf) format(truetype), url(Lisa.svg) format(svg);}body { font-family: Lisa, sans-serif;} http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
  38. 38. WOFF フォントに変換 WOFF コンバータ Windows, Mac アプリ @font-face kit generator Web サービス (サイズ制限あり) http://musashi.or.tv/woffconv.htm http://www.fontsquirrel.com/fontface/generator
  39. 39. サブセットフォントを作る 必要文字だけで軽量化 サブセットフォントメーカー Windows, Mac アプリ @font-face kit generator Expert モードの Subsetting で Custom Subsetting を指定する http://musashi.or.tv/subsetfontmk.htm http://www.fontsquirrel.com/fontface/generator
  40. 40. デコもじ 日本初の WebFont サービス http://decomoji.jp/ 字游工房のフォントもある! JavaScript 埋め込み型 個人 ¥315/月∼ 法人 ¥1575/月∼ http://decomoji.jp/
  41. 41. webfonts.fonts.com 多言語 WebFont サービス http://webfonts.fonts.com/ 10,000 以上のフォント 日本語フォントも 100 以上 JavaScript 埋め込み型 25,000 view/30days まで無料 http://webfonts.fonts.com/
  42. 42. Google Web Font API フォントは約 500 種類 開始当初は 18 しかなかった 日本語フォントなし メニューなど限られた用途で サブセットも指定可能 ファイルサイズを最小限に https://developers.google.com/webfonts/
  43. 43. Web Font API の使い方<html><head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> <style> body { font-family: Tangerine, serif; } </style></head><body> <h1>Firefox Developer Conference 2011 in Osaka!</h1></body></html> http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html
  44. 44. ファイルサイズを小さくサブセットフォントをカテゴリーで指定 http://fonts.googleapis.com/css? family=Philosopher& subset=latin使用する文字列を指定して最小限のフォントを取得 http://fonts.googleapis.com/css? family=Inconsolata& text=Hello http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html
  45. 45. http://webfont.fontplus.jp/
  46. 46. Font+ 日本語フォント 500 以上! フォントワークス、モリサワ、 イワタ、モトヤ ... サブセットの事前 DL 可能 あるいは JS 埋め込み ¥1050/月∼ http://webfont.fontplus.jp/
  47. 47. Font Control Features CSS3 font-variant フォントの詳細機能を制御 分数、桁 え、合字、旧字体... 仕様執筆者自身が実装 詳細: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
  48. 48. http://hacks.mozilla.org/2009/10/font-control-for-designers/
  49. 49. http://hacks.mozilla.org/2009/10/font-control-for-designers/
  50. 50. text-decoration 破線や波線などにも対応 もはや Keynote より高機能… text-decoration 設定すると -moz-text-decoration-* は リセットされるので注意 https://developer.mozilla.org/en/CSS/text-decoration
  51. 51. text-decoration/* 複数同時指定も可能 */.bothline { text-decoration: underline overline;}/* Firefox は wavy などにも対応 */.wavyredline { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red;} https://developer.mozilla.org/en/CSS/text-decoration
  52. 52. hyphen 英単語の音節で折り返し 折り返し位置の明示指定 U+2010 (HYPHEN) - ハード U+00AD (SHY, &shy;) - ソフト p.auto { -moz-hyphens: auto; } https://developer.mozilla.org/en/CSS/hyphens
  53. 53. text-overflow Fx7 で ellipsis (...) に対応 Fx9 でサポートを強化 左右両端指定の 2 値構文 省略時の末端文字を指定 https://developer.mozilla.org/en/CSS/text-overflow
  54. 54. https://developer.mozilla.org/en/CSS/text-overflow
  55. 55. font-stretch 字間のつまり具合を調整 normal, condensed, expanded, semi-condensed, semi-expanded ... h1 { font-stretch: extra-expanded } p { font-stretch: condensed } https://developer.mozilla.org/en/CSS/font-stretch
  56. 56. c.f. PDF.js プラグインフリー PDF Web 技術の結晶状態 DTP 品質の描画を... font-stretch も PDF で必要な機 能だったから実装された https://github.com/mozilla/pdf.js
  57. 57. http://firefoxhacks.org/sample.html
  58. 58. text-align-last 最終行だけ行 え変更 Fx12 からサポート justify だと最後の行がスカスカ になるケースなどに便利 https://developer.mozilla.org/en/CSS/text-align-last
  59. 59. text-size-adjust スマートフォン向けの文字 サイズ変更を許可・不許可 Fx11 からサポート 意図せず拡大されてしまっている 場合などに none 指定すると良い https://developer.mozilla.org/en/CSS/text-size-adjust
  60. 60. Box
  61. 61. border-image 仕様更新 border-image = shorthand *-source, *-slice, *-repeat に加え *-width, *-image-outset にも対応 デフォルトで中央省略に 中央にも画像がいるなら fill border width 上書き不能に / 使ってたスタイルは無効に http://dbaron.org/log/20120612-border-image
  62. 62. border-image 仕様更新// ボーダー画像の中央部分も使用する場合-moz-border-image: url(my-border.png) 30 30 30 30 stretch stretch;-webkit-border-image: url(my-border.png) 30 30 30 30 stretch stretch;-o-border-image: url(my-border.png) 30 30 30 30 stretch stretch;// 最新仕様では fill 指定しないと中央不使用border-image: url(my-border.png) 30 30 30 30 fill stretch stretch; http://dbaron.org/log/20120612-border-image
  63. 63. border-image 仕様更新// これまでの記述-moz-border-image: url(my-border.png) 30 30 30 30 / 2em stretch stretch;-webkit-border-image: url(my-border.png) 30 30 30 30 / 2em stretch stretch;border-image: url(my-border.png) 30 30 30 30 / 2em stretch stretch;// 仕様変更に合わせた記述border: 2em solid transparent; // Fallback は別途書くように-moz-border-image: url(my-border.png) 30 30 30 30 stretch stretch;-webkit-border-image: url(my-border.png) 30 30 30 30 stretch stretch;border-image: url(my-border.png) 30 30 30 30 stretch stretch; http://dbaron.org/log/20120612-border-image
  64. 64. background-repeat - 2値構文 X, Y 方向別に設定可能に Fx13 からサポート repeat = repeat repeat repeat-x = repeat no-repeat repeat-y = no-repeat repeat 1値構文で定義されていない組み 合わせ repeat round なども可能 https://developer.mozilla.org/en/CSS/background-repeat
  65. 65. background-position - 4値構文 左上以外の角から位置指定 https://developer.mozilla.org/en/CSS/background-position
  66. 66. Transform
  67. 67. CSS Transform 任意の要素を変形させる 拡大縮小、回転、移動、歪み IE8 は Matrix Transform skew は Fx14 で廃止 skewX と skewY を使うこと https://developer.mozilla.org/en/CSS/-moz-transform
  68. 68. CSS Transform 使用例<iframe id="skewframe" width="800" height="600" src="http://mozilla.jp/"></iframe><style>#skewframe { /* 右に 150px 移動、左下原点で 10°歪める*/ -moz-transform: skewx(10deg) translatex(150px); -moz-transform-origin: bottom left;}</style> https://developer.mozilla.org/En/CSS/Using_CSS_transforms
  69. 69. turn (角度の単位) Transform などの値で使用 当面は deg とかが無難 turn は Fx13 からサポート https://developer.mozilla.org/en/CSS/angle
  70. 70. 3D Transform 3次元版 Fx10 からサポート rotateZ や translateZ を使う 視点は perspective などで指定 https://developer.mozilla.org/en/CSS/Using_CSS_transforms
  71. 71. 3D Transform の注意 Firefox は最新仕様に厳格 perspective など単位が必須 iphone 3.0 は逆に単位なし WebKit だけ…って時は単位確認 https://developer.mozilla.org/en/CSS/perspective
  72. 72. 今回に合わせて Firefox にも対応! http://pr.fontplus.jp/sample/02/
  73. 73. Animation
  74. 74. CSS Transitions スタイル遷移をなめらかに 簡単にアニメーション GPU を用いた高速処理 今日は詳細割愛します http://24ways.org/2009/going-nuts-with-css-transitions
  75. 75. CSS Transitions 使用例#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/
  76. 76. CSS Transitions 発動条件 「スタイル変更」時に発動 変更前の状態が一度描画されて いる必要がある ページロード時に遷移するなら onload 後にスタイル指定が必要 left など一部スタイルは変化前に も left: 0px; などの指定が必要
  77. 77. CSS Animations Transitions を連続する機能 キーフレーム毎のスタイルを指定 CSS だけでアニメーション GPU を用いた高速処理 https://developer.mozilla.org/en/CSS/CSS_animations
  78. 78. 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> https://developer.mozilla.org/en/CSS/CSS_animations
  79. 79. CSS Animations の注意 完了後は元のスタイルに戻る to スタイルは維持されない 開始前と from, to と完了後の スタイルは一瞬で切り替わる 滑らかに変化して維持: from は既存スタイルと同じに to は完了後スタイルと同じに
  80. 80. 滑らかに変化して維持する<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>
  81. 81. CSS Animations 発動条件 -moz-animation を設定 onload 前でも問題なし 一定時間後に発動したい場 合は animation-delay を使っ て遅延時間を指定する
  82. 82. Layout
  83. 83. 多段レイアウト(column-fill) 雑誌や新聞などの多段組 column-fill: auto ¦ balance https://developer.mozilla.org/en/CSS/column-fill
  84. 84. https://bug695222.bugzilla.mozilla.org/attachment.cgi?id=578376
  85. 85. Flexbox Layout 仕様変更 残りを X:Y で分割など XUL 由来のレイアウト機能 古い仕様は Fx2 からサポート 複数回仕様変更されててカオス 互換対応複雑になるので 今回割愛...
  86. 86. -vendor-prefix
  87. 87. ベンダー接頭辞サポート終了 接頭辞なしを使いましょう: border-radius* @Fx13 box-shadow @Fx13 その他も今後のため接頭辞 なしを併記する習慣を https://bugzilla.mozilla.org/show_bug.cgi?id=693510
  88. 88. other...
  89. 89. CSS3 calc() サイズを計算式で指定可能 width: -moz-calc(20% + 1rem) -moz- prefix に注意 IE9 はいきなり no prefix 実装 https://developer.mozilla.org/en/CSS/-moz-calc
  90. 90. CSS3 calc()/* margin 分を考慮した左右の分割を行う例 */#main { width: 75%; margin-right: 1rem;}#side { width: -moz-calc(25% - 1rem); width: calc(25% - 1rem); /* prefix なし忘れずに */}/* rem はルート要素に対する font-size (Fx3.6~) */ http://hacks.mozilla.org/2010/06/css3-calc/
  91. 91. @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() は Fx6~ 他は Fx1.5 からサポート */} https://developer.mozilla.org/en/CSS/@-moz-document
  92. 92. @規則の入れ子利用 @media や @document 内で も @規則が利用可能に Fx11 から入れ子サポート https://bugzilla.mozilla.org/show_bug.cgi?id=511909
  93. 93. 新機能や互換性情報はMozilla Developer Street: dev.mozilla.jp
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×