MEMO メモ

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

「CSS3 スタンダード・デザインガイド」の巻末に掲載したCSS3のプロパティ＆ブラウザ対応一覧です。ここでは各ブラウザの最新バージョンの対応状況を追加していきます。

※最終更新日 2011年10月13日：
　iOS5の情報を追加 » 更新内容

CSS3
CSS3で新しく追加されたプロパティ。
CSS3
CSS2.1からのプロパティで、CSS3で機能が追加されたもの。
拡張
ブラウザが拡張したプロパティでW3Cの規格に未掲載のもの。
○
対応（○は要ベンダープレフィックス）。
△
部分対応（△は要ベンダープレフィックス）。
×
未対応。
iOS
iOS4.3のMobile Safari（iOS5）
Android
Android 2.3/3.0/3.1の標準ブラウザ（バージョン3.2）
Firefox
Firefox 4（バージョン5～7）
Safari
Safari 5.0.5（バージョン5.1）
Chrome
Chrome 11（バージョン12～14）
Opera
Opera 11.10
Internet Explorer
Internet Explorer 9（バージョン10 PP1～PP3）
※カッコ（）内は書籍に未掲載のバージョンで、
　以下の表中にはバージョン数を記載しています。
IE6
IE6
IE7
IE7
IE8
IE8
参照
書籍掲載ページ。
プロパティ名 CSS3 機能 iOS Android Firefox Safari Chrome Opera Internet Explorer IE6 IE7 IE8 参照
@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 計算結果を値として利用 × × ○ × × × ○ × × × 306
～: canvas() 拡張 Canvasの機能で描画した画像の利用 ○ ○ × ○ ○ × × × × × 145
～: counter()   カウンターの挿入 ○ ○ ○ ○ ○ ○ ○ × × ○ 240
～: element() CSS3 HTML要素の画像化 × × ○ × × × × × × × 142
～: gradient() 拡張 グラデーションの表示 ○ ○ × ○ ○ × × × × × 140
～: hsl() CSS3 HSLカラーの指定 ○ ○ ○ ○ ○ ○ ○ × × × 306
～: hsla() CSS3 HSLAカラーの指定 ○ ○ ○ ○ ○ ○ ○ × × × 306
～: linear-gradient() CSS3 線形グラデーションの表示 ○
5		 × △ ○
5.1		 ○ △ ○
10		 × × × 134
～: radial-gradient() CSS3 円形グラデーションの表示 ○
5		 × △ ○
5.1		 ○ × ○
10		 × × × 136
～: repeating-linear-gradient() CSS3 線形グラデーションの繰り返し ○
5		 × △ ○
5.1		 ○ △ ○
10		 × × × 138
～: repeating-radial-gradient() CSS3 円形グラデーションの繰り返し ○
5		 × △ ○
5.1		 ○ × ○
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 裏面の表示 ○ × × ○ ○
12		 × ○
10		 × × × 276
background CSS3 背景の指定 △ △ △ △ △ ○ ○ △ △ △ 119
background-attachment CSS3 背景画像の固定対象 △ △ △ ○ ○ ○ ○ △ △ △ 111
background-clip CSS3 背景画像の表示エリア △
／
○
5		 △ ○ △
／
○
5.1		 ○ ○ ○ × × × 114
background-color   背景色 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 102
background-image CSS3 背景画像 ○ ○ ○ ○ ○ ○ ○ △ △ △ 103
background-inline-policy 拡張 ボックスが途切れる場合の表示スタイル × × △ × × × × × × × 131
background-origin CSS3 背景画像の表示位置の基点 ○ ○ ○ ○ ○ ○ ○ × × × 116
background-position CSS3 背景画像の表示位置 △ △ △ △ △ ○ ○ △ △ △ 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 ボックスのドロップシャドウ ○ △ ○ ○ ○ ○ ○ × × × 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
float   配置と回り込みの指定 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 061
float CSS3 Positioned Floats：位置指定した要素に対する回り込みの指定 × × × × × × ○
10		 × × × 解説
flow-from CSS3 リージョンの指定 × × × × × × △
10		 × × × 解説
flow-into CSS3 リージョンに流し込むコンテンツの指定 × × × × × × △
10		 × × × 解説
flow-wrap CSS3 positioned float要素に対する回り込みの解除 × × × × × × ○
10		 × × × 解説
font   文字のデザイン ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 170
font-family   フォント ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 160
font-feature-settings CSS3 OpenTypeフォントの字形の切り替え × × ○ × × × × × × × 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 ハイフネーションの利用 × × ○
6		 × △
14		 × ○
10		 × × × 184
解説
image-rendering CSS3 画像の拡大縮小のレンダリング処理 × × ○ × × × × × × × 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		 × ○ ○
12		 × × × × × 273
perspective-origin CSS3 投影中心のx軸・y軸方向の位置 ○ ○
3.2		 × ○ ○
12		 × × × × × 274
position   ポジショニングによる位置指定 △
／
○
5		 △ ○ ○ ○ ○ ○ △ ○ ○ 095
position CSS3 ポジショニング：「page」による位置指定 × × × × × × ○
10		 × × × 解説
quotes   引用符の指定 ○
5		 × ○ ○
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 拡張 ハイライト表示の指定 ○ △ × × × × × × × × 030
text-align CSS3 行揃え △ △ △ △ △ △ △ △ △ △ 185
text-align-last   行揃え × × × × × × △ △ △ △ 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		 × × ○
5.1		 ○ × × × × × 201
text-emphasis-color CSS3 圏点の色 ○
5		 × × ○
5.1		 ○ × × × × × 201
text-emphasis-position CSS3 圏点の表示位置 ○
5		 × × △
5.1		 △ × × × × × 203
text-emphasis-style CSS3 圏点のスタイル ○
5		 × × ○
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トランスフォーム ○ △ × ○ △
／
○
12		 × △
10		 × × × 262
transform-origin CSS3 2Dトランスフォームの原点 ○ ○ ○ ○ ○ ○ ○ × × × 260
transform-origin CSS3 3Dトランスフォームの原点 ○ △ × ○ ○ × △
10		 × × × 269
transform-style CSS3 子要素の3Dトランスフォーム ○ ○
3.2		 × ○ ○
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
writing-mode CSS3 縦書き・横書きの指定 ○
5		 △ × △
5.1		 △ × △ △ △ △ 222
z-index   ボックスの重なり順 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 098

更新内容

（※最終更新日 2011年10月13日：iOS5 の情報を追加）

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 に対応 » 解説

Android 3.2 がサポートしたCSS3

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

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

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

Chrome 12 がサポートしたCSS3

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

Chrome 14 がサポートしたCSS3

IE10 PP2 がサポートしたCSS3

IE10 PP3 がサポートしたプロパティ

  • @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（perspective()には未対応）
  • backface-visibility
  • transition / transition-delay / transition-duration / transition-property / transition-timing-function
  • リージョンレイアウト： flow-into / flow-from » 解説

その他

  • CSS3 は策定中の規格であり、機能や使い方、ブラウザの対応状況などは変わる可能性がありますのでご了承ください。
  • iOSについては、SDKおよび、iPod、iPadを利用して表示を確認しています。
  • Androidについては、SDKおよび、MOTOROLA XOOMを利用して表示を確認しています。
  • 各プロパティについては「CSS3 スタンダード・デザインガイド」を参照してください。

« »