CSS3プロパティ＆ブラウザ対応一覧

最新のCSSについては『HTML5＆CSS3デザイン　現場の新標準ガイド【第２版】』を参照してください。

「CSS3 スタンダード・デザインガイド【改訂第2版】」
を上梓しました。2013年4月段階での情報に基づき、CSS3 および CSS4の最新機能や各ブラウザの対応状況をまとめていますので、参考にしてください。
→ 改訂第2版での主な追加・更新内容

なお、ブラウザでの対応状況に大きな変化があった場合には、本ページで対応状況一覧を更新していきます。

旧版「CSS3 スタンダード・デザインガイド」の巻末に掲載したCSS3のプロパティ＆ブラウザ対応一覧です。2012年10月1日に更新した古い情報となっていますので、最新情報については「CSS3 スタンダード・デザインガイド【改訂第2版】」を参照してください。

CSS3: CSS3で新しく追加されたプロパティ。
CSS3: CSS2.1からのプロパティで、CSS3で機能が追加されたもの。
拡張: ブラウザが拡張したプロパティでW3Cの規格に未掲載のもの。

○: 対応（○は要ベンダープレフィックス）。
△: 部分対応（△は要ベンダープレフィックス）。
×: 未対応。

: iOS4.3のMobile Safari（iOS5、iOS6）
: Android 2.3/3.0/3.1の標準ブラウザ（バージョン3.2、4.x）
: Firefox 4（バージョン5～7、～15）
: Safari 5.0.5（バージョン5.1、6）
: Chrome 11（バージョン12～14、～22）
: Opera 11.10（バージョン12）
: Internet Explorer 9（バージョン10）; ※カッコ（）内は書籍に未掲載のバージョンで、
　以下の表中にはバージョン数を記載しています。

: IE6
: IE7
: IE8

参照: 書籍掲載ページ。

