CSS.2012

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

Multi
Media Mouse,
HTML5 Key ev.
Forms
W3C
Oﬄine
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-
Oﬄine
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
HTML5 Key ev.
Forms
W3C Server-
Oﬄine
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
HTML5 Key ev. XHR2
FileAPI CSP
Forms
W3C Server-
Oﬄine ECMA
HTML5 HTML5 Support
Sent ev. ECMA
Script
Parser
Indexed
Web
WAI- DB
XHTML5 Storage
ARIA
Semantic
Elements Web Media
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 Notiﬁ-
tation Web
Canvas cation
WHATWG Web IETF RTC
Messag-
ing Web TCP Tel
Multi SPDY
Web Sockets DNT Socket
HTML5 Key ev. XHR2 Radio
FileAPI CSP
Forms Net
W3C Server- Info
Oﬄine 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
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

マルチデバイス対応
＆
DTP レベルのデザイン

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>

<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://colly.com/
link_to_the_document

横幅に応じて
要素数を増減

http://colly.com/

viewport を指定する

<meta name="viewport"
content="device-width, initial-scale=1.0">


content="width=500, initial-scale=1.0"/>


content="width=device-width, user-scalable=no">

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

高解像度ディスプレイ対応

見なかったことに！(・・).
それが一番楽ですよね。


高解像度ディスプレイ対応

高解像度版だけを使う
ファイルサイズが…
解像度別の画像を用意
手間が掛かります…
CSS, SVG, WebFont に
可能ならこれがベスト？


解像度別の画像を用意

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 を使う
... などサイズ非依存に

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 非対応ブラウザ向けフォント設定 */
src: url(Sawarabi.otf) format("opentype");
}
@font-face { /* WOFF 対応ブラウザには WOFF を */
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/woﬀconv.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

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/

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-overﬂow

Fx7 で ellipsis (...) に対応

Fx9 でサポートを強化
左右両端指定の 2 値構文
省略時の末端文字を指定

https://developer.mozilla.org/en/CSS/text-overﬂow

https://developer.mozilla.org/en/CSS/text-overﬂow

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://ﬁrefoxhacks.org/sample.html

text-align-last

最終行だけ行え変更
Fx12 からサポート
justify だと最後の行がスカスカ
になるケースなどに便利

https://developer.mozilla.org/en/CSS/text-align-last

text-size-adjust

スマートフォン向けの文字
サイズ変更を許可・不許可
意図せず拡大されてしまっている
場合などに none 指定すると良い

https://developer.mozilla.org/en/CSS/text-size-adjust

border-image 仕様更新

border-image = shorthand
*-source, *-slice, *-repeat に加え
*-width, *-image-outset にも対応
デフォルトで中央省略に
中央にも画像がいるなら ﬁll
border width 上書き不能に
/ 使ってたスタイルは無効に

http://dbaron.org/log/20120612-border-image

// ボーダー画像の中央部分も使用する場合
-moz-border-image: url(my-border.png)
30 30 30 30 stretch stretch;
-webkit-border-image: url(my-border.png)
-o-border-image: url(my-border.png)
// 最新仕様では fill 指定しないと中央不使用
border-image: url(my-border.png)
30 30 30 30 fill stretch stretch;


// これまでの記述
-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;


background-repeat - 2値構文

X, Y 方向別に設定可能に
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

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次元版
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/

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/ﬁrefox4-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 を使っ
て遅延時間を指定する

多段レイアウト(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 からサポート
複数回仕様変更されててカオス

互換対応複雑になるので
今回割愛...

ベンダー接頭辞サポート終了

接頭辞なしを使いましょう:
border-radius* @Fx13
box-shadow @Fx13
その他も今後のため接頭辞
なしを併記する習慣を

https://bugzilla.mozilla.org/show_bug.cgi?id=693510

CSS3 calc()

サイズを計算式で指定可能
width: -moz-calc(20% + 1rem)
-moz- preﬁx に注意
IE9 はいきなり no preﬁx 実装

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

CSS.2012

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to CSS.2012

Similar to CSS.2012 (20)

More from dynamis

More from dynamis (20)

Recently uploaded

Recently uploaded (9)

CSS.2012