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 の歴史

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; }

これ

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

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

２ . 仕様のモジュール化

■ モジュール化の目的

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

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

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

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

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

2011/9 勧告

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

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

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

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

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

３ .CSS3 で出来ること

■ セレクタの追加

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

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

スタイルを適用

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

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

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

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

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

html CSS

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

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 アニメーション作成用アプリ

■ テキストに影を付ける

今までは…

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

GIF に書き出す

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

GIF に書き出す

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

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

めんどくさい！

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

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

だけ。

「水平、垂直方向、影の拡散具合、影の色」が設定でき、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 プロパティジェネレータ

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

Chrome5.0

Firefox3.6

Opera10.53

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

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

・クロスブラウザ

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

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

・ポリフィル

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

■ クロスブラウザ

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

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

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

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

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

.PNG .PNG .PNG .PNG

IE8Opera10.53Firefox3.6Chrome5.0

IE8 に準拠し、全て画像。

CSS3 使いたい！

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

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

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

CSS3 .PNG

Opera10.53Firefox3.6Chrome5.0

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

CSS3 CSS3

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

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

CSS3 CSS2.1

Opera10.53Firefox3.6Chrome5.0 IE8

CSS3 CSS3

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

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

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

■ポリフィル

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

■ポリフィル

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

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

css3piehttp://css3pie.com/

■ポリフィル

CSS3 PIE.htc

Opera10.53Firefox3.6Chrome5.0

IE8 には behavior を使用

CSS3 CSS3

■ポリフィル

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

■2011/12 現在

・ IE9

・ FF8

・ Chrome15

・ Safari5.1・ Opera11.5

76%69%

■2011/12 現在

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

■2011/12 現在

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

■参考文献

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/

Css3

Design

CSS3 Transitions

Curso css3

1 Introduction to CSS3 - denisejacobs.comdenisejacobs.com/training/css3/2011-01/notes_CSS3intro_day1_01132011.pdf · 15 What’s New in CSS3 16 What’s New in CSS3? CSS3 is the third

CSS3 Selectors

CSS3 Refresher

CSS & CSS3

Fundamental CSS3

HTML5 & CSS3

css3, html5

HTML5 & CSS3

Chapter 8: CSS3 and HTML5 - computingattallis.weebly.comcomputingattallis.weebly.com/uploads/2/6/4/3/... · Chapter 8: CSS3 and HTML5 8.1 Theory: CSS3 Today CSS3 is the latest standard

Css3 color

CSS3 produktiv

Learn css3

CSS3 Top10

CsS3 surfantants

Curso css3 - Programacion en HTML5 CSS3

Approfondissement CSS3

CSS - CSS3

HTML5 CSS3