プロパティ名	CSS3	機能											参照
@charset		エンコードの種類の指定	○	○	○	○	○	○	○	○	○	○	-
@font-face	CSS3	Webフォント	○	○	○	○	○	○	○	△	△	△	162
@import		外部スタイルシートファイルのインポート	○	○	○	○	○	○	○	×	×	○	032
@keyframes	CSS3	アニメーションのキーフレームの指定	○	○	○ 5	○	○	×	○ 10	×	×	×	284
@media	CSS3	メディアクエリ	○	○	○	○	○	○	○	△	△	△	036
@namespace	CSS3	名前空間の指定	○	○	○	○	○	○	○	×	×	×	254
@page		ページメディアの設定	○	○	○	○	○	○	○	×	×	○	040
@page:first	CSS3	１ページ目の設定	△	△	△	△	△	△	△	×	×	△	040
@page:left	CSS3	左ページの設定	○	○	○	○	○	○	○	×	×	○	040
@page:right	CSS3	右ページの設定	○	○	○	○	○	○	○	×	×	○	040
～: calc()	CSS3	計算結果を値として利用	○ 6	×	○	○ 6	○ 22	×	○	×	×	×	306
～: canvas()	拡張	Canvasの機能で描画した画像の利用	○	○	×	○	○	×	×	×	×	×	145
～: counter()		カウンターの挿入	○	○	○	○	○	○	○	×	×	○	240
～: cross-fade()	CSS3	クロスフェード	○ 6	×	×	○ 6	○ 22	×	×	×	×	×	-
～: element()	CSS3	HTML要素の画像化	×	×	○	×	×	×	×	×	×	×	142
～: gradient()	拡張	グラデーションの表示	○	○	×	○	○	×	×	×	×	×	140
～: hsl()	CSS3	HSLカラーの指定	○	○	○	○	○	○	○	×	×	×	306
～: hsla()	CSS3	HSLAカラーの指定	○	○	○	○	○	○	○	×	×	×	306
～: image-set()	CSS3	レスポンシブイメージ	○ 6	×	×	○ 6	○ 22	×	×	×	×	×
～: linear-gradient()	CSS3	線形グラデーションの表示	○ 5	○ 4	△	○ 5.1	○	△ ／ ○ 12	△ ／ ○ 10	×	×	×	134
～: radial-gradient()	CSS3	円形グラデーションの表示	○ 5	○ 4	△	○ 5.1	○	○ 12	△ ／ ○ 10	×	×	×	136
～: repeating-linear-gradient()	CSS3	線形グラデーションの繰り返し	○ 5	○ 4	△	○ 5.1	○	△ ／ ○ 12	△ ／ ○ 10	×	×	×	138
～: repeating-radial-gradient()	CSS3	円形グラデーションの繰り返し	○ 5	○ 4	△	○ 5.1	○	○ 12	△ ／ ○ 10	×	×	×	139
～: rgb()		RGBカラーの指定	○	○	○	○	○	○	○	○	○	○	306
～: rgba()	CSS3	RGBAカラーの指定	○	○	○	○	○	○	○	×	×	×	306
～: image-rect()	拡張	画像の部分利用	×	×	○	×	×	×	×	×	×	×	150
animation	CSS3	アニメーションの指定	○	○	○ 5	○	○	×	○ 10	×	×	×	284
animation-delay	CSS3	アニメーションのディレイ	○	○	○ 5	○	○	×	○ 10	×	×	×	284
animation-direction	CSS3	アニメーションの方向	○	○	○ 5	○	○	×	○ 10	×	×	×	284
animation-duration	CSS3	アニメーションの再生時間	○	○	○ 5	○	○	×	○ 10	×	×	×	284
animation-fill-mode	CSS3	アニメーションのディレイ中と再生後の表示	○	○	○ 5	○	○	×	○ 10	×	×	×	291
animation-iteration-count	CSS3	アニメーションの繰り返し	○	○	○ 5	○	○	×	○ 10	×	×	×	284
animation-name	CSS3	アニメーションのキーフレーム名	○	○	○ 5	○	○	×	○ 10	×	×	×	284
animation-play-state	CSS3	アニメーションの再生と一時停止	○	○	○ 5	○	○	×	○ 10	×	×	×	290
animation-timing-function	CSS3	アニメーションの補間方法	○	○	○ 5	○	○	×	○ 10	×	×	×	284
appearance	CSS3	アピアランス	○	○	○	○	○	×	×	×	×	×	305
backface-visibility	CSS3	裏面の表示	○	○ 4	○ 15	○	○ 12	×	○ 10	×	×	×	276
background	CSS3	背景の指定	△	△	△	△	△	○	○	△	△	△	119
background-attachment	CSS3	背景画像の固定対象	△ ／ ○ 5	△	△	○	○	○	○	△	△	△	111
background-clip	CSS3	背景画像の表示エリア	△ ／ ○ 5	△ ／ ○ 4	○	△ ／ ○ 5.1	○	○	○	×	×	×	114
background-color		背景色	○	○	○	○	○	○	○	○	○	○	102
background-image	CSS3	背景画像	○	○	○	○	○	○	○	△	△	△	103
background-inline-policy	拡張	ボックスが途切れる場合の表示スタイル	×	×	△	×	×	×	×	×	×	×	131
background-origin	CSS3	背景画像の表示位置の基点	○	○	○	○	○	○	○	×	×	×	116
background-position	CSS3	背景画像の表示位置	△	△	△ ／ ○ 15	△	△	○	○	△	△	△	109
background-repeat	CSS3	背景画像の表示スタイル	△	△	△	△	△	○	○	△	△	△	106
background-size	CSS3	背景画像の表示サイズ	○	○	○	○	○	○	○	×	×	×	117
border		罫線の指定	○	○	○	○	○	○	○	△	△	○	122
border-collapse		テーブルの罫線の表示方法	○	○	○	○	○	○	○	△	△	○	249
border-color		罫線の色	○	○	○	○	○	○	○	○	○	○	122
border-end	拡張	書字方向に合わせた罫線の表示	×	×	△	×	×	×	×	×	×	×	129
border-image	CSS3	画像を使った罫線の表示	△	△	△	△	△	△	×	×	×	×	126
border-radius	CSS3	角丸の指定	○	○	○	○	○	○	○	×	×	×	124
border-spacing		テーブルの罫線の間隔	○	○	○	○	○	○	○	×	×	○	252
border-start	拡張	書字方向に合わせた罫線の表示	×	×	△	×	×	×	×	×	×	×	129
border-style		罫線のスタイル	○	○	○	○	○	○	○	△	△	○	122
border-top / border-right / border-bottom / border-left		各辺の罫線の指定	○	○	○	○	○	○	○	△	△	○	123
border-top-color / border-right-color / border-bottom-color /border-left-color		各辺の罫線の色	○	○	○	○	○	○	○	○	○	○	123
border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius	CSS3	各角の角丸の半径	○	○	○	○	○	○	○	×	×	×	125
border-top-style / border-right-style / border-bottom-style / border-left-style		各辺の罫線のスタイル	○	○	○	○	○	○	○	△	△	○	123
border-top-width / border-right-width / border-bottom-width / border-left-width		各辺の罫線の太さ	○	○	○	○	○	○	○	○	○	○	123
border-width		罫線の太さ	○	○	○	○	○	○	○	○	○	○	122
bottom		ポジショニング：基点の下辺からの距離	○	○	○	○	○	○	○	○	○	○	095
box-align	CSS3	flexboxアイテムの縦方向の揃え位置	△	△	△	△	△	×	○ 10	×	×	×	073
box-decoration-break	CSS3	ボックスが途切れる場合の表示スタイル	×	×	×	×	×	△	×	×	×	×	130
box-flex	CSS3	flexboxアイテムをスペースに合わせた大きさで表示	△	△	△	△	△	×	○ 10	×	×	×	073
box-ordinal-group	CSS3	flexboxアイテムの表示順	△	△	△	△	△	×	○ 10	×	×	×	073
box-orient	CSS3	flexboxアイテムを並べる方向	△	△	△	△	△	×	○ 10	×	×	×	073
box-pack	CSS3	flexboxアイテムの横方向の揃え位置	△	△	△	△	△	×	○ 10	×	×	×	073
box-reflect	拡張	鏡像の表示	○	○	×	○	○	×	×	×	×	×	294
box-shadow	CSS3	ボックスのドロップシャドウ	○	△ ／ ○ 4	○	○	○	○	○	×	×	×	132
box-sizing	CSS3	ボックスの大きさの算出方法	○	○	○	○	○	○	○	×	×	○	302
break-after	CSS3	マルチカラムの改段：ボックスの後での処理	△	△	×	△	△	○	○ 10	×	×	×	093
break-before	CSS3	マルチカラムの改段：ボックスの前での処理	△	△	×	△	△	○	○ 10	×	×	×	093
break-inside	CSS3	マルチカラムの改段：ボックス内での処理	△	△	×	△	△	○	○ 10	×	×	×	093
caption-side		テーブルのキャプションの表示位置	○	○	○	○	○	○	○	×	×	○	245
clear		回り込みの解除	○	○	○	○	○	○	○	○	○	○	064
clip		画像の切り抜き	○	○	○	○	○	○	○	△	△	○	244
color		文字の色	○	○	○	○	○	○	○	○	○	○	100
column-count	CSS3	マルチカラムの段の数	○	○	○	○	○	○	○ 10	×	×	×	087
column-fill	CSS3	マルチカラムの段のバランス	×	×	×	×	×	○	○ 10	×	×	×	092
column-gap	CSS3	マルチカラムの段の間隔	○	○	○	○	○	○	○ 10	×	×	×	089
column-rule	CSS3	マルチカラムの区切り線	○	○	○	○	○	○	○ 10	×	×	×	090
column-rule-color	CSS3	マルチカラムの区切り線の色	○	○	○	○	○	○	○ 10	×	×	×	090
column-rule-style	CSS3	マルチカラムの区切り線のスタイル	○	○	○	○	○	○	○ 10	×	×	×	090
column-rule-width	CSS3	マルチカラムの区切り線の太さ	○	○	○	○	○	○	○ 10	×	×	×	090
columns	CSS3	マルチカラムの段の数と横幅	○	○	×	○	○	○	○ 10	×	×	×	087
column-span	CSS3	マルチカラムの段にまたがる表示の指定	○	○	×	○	○	○	○ 10	×	×	×	091
column-width	CSS3	マルチカラムの段の横幅	○	○	○	○	○	○	○ 10	×	×	×	087
content	CSS3	コンテンツの挿入・置換	△	△	△	△	△	○	△	△	△	△	234
counter-increment		カウンターの増減値	○	○	○	○	○	○	○	×	×	○	240
counter-reset		カウンターの初期値	○	○	○	○	○	○	○	×	×	○	240
cursor	CSS3	カーソルの種類	○	○	○	○	○	○	○	△	△	△	305
direction		書字方向	○	○	○	○	○	○	○	○	○	○	220
display	CSS3	ボックスの種類	○	○	△	○	○	○	○	△	△	○	046
display	CSS3	フレキシブルボックスレイアウト	△	△	△	△	△	×	○ 10	×	×	×	071 解説
display	CSS3	グリッドレイアウト	×	×	×	×	×	×	○ 10	×	×	×	078
empty-cells		空セルの表示	○	○	○	○	○	○	○	×	×	○	253
filter	CSS3	フィルタ	○ 6	×	×	○ 6	○ 22	×	×	×	×	×
float		配置と回り込みの指定	○	○	○	○	○	○	○	○	○	○	061
flow-from	CSS3	リージョンの指定	×	×	×	×	△ 22	×	△ 10	×	×	×
flow-into	CSS3	リージョンに流し込むコンテンツの指定	×	×	×	×	△ 22	×	△ 10	×	×	×
font		文字のデザイン	○	○	○	○	○	○	○	○	○	○	170
font-family		フォント	○	○	○	○	○	○	○	○	○	○	160
font-feature-settings	CSS3	OpenTypeフォントの字形の切り替え	×	×	○	×	×	×	○ 10	×	×	×	157 解説
font-size	CSS3	文字の大きさ	○	○	○	○	○	○	○	○	○	○	154
font-size-adjust	CSS3	文字サイズの自動調節	×	×	○	×	×	×	×	×	×	×	172
font-smoothing	拡張	アンチエイリアス処理	○	×	×	○	○	×	×	×	×	×	209
font-style		斜体のスタイル	○	○	○	○	○	○	○	○	○	○	156
font-variant		字形	○	○	○	○	○	○	○	○	○	○	157
font-weight		文字の太さ	○	○	○	○	○	○	○	○	○	○	155
grid-column	CSS3	グリッドセルの指定	×	×	×	×	×	×	○ 10	×	×	×	078
grid-column-align	CSS3	グリッドアイテムの揃え位置	×	×	×	×	×	×	○ 10	×	×	×	085
grid-columns	CSS3	グリッドラインの指定	×	×	×	×	×	×	○ 10	×	×	×	078
grid-column-span	CSS3	複数のグリッドセルの指定	×	×	×	×	×	×	○ 10	×	×	×	078
grid-row	CSS3	グリッドセルの指定	×	×	×	×	×	×	○ 10	×	×	×	078
grid-row-align	CSS3	グリッドアイテムの揃え位置	×	×	×	×	×	×	○ 10	×	×	×	085
grid-rows	CSS3	グリッドラインの指定	×	×	×	×	×	×	○ 10	×	×	×	078
grid-row-span	CSS3	複数のグリッドセルの指定	×	×	×	×	×	×	○ 10	×	×	×	078
height		高さ	○	○	○	○	○	○	○	○	○	○	057
hyphens	CSS3	ハイフネーションの利用	△ 5 ／ ○ 6	△ 4	○ 6	△ 5.1 ／ ○ 6	△ 14	×	○ 10	×	×	×	184
image-rendering	CSS3	画像の拡大縮小のレンダリング処理	×	×	○	×	×	○ 12	×	×	×	×	151
interpolation-mode	拡張	画像の拡大縮小のレンダリング処理	×	×	×	×	×	×	○	×	×	×	152
left		ポジショニング：基点の左辺からの距離	○	○	○	○	○	○	○	○	○	○	095
letter-spacing		文字の間隔	○	○	○	○	○	○	○	○	○	○	192
line-break	CSS3	禁則処理のルール	×	×	×	×	×	×	△	△	△	△	180
line-height		行の高さ	○	○	○	○	○	○	○	○	○	○	210
list-style	CSS3	リストマークのデザイン	○	○	○	○	○	△	△	△	△	△	228
list-style-image		リストマークの画像	○	○	○	○	○	○	○	○	○	○	228
list-style-position		リストマークの表示位置	○	○	○	○	○	○	○	○	○	○	228
list-style-type	CSS3	リストマークの種類	○	○	○	○	○	△	△	△	△	△	228
margin		マージンの大きさ	○	○	○	○	○	○	○	○	○	○	051
margin-top / margin-right / margin-bottom / margin-left		各辺のマージンの大きさ	○	○	○	○	○	○	○	○	○	○	052
marquee-direction	CSS3	マーキーの動きの方向	○	○	×	○	○	○	×	×	×	×	068
marquee-play-count	CSS3	マーキーの繰り返しの回数	△	△	×	△	△	△	×	×	×	×	068
marquee-speed	CSS3	マーキーの動きのスピード	○	○	×	○	○	○	×	×	×	×	068
marquee-style	CSS3	マーキーの動きのスタイル	○	○	×	○	○	○	×	×	×	×	068
mask	拡張	マスクの指定	○	○	×	○	○	×	×	×	×	×	293
mask-attachment	拡張	マスク画像の固定対象	○	○	×	○	○	×	×	×	×	×	293
mask-box-image	拡張	マスク画像の指定	○	○	×	○	○	×	×	×	×	×	293
mask-clip	拡張	マスク画像の表示エリア	○	○	×	○	○	×	×	×	×	×	293
mask-image	拡張	マスク画像の指定	○	○	×	○	○	×	×	×	×	×	293
mask-origin	拡張	マスク画像の基点の位置	○	○	×	○	○	×	×	×	×	×	293
mask-position	拡張	マスク画像の表示位置	○	○	×	○	○	×	×	×	×	×	293
mask-repeat	拡張	マスク画像の表示スタイル	○	○	×	○	○	×	×	×	×	×	293
mask-size	拡張	マスク画像の大きさ	○	○	×	○	○	×	×	×	×	×	293
max-height		高さの最大値	○	○	○	○	○	○	○	×	○	○	059
max-width		横幅の最大値	○	○	○	○	○	○	○	×	○	○	059
min-height		高さの最小値	○	○	○	○	○	○	○	×	○	○	059
min-width		横幅の最小値	○	○	○	○	○	○	○	×	○	○	059
nbsp-mode	拡張	ノーブレークスペースの処理	○	○	×	○	○	×	×	×	×	×	184
object-fit	CSS3	ボックスに合わせた画像サイズの調節	×	×	×	×	×	○	×	×	×	×	146
object-position	CSS3	ボックス内での画像の表示位置	×	×	×	×	×	○	×	×	×	×	148
opacity		透明度	○	○	○	○	○	○	○	×	×	×	101
orient	拡張	プログレスバーの向き	×	×	○ 6	×	×	×	×	×	×	×	-
orphans		ページの末尾に最小限必要な行数	×	×	×	×	×	○	○	×	×	○	044
outline		アウトラインの表示	○	○	○	○	○	○	○	×	×	○	300
outline-color		アウトラインの色	○	○	○	○	○	○	○	×	×	○	300
outline-offset	CSS3	アウトラインのオフセット	○	○	○	○	○	○	×	×	×	×	300
outline-style		アウトラインのスタイル	○	○	○	○	○	○	○	×	×	○	300
outline-width		アウトラインの太さ	○	○	○	○	○	○	○	×	×	○	300
overflow		オーバーフローしたコンテンツの表示	○	○	○	○	○	○	○	△	○	○	065
overflow-scrolling	拡張	スクロールバーの表示	○ 5	×	×	×	×	×	×	×	×	×
overflow-x	CSS3	横方向にオーバーフローしたコンテンツの表示	○	○	○	○	○	○	○	△	○	○	066
overflow-y	CSS3	縦方向にオーバーフローしたコンテンツの表示	○	○	○	○	○	○	○	△	○	○	066
padding		パディングの大きさ	○	○	○	○	○	○	○	○	○	○	056
padding-top / padding-right / padding-bottom / padding-left		各辺のパディングの大きさ	○	○	○	○	○	○	○	○	○	○	056
page-break-after		改ページの指定：ボックスの後での処理	△	△	△	△	△	△	△	△	△	△	042
page-break-before		改ページの指定：ボックスの前での処理	△	△	△	△	△	△	△	△	△	△	042
page-break-inside		改ページの指定：ボックス内での処理	△	△	△	△	△	△	△	△	△	△	042
perspective	CSS3	子要素の透視投影	○	○ 3.2	○ 15	○	○ 12	×	○ 10	×	×	×	273 解説
perspective-origin	CSS3	投影中心のx軸・y軸方向の位置	○	○ 3.2	○ 15	○	○ 12	×	○ 10	×	×	×	274
position		ポジショニングによる位置指定	△ ／ ○ 5	△ ／ ○ 3	○	○	○	○	○	△	○	○	095
position	CSS3	ポジショニング：「page」による位置指定	×	×	×	×	×	×	○ 10	×	×	×
quotes		引用符の指定	○ 5	○ 4	○	○ 5.1	○	○	○	×	×	○	243
resize	CSS3	ボックスのリサイズ	×	×	○	○	○	×	×	×	×	×	304
right		ポジショニング：基点の右辺からの距離	○	○	○	○	○	○	○	○	○	○	095
ruby-align	CSS3	ルビの位置揃え	×	×	×	×	×	×	△	△	△	△	226
ruby-position	CSS3	ルビの表示位置	×	×	×	×	×	×	△	△	△	△	225
table-layout		テーブルの表示方法	○	○	○	○	○	○	○	○	○	○	246
tab-size	CSS3	タブ幅	×	×	×	×	×	○	×	×	×	×	179
tap-highlight-color	拡張	ハイライト表示の指定	○	△ ／ ○ 3.2	×	×	×	×	×	×	×	×	030
text-align	CSS3	行揃え	△	△	△	△	△	△	△	△	△	△	185
text-align-last		行揃え	×	×	○ 15	×	×	×	△	△	△	△	190
text-autospace	CSS3	数字やアルファベットの前後の余白の処理	×	×	×	×	×	×	△	△	△	△	193
text-decoration		下線・上線・取り消し線の表示	△ ／ ○ 5	○	△	△ ／ ○ 5.1	○	○	○	○	○	○	197
text-decoration-line	CSS3	下線・上線・取り消し線の種類	×	×	○ 6	×	×	×	×	×	×	×	198
text-decoration-color	CSS3	下線・上線・取り消し線の色	×	×	○ 6	×	×	×	×	×	×	×	198
text-decoration-style	CSS3	下線・上線・取り消し線のスタイル	×	×	○ 6	×	×	×	×	×	×	×	198
text-emphasis	CSS3	圏点の指定	○ 5	○ 4	×	○ 5.1	○	×	×	×	×	×	201
text-emphasis-color	CSS3	圏点の色	○ 5	○ 4	×	○ 5.1	○	×	×	×	×	×	201
text-emphasis-position	CSS3	圏点の表示位置	○ 5	○ 4	×	△ 5.1	△	×	×	×	×	×	203
text-emphasis-style	CSS3	圏点のスタイル	○ 5	○ 4	×	○ 5.1	○	×	×	×	×	×	201
text-fill-color	拡張	文字の色	○	○	×	○	○	×	×	×	×	×	207
text-indent		１行目のインデント	○	○	○	○	○	○	○	○	○	○	195
text-justify	CSS3	両端揃えの調節方法	×	×	×	×	×	×	△	△	△	△	188
text-overflow	CSS3	オーバーフローしたテキストの省略表示	△	△	△ 7	△	△	△	△	△	△	△
text-rendering	拡張	欧文のレンダリング処理	○	○	○	○	○	×	×	×	×	×	208
text-shadow	CSS3	文字のドロップシャドウ	○	△ ／ ○ 3.2	○	○	○	○	○ 10	×	×	×	204
text-size-adjust	拡張	iOS Mobile Safariの文字サイズの自動調節	○	×	×	×	×	×	×	×	×	×	174
text-stroke	拡張	文字のアウトライン	○	○	×	○	○	×	×	×	×	×	206
text-stroke-color	拡張	文字のアウトラインの色	○	○	×	○	○	×	×	×	×	×	206
text-stroke-width	拡張	文字のアウトラインの太さ	○	○	×	○	○	×	×	×	×	×	206
text-transform		字形の変換	○	○	○	○	○	○	○	○	○	○	176
text-underline-position	CSS3	下線の表示位置	×	×	×	×	×	×	△	△	△	△	199
top		ポジショニング：基点の上辺からの距離	○	○	○	○	○	○	○	○	○	○	095
touch-callout	拡張	ポップアップメニューを隠す	○	×	×	×	×	×	×	×	×	×	030
transform	CSS3	2Dトランスフォーム	○	○	○	○	○	○	○	×	×	×	256
transform	CSS3	3Dトランスフォーム	○	○ 3	○ 15	○	△ ／ ○ 12	×	○ 10	×	×	×	262 解説
transform-origin	CSS3	2Dトランスフォームの原点	○	○	○	○	○	○	○	×	×	×	260
transform-origin	CSS3	3Dトランスフォームの原点	○	○ 3	○ 15	○	○	×	○ 10	×	×	×	269
transform-style	CSS3	子要素の3Dトランスフォーム	○	○ 3.2	○ 15	○	○ 12	×	×	×	×	×	272
transition	CSS3	トランジションの指定	○	○	○	○	○	○	○ 10	×	×	×	279
transition-delay	CSS3	トランジションのディレイ	○	○	○	○	○	○	○ 10	×	×	×	279
transition-duration	CSS3	トランジションの再生時間	○	○	○	○	○	○	○ 10	×	×	×	279
transition-property	CSS3	トランジションさせるプロパティ	○	○	○	○	○	○	○ 10	×	×	×	279
transition-timing-function	CSS3	トランジションの補間方法	○	○	○	○	○	○	○ 10	×	×	×	279
unicode-bidi		双方向アルゴリズムの変更	○	○	○	○	○	○	○	○	○	○	221
vertical-align		インライン要素の位置揃え	○	○	○	○	○	○	○	△	△	○	216
visibility		表示の有無	△	△	○	△	△	○	○	△	△	△	069
white-space		改行コード・タブ・スペースの表示	○	○	○	○	○	○	○	△	△	○	177
widows		ページの先頭に最小限必要な行数	×	×	×	×	×	○	○	×	×	○	044
width		横幅	○	○	○	○	○	○	○	○	○	○	057
word-break	CSS3	自動改行のルール	△	△	×	△	△	×	△	△	△	△	181
word-spacing		単語の間隔	○	○	○	○	○	○	○	○	○	○	191
word-wrap		長い単語の改行ルール	○	○	○	○	○	○	○	○	○	○	182
wrap-flow	CSS3	除外	×	×	×	×	×	×	△ 10	×	×	×
wrap-margin	CSS3	除外	×	×	×	×	×	×	△ 10	×	×	×
writing-mode	CSS3	縦書き・横書きの指定	○ 5	△	×	△ 5.1	△	×	△	△	△	△	222
z-index		ボックスの重なり順	○	○	○	○	○	○	○	○	○	○	098

