What about CSS3

• CSS3って？
• CSS3ができること
• デメリット
• まとめ

CSSの新しいバージョンです。

今までのCSSは、CSS2.1（昨年ようやく勧告）
CSS3は、現在ほとんどが策定中（草案段階）

IEは9以上、Firefoxは4以上、Safariは5以上
あたりが、対応ブラウザの目安です。

CSSでの要素の操作が容易になります

• たとえば、リストの
• 2番目の要素だけ赤＋bold
• にすることができます。

コード：
ul li:nth-child(2) { color:#f00; font-weight:bold; }

3カラムボックスにも

• nth-child(2)は
• 2番目の要素で固定ですが、
• nth-child(3n)とすると、
• 3nごとに
• スタイルを
• 変えることができます。

コード：
ul li { border:1px solid #000; }
ul li:nth-child(3n) { border:1px solid #f00; }

last-child と last-of-type.

• リスト

段落

• リスト
• リスト

段落

コード：
ul li:last-child{ border:2px solid red; }
ul:last-of-type{ border:2px solid blue; }

メディアクエリー

たとえばiPadの向きを変更すると、この部分の背景色が変わります！

コード：
@media screen and (orientation:portrait) { p { background: #fcc; } }
@media screen and (orientation:landscape) { p { background: #ccf; } }

おなじみ角丸

画像を使わなくても角丸にできます。

角丸用JSの例（どれも印刷時に崩れる印象。）

• IE-CSS3
• CSS3 PIE
• 印刷OKかも curvyCorners

コード：
p { padding:5px 10px; border:4px solid green; border-radius:10px; }

透過の指定

透過度合いが指定できるようになりました。
ここは黒・透過度50%を指定しています。

要素ごと透過できます（PCでhoverしてください）。

コード：
p span { color: rgba(0, 0, 0, 0.5); }
p { opacity: 0.5; }

ドロップシャドウ

ボックスに影がつけられます。

文字にもつけられます。

コード：
p { border: 1px solid #000; box-shadow: 2px 2px 5px #666; }
p { text-shadow: 5px 5px 4px #000; }

おなじみグラデーション,

背景にグラデーションをつけられます。
background: linear-gradient(270deg, #36C, #fff);

放射状に
background: radial-gradient(ellipse, #fff, #f60);

右上から
background: radial-gradient(100% 0%, #fff, #f69);

複数背景指定もできます

背景にグラデーション＋画像追加
background:
url(../../../image.png) no-repeat 97% 50%,
linear-gradient(#36C, #fff)

画像を両端に。
background:
url(../../../image.png) no-repeat 97% 50%,
url(../../../image.png) no-repeat 3% 50%;

シンプルアニメーション,（PCでぜひ。）

hoverで動きます。要素の回転(rotate)・拡大縮小(scale)なども可能。
flashと同様ease-in, ease-outなどの指定ができます。
要素がなくなった位置にカーソルがあるとリピートしてしまう。

コード：
p:hover { transition: all .5s ease-out; transform:translate(20px, 20px); }

ボタン例（PCでhoverしてください。）

ボタン1

ボタン2

コード：
p { background:
linear-gradient(#fff 0%, #f8f8f8 50%, #ececec 50%, #999 100%) }
p:hover { opacity: 0.8; }

• 対応しているブラウザのシェアが高くはない。（主にクライアント要因）
• JSでの代替ができないものも多い
  （ブラウザによるレンダリングの差異が許容されない場合は無理）
• prefix(-mox-box-shadow等)が必要なものと、そうでないものがバラバラ
  ⇒良さげなスクリプト　ベンダープレフィックス自動付与JS

• JSで代替できるもの(-child系)は使用している。
• メディアクエリーは普通に使用可。
• ブラウザによって「表示が異なる」という了承が得られれば、
  border-radius, shadow, opacity系は使える。
• gradientはGeckoとWebkitで文法が異なるので様子見。
• アニメーション系もprefixが必要なのでまだ様子見？

データは公開しています。
CSS3について

このスライドは下記を用いて作成しました。
Shower Presentation

• CSS3 Test
• HTML5 & CSS3 Support
• CSS-Eblog