Embed Size (px)
DESCRIPTION
CSS Nite in Osaka vol.31 で使用したスライド(に若干加筆したもの)
Citation preview
CSS.2012~Latest & Coming CSS Features~
Slides @ CSS Nite in Osaka vol.31 on 2012/06/29by Tomoya ASAI (dynamis)
Last Update: 2012/07/05
about:
about:dynamisMozilla 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
SemanticElements
MultiMedia
HTML5Forms
OfflineSupportHTML5HTML5
Parser
Mouse,Key ev.
XHTML5WAI-ARIA
W3C
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Micro-Data
Server-Sent ev.
WebSockets
WebStorage
HTML5HTML5Parser
Mouse,Key ev.
XHTML5
WebWorkers
WebMessag-
ing
WAI-ARIA
W3C
WHATWG
HTML
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Micro-Data
Server-Sent ev.
WebSockets
WebStorage
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
XHTML5
WebWorkers
WebMessag-
ing
WAI-ARIA
W3C
WHATWG
HTML
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Micro-Data
WebGL
IndexedDB
SVG
Server-Sent ev.
WebSockets
WebSockets
Geo-location
FileAPI
WebStorage
XHR2
MathML
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
ECMAScript
CSP
SPDY
XHTML5
Orien-tation
WebWorkers
WebMessag-
ing
DOM4
SMIL Vibra-tion
XPathRSS
OGP
WAI-ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
HTML
DNT
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Webm
H.264
Micro-Data
WebGL
WebSQL
IndexedDB
SVG
Server-Sent ev.
WebSockets
WebSockets
Geo-location
FileAPI
WebStorage
XHR2
MathML
WebAudio
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
Opus
ECMAScript ECMA
6th
USB
CSP
SPDY
WebCL
WebRTC
NetInfo
MP3
DeviceStorage
TCPSocket
NFC
File Sys
Notifi-cation
XHTML5
Orien-tation
WebWorkers
WebMessag-
ing
DOM4
SMIL Vibra-tion
Proxi-mity
XPathRSS
RDF
OGPSchema
.org
WAI-ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
BatteryStatus
Radio
Tel
HTML
DNT
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Webm
H.264
Micro-Data
WebGL
WebSQL
IndexedDB
SVG
Server-Sent ev.
WebSockets
WebSockets
Geo-location
FileAPI
WebStorage
XHR2
MathML
WebAudio
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
Opus
ECMAScript ECMA
6th
USB
CSP
SPDY
WebCL
WebRTC
NetInfo
MP3
DeviceStorage
TCPSocket
NFC
File Sys
Notifi-cation
XHTML5
Orien-tation
WebWorkers
WebMessag-
ing
DOM4
SMIL Vibra-tion
Proxi-mity
XPathRSS
RDF
OGPSchema
.org
WAI-ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
BatteryStatus
Radio
Tel
HTML
DNT
LayoutMedia
Queries
CSS3~Transform
Animation Regions
FlexBox
今日はここの話です
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/
<meta> viewport
拡大率制御には viewportユーザのズーム禁止も可能
表示領域の CSS ピクセル幅iPhone はデフォルト 980pxFirefox 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 RateCSS または 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 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 するバグあり
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 generatorWeb サービス (サイズ制限あり)
http://www.fontsquirrel.com/fontface/generatorhttp://musashi.or.tv/woffconv.htm
サブセットフォントを作る
必要文字だけで軽量化サブセットフォントメーカーWindows, Mac アプリ
@font-face kit generatorExpert モードの Subsetting でCustom Subsetting を指定する
http://www.fontsquirrel.com/fontface/generatorhttp://musashi.or.tv/subsetfontmk.htm
デコもじ
日本初の 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
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, ­) - ソフト
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 ...
https://developer.mozilla.org/en/CSS/font-stretch
h1 { font-stretch: extra-expanded }p { font-stretch: condensed }
c.f. PDF.js
プラグインフリー PDFWeb 技術の結晶状態
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 repeatrepeat-x = repeat no-repeatrepeat-y = no-repeat repeat1値構文で定義されていない組み合わせ 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
![Learn php my sql and css(2012)[a4]](https://img.pdfslide.tips/doc/110x75/554bac06b4c905b8618b54fa/learn-php-my-sql-and-css2012a4.jpg)