更新内容

（※最終更新日 2012年10月1日）

iOS5 がサポートしたCSS3

～: linear-gradient() / ～: radial-gradient()
～: repeating-linear-gradient() / ～: repeating-radial-gradient()
background-clip（content-boxの指定に対応）
quotes
text-decoration（画像部分の下線を正しく表示）
text-emphasis / text-emphasis-color / text-emphasis-position / text-emphasis-style
writing-mode（縦書き用フォントの指定なしで縦書きに対応）
position:fixed に対応
overflow:scroll のスクロール方法が変更
-webkit-overflow-scrolling: touch に対応

iOS6がサポートしたCSS3

clac()
hyphens（autoの指定に対応）
フィルタ：filter
クロスフェード：cross-fade()
レスポンシブイメージ：image-set()

Android 3.2 がサポートしたCSS3

text-shadow（SAMPLE Aの表示をサポート）
transform-style
perspective
perspective-origin

Android 4／4.1がサポートしたCSS3

～: linear-gradient() / ～: radial-gradient()
～: repeating-linear-gradient() / ～: repeating-radial-gradient()
backface-visibility
background-clip（content-boxの指定に対応）
box-shadow（SAMPLE AとSAMPLE Dで発生していた問題が解決）
hyphens（noneとmanualの指定に対応）
quotes
text-emphasis / text-emphasis-color / text-emphasis-position / text-emphasis-style

