Css3

■ 目次１ .W3C 勧告へのプロセス

２ . 仕様のモジュール化

３ .CSS3 で出来ること

４ .CSS3 未実装ブラウザへの対応

５ . 各ブラウザの CSS3 実装状況

１ .W3C 勧告へのプロセス

■ 仕様の策定

W3C CSS Working Group によって Web 技術の標準化を目的とした仕様が決定される。

■ 仕様の策定


・ CSS Working Group

■ 仕様の策定

・ Adobe Systems・ Apple・ Google・ HP・ IBM・ Microsoft・ Mozilla・ Opera・ Sun Microsystems…etc


・ CSS Working Group

■ 仕様の策定

■W3C 勧告

草案

■W3C 勧告

草案最終草案

■W3C 勧告

草案最終草案

勧告候補

■W3C 勧告

草案最終草案

勧告候補

勧告案

■W3C 勧告

草案最終草案

勧告候補

勧告案W3C 勧告

■W3C 勧告

■CSS の歴史

1996 CSS level1 W3C 勧告

■CSS の歴史



■CSS の歴史


1998 CSS level2 W3C 勧告CSS level2.1 草案開始

■CSS の歴史



2000 CSS level3 草案開始

■CSS の歴史




2011 CSS level2.1 W3C 勧告

■CSS の歴史




2011 CSS level2.1 W3C 勧告現時点での WEB 標準

■CSS の歴史





CSS level4 草案開始

■CSS の歴史

現時点での WEB 標準






■CSS の歴史

CSS level4 W3C 勧告???? CSS level3 W3C 勧告







■CSS の歴史

CSS level4 W3C 勧告???? CSS level3 W3C 勧告将来的に標準となりうる

仕様


■ ベンダープレフィックス

独自の拡張機能や、草案段階の仕様を実装する場合、それが拡張機能であると示す識別子のこと。


-moz- Firefox

-ms- Internet Explorer

-o- Opera

-webkit- Safari 、 Google Chrome


div.sample1 {　 border:1px solid red; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }


div.sample1 {　 border:1px solid red; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }

これ


まだ草案の状態であることを示し、勧告候補になったときに外される。

現在、仕様の W3C 勧告を待たずに各ブラウザでCSS ３が先行実装されている。


２ . 仕様のモジュール化

■ モジュール化の目的


CSS3 では、 300 の実装が追加される



中途半端な実装を避ける為、仕様をシステム構成の要素（モジュール）単位で分散



必要なモジュールだけを実装可能

中途半端な実装を避ける為、仕様をシステム構成の要素（モジュール）単位で分散

■ 主なモジュールと進捗状況



2011/9 勧告

■ モジュール化のメリット


PC 、スマートフォン、タブレット等デバイスの多様化


PC 、スマートフォン、タブレット等デバイスの多様化

使用環境に合わせたモジュールの実装を選択できる。

３ .CSS3 で出来ること

■ セレクタの追加


セレクタの使用により正規表現のような指定が可能


要素の中で指定した属性名属性値を持つ要素

スタイルを適用

セレクタの使用により正規表現のような指定が可能

■ セレクタの追加E:nth-of-type(n) セレクタの活用

■ セレクタの追加E:nth-of-type(n) セレクタの活用

3 番目に表れる p タグにのみスタイルを適用


html

1 行目 2 行目 3 行目 4 行目 5 行目 

E:nth-of-type(n) セレクタの活用



html CSS


p:nth-of-type(3) { 　 font-weight:bold; 　 color:red;}




html CSS






html CSS





■ セレクタの追加その他のセレクタ



等々。

■ 高度なアニメーション表現が可能


今まではアニメーションの演出＝ Flash


サイトに負荷がかかる。アクセシビリティの犠牲。

今まではアニメーションの演出＝ Flash

CSS3 では、回転・変形・ 3D などの高度な演出、タイムラインの編集も自由自在。


■ アニメーションプロパティ

Transform2D 3D 変形（ 2D 3D Transforms モジュール）要素にマトリクス変形を適用したり、 3D 変形の遠近効果を調節が可能



Transition時間的変化（ Transitions モジュール）変化に掛かる時間を指定したり、変化のタイミング・進行割合を指定が可能



Animationアニメーション（ Animations モジュール）アニメーション一回分の時間の長さを指定したり、アニメーションの繰り返し回数を指定が可能

Transition時間的変化（ Transitions モジュール）変化に掛かる時間を指定したり、変化のタイミング・進行割合を指定が可能


