dynamis , profile picture
Uploaded bydynamis
PDF, PPTX4,469 views

CSS.2012

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

Embed presentation

Download as PDF, PPTX
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
about:
about:dynamis Mozilla Japan http://dynamis.jp @dynamitter facebook.com/ dynamis レッサーパンダが好き。 mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
about:slides 下線なしリンクも使います コードは要点だけの簡略版 特に注意が必要なとき以外は -moz- 以外の接頭辞など割愛 画像からも時々 右下には補足や リンクしてます 一次情報源 URL mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
Web Standards
Multi Media Mouse, HTML5 Key ev. Forms W3C Offline HTML5 HTML5 Support Parser WAI- XHTML5 ARIA Semantic Elements
Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- Offline HTML5 HTML5 Support Sent ev. Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Workers Micro- HTML Data
Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- Offline HTML5 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
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 ECMA HTML5 HTML5 Support Sent ev. ECMA Script Parser 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
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 ECMA HTML5 HTML5 Support Sent ev. ECMA Script ECMA NFC Parser 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 mity Schema RSS Math Regions .org ation ML WOFF RDF DOM4
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 ECMA HTML5 HTML5 Support Sent ev. ECMA Script ECMA NFC Parser 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 mity Schema RSS Math Regions .org ation ML WOFF RDF DOM4
今日はここの話です Media Layout Queries Trans CSS3~ Flex Box form Anim Regions ation
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 { 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 などで正しくないので注意
Responsive Web Design ピクセル単位で調整しない Web はピクセル指向ではない 画面サイズに応じて適切に http://www.alistapart.com/articles/responsive-web-design/
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 ピクセル幅 iPhone はデフォルト 980px Firefox for Mobile は 800px https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
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
Retina?
高解像度ディスプレイ対応 見なかったことに！(・・). それが一番楽ですよね。 link_to_the_document
高解像度ディスプレイ対応 高解像度版だけを使う ファイルサイズが… 解像度別の画像を用意 手間が掛かります… CSS, SVG, WebFont に 可能ならこれがベスト？ link_to_the_document
解像度別の画像を用意 Device Pixel Rate CSS または JS で条件分岐 srcset 属性 image-set() 関数 Gecko で対応するか未定 サーバサイドで自動変換
Device Pixel Rate CSS の論理ピクセルと端末 画面のピクセル比 iPhone 4 以降の高解像度端末 では 1:1.5 や 1:2 の端末が多い 高解像度画像や SVG などを 使わないとぼやけてしまう https://developer.mozilla.org/en/CSS/Media_queries/#-moz-device-pixel-ratio
Device Pixel Rate header { /* 通常サイズの画像 */ background: url(head.png); } /* "only" で媒体型のみ対応する古いブラウザ除外 */ /* min/max と -moz-/-webkit- の順に注意 */ @media only 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 するバグあり
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
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">
CSS, SVG, WebFonts に グラデーション、影付き、 角丸などは CSS で実現 ボタン程度は CSS で十分 SVG 画像に置き換える WebFonts を使う ... などサイズ非依存に
Text
Web Fonts ダウンロードフォント IE9 なども WOFF サポート iPhone は WOFF 未サポート WOFF: Web用圧縮フォント フォントサービスも充実 やっと時代が変わりましたね… https://developer.mozilla.org/ja/CSS/@font-face
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/
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
WOFF フォントに変換 WOFF コンバータ Windows, Mac アプリ @font-face kit generator Web サービス (サイズ制限あり) http://musashi.or.tv/woffconv.htm http://www.fontsquirrel.com/fontface/generator
サブセットフォントを作る 必要文字だけで軽量化 サブセットフォントメーカー Windows, Mac アプリ @font-face kit generator Expert モードの Subsetting で Custom Subsetting を指定する http://musashi.or.tv/subsetfontmk.htm http://www.fontsquirrel.com/fontface/generator
デコもじ 日本初の WebFont サービス http://decomoji.jp/ 字游工房のフォントもある！ JavaScript 埋め込み型 個人 ¥315/月∼ 法人 ¥1575/月∼ http://decomoji.jp/
webfonts.fonts.com 多言語 WebFont サービス http://webfonts.fonts.com/ 10,000 以上のフォント 日本語フォントも 100 以上 JavaScript 埋め込み型 25,000 view/30days まで無料 http://webfonts.fonts.com/
Google Web Font API フォントは約 500 種類 開始当初は 18 しかなかった 日本語フォントなし メニューなど限られた用途で サブセットも指定可能 ファイルサイズを最小限に https://developers.google.com/webfonts/
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
ファイルサイズを小さく サブセットフォントをカテゴリーで指定 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
http://webfont.fontplus.jp/
Font+ 日本語フォント 500 以上！ フォントワークス、モリサワ、 イワタ、モトヤ ... サブセットの事前 DL 可能 あるいは JS 埋め込み ¥1050/月∼ http://webfont.fontplus.jp/
Font Control Features CSS3 font-variant フォントの詳細機能を制御 分数、桁 え、合字、旧字体... 仕様執筆者自身が実装 詳細: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
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-decoration-* は リセットされるので注意 https://developer.mozilla.org/en/CSS/text-decoration
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
hyphen 英単語の音節で折り返し 折り返し位置の明示指定 U+2010 (HYPHEN) - ハード U+00AD (SHY, &shy;) - ソフト p.auto { -moz-hyphens: auto; } https://developer.mozilla.org/en/CSS/hyphens
text-overflow Fx7 で ellipsis (...) に対応 Fx9 でサポートを強化 左右両端指定の 2 値構文 省略時の末端文字を指定 https://developer.mozilla.org/en/CSS/text-overflow
https://developer.mozilla.org/en/CSS/text-overflow
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
c.f. PDF.js プラグインフリー PDF Web 技術の結晶状態 DTP 品質の描画を... font-stretch も PDF で必要な機 能だったから実装された https://github.com/mozilla/pdf.js
http://firefoxhacks.org/sample.html
text-align-last 最終行だけ行 え変更 Fx12 からサポート justify だと最後の行がスカスカ になるケースなどに便利 https://developer.mozilla.org/en/CSS/text-align-last
text-size-adjust スマートフォン向けの文字 サイズ変更を許可・不許可 Fx11 からサポート 意図せず拡大されてしまっている 場合などに none 指定すると良い https://developer.mozilla.org/en/CSS/text-size-adjust
Box
border-image 仕様更新 border-image = shorthand *-source, *-slice, *-repeat に加え *-width, *-image-outset にも対応 デフォルトで中央省略に 中央にも画像がいるなら fill border width 上書き不能に / 使ってたスタイルは無効に http://dbaron.org/log/20120612-border-image
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
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
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
background-position - 4値構文 左上以外の角から位置指定 https://developer.mozilla.org/en/CSS/background-position
Transform
CSS Transform 任意の要素を変形させる 拡大縮小、回転、移動、歪み IE8 は Matrix Transform skew は Fx14 で廃止 skewX と skewY を使うこと https://developer.mozilla.org/en/CSS/-moz-transform
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
turn (角度の単位) Transform などの値で使用 当面は deg とかが無難 turn は Fx13 からサポート https://developer.mozilla.org/en/CSS/angle
3D Transform 3次元版 Fx10 からサポート rotateZ や translateZ を使う 視点は perspective などで指定 https://developer.mozilla.org/en/CSS/Using_CSS_transforms
3D Transform の注意 Firefox は最新仕様に厳格 perspective など単位が必須 iphone 3.0 は逆に単位なし WebKit だけ…って時は単位確認 https://developer.mozilla.org/en/CSS/perspective
今回に合わせて Firefox にも対応！ http://pr.fontplus.jp/sample/02/
Animation
CSS Transitions スタイル遷移をなめらかに 簡単にアニメーション GPU を用いた高速処理 今日は詳細割愛します http://24ways.org/2009/going-nuts-with-css-transitions
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/
CSS Transitions 発動条件 「スタイル変更」時に発動 変更前の状態が一度描画されて いる必要がある ページロード時に遷移するなら onload 後にスタイル指定が必要 left など一部スタイルは変化前に も left: 0px; などの指定が必要
CSS Animations Transitions を連続する機能 キーフレーム毎のスタイルを指定 CSS だけでアニメーション GPU を用いた高速処理 https://developer.mozilla.org/en/CSS/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> https://developer.mozilla.org/en/CSS/CSS_animations
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 を使っ て遅延時間を指定する
Layout
多段レイアウト(column-fill) 雑誌や新聞などの多段組 column-fill: auto ¦ balance https://developer.mozilla.org/en/CSS/column-fill
https://bug695222.bugzilla.mozilla.org/attachment.cgi?id=578376
Flexbox Layout 仕様変更 残りを X:Y で分割など XUL 由来のレイアウト機能 古い仕様は Fx2 からサポート 複数回仕様変更されててカオス 互換対応複雑になるので 今回割愛...
-vendor-prefix
ベンダー接頭辞サポート終了 接頭辞なしを使いましょう: border-radius* @Fx13 box-shadow @Fx13 その他も今後のため接頭辞 なしを併記する習慣を https://bugzilla.mozilla.org/show_bug.cgi?id=693510
other...
CSS3 calc() サイズを計算式で指定可能 width: -moz-calc(20% + 1rem) -moz- prefix に注意 IE9 はいきなり no prefix 実装 https://developer.mozilla.org/en/CSS/-moz-calc
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/
@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
@規則の入れ子利用 @media や @document 内で も @規則が利用可能に Fx11 から入れ子サポート https://bugzilla.mozilla.org/show_bug.cgi?id=511909
新機能や互換性情報は Mozilla Developer Street: dev.mozilla.jp

More Related Content

PDF
Web on Kernel
bydynamis
 
PDF
Apps for Web Platform
bydynamis
 
PDF
HTML2013 Web=OS
bydynamis
 
PDF
Web Technology Meeting
bydynamis
 
PDF
HTML5 + Firefox OS
bydynamis
 
PDF
HTML5 OS
bydynamis
 
PDF
HTML 2012
bydynamis
 
PDF
Pure Web Apps
bydynamis
 
Web on Kernel
bydynamis
 
Apps for Web Platform
bydynamis
 
HTML2013 Web=OS
bydynamis
 
Web Technology Meeting
bydynamis
 
HTML5 + Firefox OS
bydynamis
 
HTML5 OS
bydynamis
 
HTML 2012
bydynamis
 
Pure Web Apps
bydynamis
 

Viewers also liked

PDF
E libros
bySujay
 
PPTX
OED Forecast
byApril Rudy
 
PPTX
Tarea sistemas
byUVM
 
DOCX
US Landmarks Webquest
bymjlloyd
 
PDF
Perform 3
byPaul Tatore
 
PDF
ျမတ္ဗုဒၶ ေဒသနာ (ေဒါက္တာ၀ါလ္ပိုလာ)
bysan aye
 
PDF
Australian expos directory 2012 (by sector)
byexagoges
 
DOC
Aranadano en eeuu
byEduar Perez Perez
 
PPTX
Sistemas portables
byJoel Armado
 
PPT
Webquest carol
byCalonso011
 
PPTX
Golars networks ccie security ppt
bygolarsnetworks007
 
PPT
TMX Equicom Corporate Presentation
byTMX Equicom
 
PPTX
Milennial Whitepaper 7.22
byHeather Engel
 
ODP
Open layers pt_br
byMarcos Rosa
 
DOCX
ENBE FINAL PROJECT REPORT
byForestedTiger
 
PDF
Cardno WRG - Global Services
byTim Daugherty
 
PDF
2016 02 Power Engineering
byLuiz Carlos Martinelli Júnior
 
PPT
Web accessibility: An overview
byWebcredible
 
PPTX
Gerta
bygutgvcgh
 
PDF
Tetratech sewer system report
byJGNelson
 
E libros
bySujay
 
OED Forecast
byApril Rudy
 
Tarea sistemas
byUVM
 
US Landmarks Webquest
bymjlloyd
 
Perform 3
byPaul Tatore
 
ျမတ္ဗုဒၶ ေဒသနာ (ေဒါက္တာ၀ါလ္ပိုလာ)
bysan aye
 
Australian expos directory 2012 (by sector)
byexagoges
 
Aranadano en eeuu
byEduar Perez Perez
 
Sistemas portables
byJoel Armado
 
Webquest carol
byCalonso011
 
Golars networks ccie security ppt
bygolarsnetworks007
 
TMX Equicom Corporate Presentation
byTMX Equicom
 
Milennial Whitepaper 7.22
byHeather Engel
 
Open layers pt_br
byMarcos Rosa
 
ENBE FINAL PROJECT REPORT
byForestedTiger
 
Cardno WRG - Global Services
byTim Daugherty
 
2016 02 Power Engineering
byLuiz Carlos Martinelli Júnior
 
Web accessibility: An overview
byWebcredible
 
Gerta
bygutgvcgh
 
Tetratech sewer system report
byJGNelson
 

Similar to CSS.2012

PDF
Firefox and Firebug with Foxkeh
bydynamis
 
PDF
HTML Web Platform
bydynamis
 
KEY
Web is the Platform
bydynamis
 
PDF
Toward Firefox OS
bydynamis
 
PDF
Firefox OS
bydynamis
 
PDF
WebとIE10とWindows 8
byMicrosoft
 
PDF
IE10とWindows 8とHTML5
byMicrosoft
 
PDF
Dotnetlab 20110827
byhirookun
 
PDF
Mvc conf session_3_takehara
byHiroshi Okunushi
 
PDF
Concentrated HTML5 & Attractive HTML5
bySho Ito
 
PDF
Attractive HTML5
bySho Ito
 
PDF
HTML5
bysmallworkshop
 
PDF
Browser and Mozilla
bydynamis
 
PPTX
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
byYasunobu Ikeda
 
PDF
Adobe Creative SuiteではじまるHTML5の民主化
byTeiichi Ota
 
PDF
マイクロソフトにとってのWebって？
byMicrosoft
 
PDF
Html5超入門
byMonaca
 
PDF
Internet Explorer 10とマイクロソフトにとってのHTML5
byMicrosoft
 
PPTX
事例で学ぶHTML5スマフォアプリ開発セミナー
byMonaca
 
PDF
ゲームだけじゃないHTML5
byOsamu Shimoda
 
Firefox and Firebug with Foxkeh
bydynamis
 
HTML Web Platform
bydynamis
 
Web is the Platform
bydynamis
 
Toward Firefox OS
bydynamis
 
Firefox OS
bydynamis
 
WebとIE10とWindows 8
byMicrosoft
 
IE10とWindows 8とHTML5
byMicrosoft
 
Dotnetlab 20110827
byhirookun
 
Mvc conf session_3_takehara
byHiroshi Okunushi
 
Concentrated HTML5 & Attractive HTML5
bySho Ito
 
Attractive HTML5
bySho Ito
 
HTML5
bysmallworkshop
 
Browser and Mozilla
bydynamis
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
byYasunobu Ikeda
 
Adobe Creative SuiteではじまるHTML5の民主化
byTeiichi Ota
 
マイクロソフトにとってのWebって？
byMicrosoft
 
Html5超入門
byMonaca
 
Internet Explorer 10とマイクロソフトにとってのHTML5
byMicrosoft
 
事例で学ぶHTML5スマフォアプリ開発セミナー
byMonaca
 
ゲームだけじゃないHTML5
byOsamu Shimoda
 

More from dynamis

PDF
HTTP and 5G (fixed1)
bydynamis
 
PDF
HTTP and 5G
bydynamis
 
PDF
HTTP and 5G partial draft
bydynamis
 
PDF
Web App Platform Strategy
bydynamis
 
PDF
HTML5 & Renesas RZ/G
bydynamis
 
PDF
Life of html5 (osaka)
bydynamis
 
PDF
Web updates 2017
bydynamis
 
PDF
Life of HTML5
bydynamis
 
PDF
Browsers in IoT Era
bydynamis
 
PDF
New Norm of HTML5
bydynamis
 
PDF
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
bydynamis
 
PDF
OSC2016.Enterprise Lightnig Talk
bydynamis
 
PDF
Demo for Gecko Embedded
bydynamis
 
PDF
Project Gecko Embedded
bydynamis
 
PDF
The New Norm of The Web
bydynamis
 
PDF
Progressive Mobile Web Apps
bydynamis
 
PDF
Modern Mobile Web Apps
bydynamis
 
PDF
Web Tech & Architecture
bydynamis
 
PDF
Java script.trend(spec)
bydynamis
 
PDF
Data Privacy meeting
bydynamis
 
HTTP and 5G (fixed1)
bydynamis
 
HTTP and 5G
bydynamis
 
HTTP and 5G partial draft
bydynamis
 
Web App Platform Strategy
bydynamis
 
HTML5 & Renesas RZ/G
bydynamis
 
Life of html5 (osaka)
bydynamis
 
Web updates 2017
bydynamis
 
Life of HTML5
bydynamis
 
Browsers in IoT Era
bydynamis
 
New Norm of HTML5
bydynamis
 
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
bydynamis
 
OSC2016.Enterprise Lightnig Talk
bydynamis
 
Demo for Gecko Embedded
bydynamis
 
Project Gecko Embedded
bydynamis
 
The New Norm of The Web
bydynamis
 
Progressive Mobile Web Apps
bydynamis
 
Modern Mobile Web Apps
bydynamis
 
Web Tech & Architecture
bydynamis
 
Java script.trend(spec)
bydynamis
 
Data Privacy meeting
bydynamis
 

Recently uploaded

PPTX
楽々ナレッジベース「楽ナレ」３種比較 - Dify / AWS S3 Vector / Google File Search Tool
byKiyohide Yamaguchi
 
PDF
流行りに乗っかるClaris FileMaker 〜AI関連機能の紹介〜 by 合同会社イボルブ
byEvolve LLC.
 
PDF
Machine Tests Benchmark Suite. Explain github.com/alexziskind1/machine_tests #2
byTasuku Takahashi
 
PDF
Machine Tests Benchmark Suite. Explain github.com/alexziskind1/machine_tests #1
byTasuku Takahashi
 
PDF
エンジニアが選ぶべきAIエディタ ＆ Antigravity 活用例@ウェビナー「触ってみてどうだった？Google Antigravity 既存IDEと...
byNorihiroSunada
 
PDF
20251210_MultiDevinForEnterprise on Devin 1st Anniv Meetup
byMasaki Yamakawa
 
楽々ナレッジベース「楽ナレ」３種比較 - Dify / AWS S3 Vector / Google File Search Tool
byKiyohide Yamaguchi
 
流行りに乗っかるClaris FileMaker 〜AI関連機能の紹介〜 by 合同会社イボルブ
byEvolve LLC.
 
Machine Tests Benchmark Suite. Explain github.com/alexziskind1/machine_tests #2
byTasuku Takahashi
 
Machine Tests Benchmark Suite. Explain github.com/alexziskind1/machine_tests #1
byTasuku Takahashi
 
エンジニアが選ぶべきAIエディタ ＆ Antigravity 活用例@ウェビナー「触ってみてどうだった？Google Antigravity 既存IDEと...
byNorihiroSunada
 
20251210_MultiDevinForEnterprise on Devin 1st Anniv Meetup
byMasaki Yamakawa
 

CSS.2012

  • 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.
  • 3.
    about:dynamis Mozilla Japan http://dynamis.jp @dynamitter facebook.com/ dynamis レッサーパンダが好き。 mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  • 4.
    about:slides 下線なしリンクも使います コードは要点だけの簡略版 特に注意が必要なとき以外は -moz- 以外の接頭辞など割愛 画像からも時々 右下には補足や リンクしてます 一次情報源 URL mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  • 5.
  • 7.
    Multi Media Mouse, HTML5 Key ev. Forms W3C Offline HTML5 HTML5 Support Parser WAI- XHTML5 ARIA Semantic Elements
  • 8.
    Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- Offline HTML5 HTML5 Support Sent ev. Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Workers Micro- HTML Data
  • 9.
    Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- Offline HTML5 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
  • 10.
    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 ECMA HTML5 HTML5 Support Sent ev. ECMA Script Parser 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
  • 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 ECMA HTML5 HTML5 Support Sent ev. ECMA Script ECMA NFC Parser 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 mity Schema RSS Math Regions .org ation ML WOFF RDF DOM4
  • 12.
    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 ECMA HTML5 HTML5 Support Sent ev. ECMA Script ECMA NFC Parser 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 mity Schema RSS Math Regions .org ation ML WOFF RDF DOM4
  • 13.
    今日はここの話です Media Layout Queries Trans CSS3~ Flex Box form Anim Regions ation
  • 14.
  • 15.
    マルチデバイス対応 ＆ DTP レベルのデザイン
  • 16.
  • 17.
    Media Queries デバイスに応じたスタイル 画面サイズ、解像度、縦横... https://developer.mozilla.org/en/CSS/Media_queries
  • 18.
    画面サイズ別 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 などで正しくないので注意
  • 19.
    Responsive Web Design ピクセル単位で調整しない Web はピクセル指向ではない 画面サイズに応じて適切に http://www.alistapart.com/articles/responsive-web-design/
  • 20.
  • 21.
    背景画像も 左右切り取り 横幅に応じて サイズを変更 http://www.alistapart.com/articles/responsive-web-design/
  • 22.
  • 23.
    横幅に応じて 要素数を増減 http://colly.com/ link_to_the_document
  • 24.
    <meta> viewport 拡大率制御には viewport ユーザのズーム禁止も可能 表示領域の CSS ピクセル幅 iPhone はデフォルト 980px Firefox for Mobile は 800px https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
  • 25.
    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
  • 26.
  • 27.
    高解像度ディスプレイ対応 見なかったことに！(・・). それが一番楽ですよね。 link_to_the_document
  • 28.
    高解像度ディスプレイ対応 高解像度版だけを使う ファイルサイズが… 解像度別の画像を用意 手間が掛かります… CSS, SVG, WebFont に 可能ならこれがベスト？ link_to_the_document
  • 29.
    解像度別の画像を用意 Device Pixel Rate CSS または JS で条件分岐 srcset 属性 image-set() 関数 Gecko で対応するか未定 サーバサイドで自動変換
  • 30.
    Device Pixel Rate CSS の論理ピクセルと端末 画面のピクセル比 iPhone 4 以降の高解像度端末 では 1:1.5 や 1:2 の端末が多い 高解像度画像や SVG などを 使わないとぼやけてしまう https://developer.mozilla.org/en/CSS/Media_queries/#-moz-device-pixel-ratio
  • 31.
    Device Pixel Rate header { /* 通常サイズの画像 */ background: url(head.png); } /* "only" で媒体型のみ対応する古いブラウザ除外 */ /* min/max と -moz-/-webkit- の順に注意 */ @media only 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 するバグあり
  • 32.
    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
  • 33.
    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">
  • 34.
    CSS, SVG, WebFontsに グラデーション、影付き、 角丸などは CSS で実現 ボタン程度は CSS で十分 SVG 画像に置き換える WebFonts を使う ... などサイズ非依存に
  • 35.
  • 36.
    Web Fonts ダウンロードフォント IE9 なども WOFF サポート iPhone は WOFF 未サポート WOFF: Web用圧縮フォント フォントサービスも充実 やっと時代が変わりましたね… https://developer.mozilla.org/ja/CSS/@font-face
  • 37.
    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/
  • 38.
    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
  • 39.
    WOFF フォントに変換 WOFF コンバータ Windows, Mac アプリ @font-face kit generator Web サービス (サイズ制限あり) http://musashi.or.tv/woffconv.htm http://www.fontsquirrel.com/fontface/generator
  • 40.
    サブセットフォントを作る 必要文字だけで軽量化 サブセットフォントメーカー Windows, Mac アプリ @font-face kit generator Expert モードの Subsetting で Custom Subsetting を指定する http://musashi.or.tv/subsetfontmk.htm http://www.fontsquirrel.com/fontface/generator
  • 41.
    デコもじ 日本初の WebFont サービス http://decomoji.jp/ 字游工房のフォントもある！ JavaScript 埋め込み型 個人 ¥315/月∼ 法人 ¥1575/月∼ http://decomoji.jp/
  • 42.
    webfonts.fonts.com 多言語 WebFont サービス http://webfonts.fonts.com/ 10,000 以上のフォント 日本語フォントも 100 以上 JavaScript 埋め込み型 25,000 view/30days まで無料 http://webfonts.fonts.com/
  • 43.
    Google Web FontAPI フォントは約 500 種類 開始当初は 18 しかなかった 日本語フォントなし メニューなど限られた用途で サブセットも指定可能 ファイルサイズを最小限に https://developers.google.com/webfonts/
  • 44.
    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
  • 45.
    ファイルサイズを小さく サブセットフォントをカテゴリーで指定 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
  • 46.
  • 47.
    Font+ 日本語フォント 500 以上！ フォントワークス、モリサワ、 イワタ、モトヤ ... サブセットの事前 DL 可能 あるいは JS 埋め込み ¥1050/月∼ http://webfont.fontplus.jp/
  • 48.
    Font Control Features CSS3 font-variant フォントの詳細機能を制御 分数、桁 え、合字、旧字体... 仕様執筆者自身が実装 詳細: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
  • 49.
  • 50.
  • 51.
    text-decoration 破線や波線などにも対応 もはや Keynote より高機能… text-decoration 設定すると -moz-text-decoration-* は リセットされるので注意 https://developer.mozilla.org/en/CSS/text-decoration
  • 52.
    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
  • 53.
    hyphen 英単語の音節で折り返し 折り返し位置の明示指定 U+2010 (HYPHEN) - ハード U+00AD (SHY, &shy;) - ソフト p.auto { -moz-hyphens: auto; } https://developer.mozilla.org/en/CSS/hyphens
  • 54.
    text-overflow Fx7 で ellipsis (...) に対応 Fx9 でサポートを強化 左右両端指定の 2 値構文 省略時の末端文字を指定 https://developer.mozilla.org/en/CSS/text-overflow
  • 55.
  • 56.
    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
  • 57.
    c.f. PDF.js プラグインフリー PDF Web 技術の結晶状態 DTP 品質の描画を... font-stretch も PDF で必要な機 能だったから実装された https://github.com/mozilla/pdf.js
  • 58.
  • 59.
    text-align-last 最終行だけ行 え変更 Fx12 からサポート justify だと最後の行がスカスカ になるケースなどに便利 https://developer.mozilla.org/en/CSS/text-align-last
  • 60.
    text-size-adjust スマートフォン向けの文字 サイズ変更を許可・不許可 Fx11 からサポート 意図せず拡大されてしまっている 場合などに none 指定すると良い https://developer.mozilla.org/en/CSS/text-size-adjust
  • 61.
  • 62.
    border-image 仕様更新 border-image = shorthand *-source, *-slice, *-repeat に加え *-width, *-image-outset にも対応 デフォルトで中央省略に 中央にも画像がいるなら fill border width 上書き不能に / 使ってたスタイルは無効に http://dbaron.org/log/20120612-border-image
  • 63.
    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
  • 64.
    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
  • 65.
    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
  • 66.
    background-position - 4値構文 左上以外の角から位置指定 https://developer.mozilla.org/en/CSS/background-position
  • 67.
  • 68.
    CSS Transform 任意の要素を変形させる 拡大縮小、回転、移動、歪み IE8 は Matrix Transform skew は Fx14 で廃止 skewX と skewY を使うこと https://developer.mozilla.org/en/CSS/-moz-transform
  • 69.
    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
  • 70.
    turn (角度の単位) Transform などの値で使用 当面は deg とかが無難 turn は Fx13 からサポート https://developer.mozilla.org/en/CSS/angle
  • 71.
    3D Transform 3次元版 Fx10 からサポート rotateZ や translateZ を使う 視点は perspective などで指定 https://developer.mozilla.org/en/CSS/Using_CSS_transforms
  • 72.
    3D Transform の注意 Firefox は最新仕様に厳格 perspective など単位が必須 iphone 3.0 は逆に単位なし WebKit だけ…って時は単位確認 https://developer.mozilla.org/en/CSS/perspective
  • 73.
    今回に合わせて Firefox にも対応！http://pr.fontplus.jp/sample/02/
  • 74.
  • 75.
    CSS Transitions スタイル遷移をなめらかに 簡単にアニメーション GPU を用いた高速処理 今日は詳細割愛します http://24ways.org/2009/going-nuts-with-css-transitions
  • 76.
    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/
  • 77.
    CSS Transitions 発動条件 「スタイル変更」時に発動 変更前の状態が一度描画されて いる必要がある ページロード時に遷移するなら onload 後にスタイル指定が必要 left など一部スタイルは変化前に も left: 0px; などの指定が必要
  • 78.
    CSS Animations Transitions を連続する機能 キーフレーム毎のスタイルを指定 CSS だけでアニメーション GPU を用いた高速処理 https://developer.mozilla.org/en/CSS/CSS_animations
  • 79.
    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
  • 80.
    CSS Animations の注意 完了後は元のスタイルに戻る to スタイルは維持されない 開始前と from, to と完了後の スタイルは一瞬で切り替わる 滑らかに変化して維持: from は既存スタイルと同じに to は完了後スタイルと同じに
  • 81.
    滑らかに変化して維持する <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>
  • 82.
    CSS Animations 発動条件 -moz-animation を設定 onload 前でも問題なし 一定時間後に発動したい場 合は animation-delay を使っ て遅延時間を指定する
  • 83.
  • 84.
    多段レイアウト(column-fill) 雑誌や新聞などの多段組 column-fill: auto ¦ balance https://developer.mozilla.org/en/CSS/column-fill
  • 85.
  • 86.
    Flexbox Layout 仕様変更 残りを X:Y で分割など XUL 由来のレイアウト機能 古い仕様は Fx2 からサポート 複数回仕様変更されててカオス 互換対応複雑になるので 今回割愛...
  • 87.
  • 88.
    ベンダー接頭辞サポート終了 接頭辞なしを使いましょう: border-radius* @Fx13 box-shadow @Fx13 その他も今後のため接頭辞 なしを併記する習慣を https://bugzilla.mozilla.org/show_bug.cgi?id=693510
  • 89.
  • 90.
    CSS3 calc() サイズを計算式で指定可能 width: -moz-calc(20% + 1rem) -moz- prefix に注意 IE9 はいきなり no prefix 実装 https://developer.mozilla.org/en/CSS/-moz-calc
  • 91.
    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/
  • 92.
    @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
  • 93.
    @規則の入れ子利用 @media や @document 内で も @規則が利用可能に Fx11 から入れ子サポート https://bugzilla.mozilla.org/show_bug.cgi?id=511909
  • 94.