Firefox 5 がサポートしたCSS3

@keyfrmaes / animation / animation-delay / animation-direction / animation-duration / animation-fill-mode / animation-iteration-count / animation-name / animation-play-state / animation-timing-function

Firefox 6 がサポートしたCSS3

text-decoration-line / text-decoration-color / text-decoration-style
hyphens
orient

Firefox 7 がサポートしたCSS3

text-overflow

Firefox 8～15がサポートしたCSS3

transform / transform-origin / transform-style
perspective / perspective-origin » 解説
backface-visibility
background-position（SAMPLE Cの記述：「横の辺横の表示位置縦の辺縦の表示位置」に対応）
tab-size
text-align-last

Safari 5.1 がサポートしたプロパティ

～: linear-gradient() / ～: radial-gradient()
～: repeating-linear-gradient() / ～: repeating-radial-gradient()
background-clip（content-boxの指定に対応）
quotes
text-decoration（画像部分の下線を正しく表示）
text-emphasis / text-emphasis-color / text-emphasis-position / text-emphasis-style
writing-mode

Safari 6がサポートしたCSS3

clac()
hyphens（autoの指定に対応）
フィルタ：filter
クロスフェード：cross-fade()
レスポンシブイメージ：image-set()

Chrome 12 がサポートしたCSS3