Sencha Animatorhttp://extjs.co.jp/products/animator/

■CSS3 アニメーション作成用アプリ

http://extjs.co.jp/products/animator/

■ テキストに影を付ける

今までは…


Photoshop などで影付きの文字を作成


GIF に書き出す



GIF に書き出す


HTML 内にイメージタグで挿入


GIF に書き出す


alt 指定でイメージの説明を記述

HTML 内にイメージタグで挿入



めんどくさい！


CSS3 のプロパティを使用すると…

box-shadow: 5px 5px 5px 5px #888;



だけ。

「水平、垂直方向、影の拡散具合、影の色」が設定でき、Photoshop のようなコントロールが可能。



「水平、垂直方向、影の拡散具合、影の色」が設定でき、Photoshop のようなコントロールが可能。


水平影垂直影ぼかし広がり



.sampleTex{ background-color: rgba(82,96,117,0.5); -webkit-background-clip: text; color: transparent; text-shadow: 0 5px 6px rgba(255,255,255,0.5) inset;}


■ その他のプロパティ

■ その他のプロパティ・角丸

border-radius背景とボーダー（ Backgrounds and Borders モジュール）


・半透明


Opacity透過色（ Color モジュール）


・半透明

・グラデーション



linear-gradient()グラデーション（ Image Values モジュール）


・半透明

・グラデーション



linear-gradient()グラデーション（ Image Values モジュール）等々。

css3makerhttp://www.css3maker.com/index.html

■CSS3 プロパティジェネレータ

http://www.css3maker.com/index.html

こんなこともできちゃいます。

Chrome5.0

Firefox3.6

Opera10.53

IE8

４ .CSS3 未実装ブラウザへの対応

■新技術と旧ブラウザの共生概念

・クロスブラウザ

・プログレッシブ・エンハンスメント

・グレイスフルデグラデーション

・ポリフィル

■新技術と旧ブラウザの共生概念

■ クロスブラウザ


どんなブラウザでも見栄えを同じにする。



古いブラウザに合わせて制作されることが多い。




新しい技術を取り入れることが困難


　デバイスが多様化してきた現在にはそぐわない。



新しい技術を取り入れることが困難

.PNG .PNG .PNG .PNG

IE8Opera10.53Firefox3.6Chrome5.0

IE8 に準拠し、全て画像。


CSS3 使いたい！

■ プログレッシブ・エンハンスメント


新しい技術を積極的に利用する概念


一般的環境を基準にし、進んだ環境をも視野に入れる

CSS3 .PNG

Opera10.53Firefox3.6Chrome5.0

CSS3 に準拠し、 IE8 のみ画像。

IE8

CSS3 CSS3


■ グレイスフルデグラデーション


最近の環境を基準にし、古い環境にはレベルを落とす


最近の環境を基準にし、古い環境にはレベルを落とす

CSS3 CSS2.1

Opera10.53Firefox3.6Chrome5.0 IE8

CSS3 CSS3


■ グレイスフルデグラデーションIE9

■ グレイスフルデグラデーションIE6

■ グレイスフルデグラデーション最新のブラウザのダウンロードを促す

■ポリフィル

■ポリフィル新しい環境を基準にし、古い環境を新しい環境に近づけて差をなくす

■ポリフィル

IE の旧ブラウザには css3 に似た独自実装がある

Js や、ビヘイビアなどを使用する

css3piehttp://css3pie.com/

■ポリフィル

http://css3pie.com/

CSS3 PIE.htc

Opera10.53Firefox3.6Chrome5.0

IE8 には behavior を使用

IE8

CSS3 CSS3

■ポリフィル

５ . 各ブラウザの　 CSS3 実装状況

■2011/12 現在

・ IE9

・ FF8

・ Chrome15

・ Safari5.1・ Opera11.5

52%

86%

90%

76%69%

■2011/12 現在

When can I use...http://caniuse.com/

■2011/12 現在

http://caniuse.com/

御静聴ありがとうございました。

■参考文献

http://weboook.blog22.fc2.com/blog-entry-280.html

webpark

KAYAC DESIGNER'S BLOGhttp://design.kayac.com/topics/2011/06/css-programing.php

shop DDhttp://shopdd.blog51.fc2.com/blog-entry-932.html

Wikipediahttp://ja.wikipedia.org/wiki/Cascading_Style_Sheets

W3Chttp://www.w3.org/Style/CSS/

Design

Css3