transform（perspective()をサポート）
transform-style
perspective / perspective-origin
backface-visibility

Chrome 14 がサポートしたCSS3

hyphens

Chrome 15～22がサポートしたCSS3

clac()
tab-size
font-feature-settings » 解説
フィルタ：filter
クロスフェード：cross-fade()
レスポンシブイメージ：image-set()
Regions（リージョン／領域）

Opera 12がサポートしたCSS3

@keyfrmaes / animation / animation-delay / animation-direction / animation-duration / animation-fill-mode / animation-iteration-count / animation-name / animation-play-state / animation-timing-function
～: radial-gradient() / ～: repeating-radial-gradient()
グラデーション（linear-gradient()など）のbackground-image以外のプロパティでの利用に対応
image-rendering（-o-crisp-edgesの指定に対応）

IE10 がサポートしたCSS3

~~float: positioned~~
~~flow-wrap~~
position: page
@keyfrmaes / animation / animation-delay / animation-direction / animation-duration / animation-fill-mode / animation-iteration-count / animation-name / animation-play-state / animation-timing-function
hyphens
hyphenate-limit-zone / hyphenate-limit-chars / hyphenate-limit-lines
text-shadow（スプレッドの指定にも対応）
transform / transform-origin
backface-visibility
transition / transition-delay / transition-duration / transition-property / transition-timing-function
グラデーション（linear-gradient()など）のbackground-image以外のプロパティでの利用に対応
font-feature-settings » 解説
transformのperspective()
perspective / perspective-origin » 解説
Region（リージョン／領域）
Exclusions（エクスクルージョン／除外）

その他

@charset
text-overflow

仕様変更

3Dトランスフォーム：
perspective()関数とperspectiveプロパティの値

3Dトランスフォーム（P.262）のperspective()関数とperspectiveプロパティの値は、執筆時の草案「CSS 3D Transforms Module Level 3」では単位なしで指定することになっていましたが、現行の草案「CSS Transforms」では単位をつけて指定するように修正されています。

そのため、サンプルで「perspective(500)」や「perspective: 500」と指定している箇所は、「perspective(500px)」「perspective: 500px」と修正して利用してください。
WebKit系のブラウザでは単位なしでも機能しますが、FirefoxとIE10では「px」の指定が必要です。

フレキシブルボックスレイアウトについて

フレキシブルボックスレイアウト（P.071）のプロパティ名や値は、草案の策定過程で変更されています。

2009年7月にリリースされた草案
書籍に掲載した仕様で、displayの値を「box」「inline-box」と指定します。この仕様に対応しているのはiOS4以上、Android2.3.x以上、Firefox、Safari、Chromeです。IE10はPlatform Preview版までは対応していましたが、最終的に非対応となっています。
2011年3月～2012年3月にリリースされた草案
書籍の注釈に「2011年3月リリースの草案では～」という形で記載した仕様で、displayの値を「flexbox」「inline-flexbox」と指定します。この仕様にはIE10が対応しています。また、iOS6がベータ3までは対応していましたが、最終的に非対応となっています。
2012年9月18日にリリースされた勧告候補
最新の仕様で、displayの値は「flex」「inline-flex」と指定します。Chrome 22が対応しています。

font-feature-settingsの値について

OpenTypeフォントの字形を切り替えるfont-feature-settings（P.157）の値は、Firefox 4では「’タグ名=1′」という形で記述していました。しかし、Firefox 15では最新のEditor’s Draft「CSS Fonts Module Level 3」に従い、「’タグ名’ 1」という形で指定するようになっています。また、この値の記述形式でChrome 22とIE10でもfont-feature-settingsがサポートされています。