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

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

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

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

CSS3
CSS3で新しく追加されたプロパティ。
CSS3
CSS2.1からのプロパティで、CSS3で機能が追加されたもの。
拡張
ブラウザが拡張したプロパティでW3Cの規格に未掲載のもの。
対応(は要ベンダープレフィックス)。
部分対応(は要ベンダープレフィックス)。
×
未対応。
iOS
iOS4.3のMobile Safari(iOS5、iOS6)
Android
Android 2.3/3.0/3.1の標準ブラウザ(バージョン3.2、4.x)
Firefox
Firefox 4(バージョン5~7、~15)
Safari
Safari 5.0.5(バージョン5.1、6)
Chrome
Chrome 11(バージョン12~14、~22)
Opera
Opera 11.10(バージョン12)
Internet Explorer
Internet Explorer 9(バージョン10)
※カッコ()内は書籍に未掲載のバージョンで、
 以下の表中にはバージョン数を記載しています。
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 1ページ目の設定 × × 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   1行目のインデント 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

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

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(エクスクルージョン/除外) » 解説

その他

仕様変更

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)のプロパティ名や値は、草案の策定過程で変更されています。

  1. 2009年7月にリリースされた草案
    書籍に掲載した仕様で、displayの値を「box」「inline-box」と指定します。この仕様に対応しているのはiOS4以上、Android2.3.x以上、Firefox、Safari、Chromeです。IE10はPlatform Preview版までは対応していましたが、最終的に非対応となっています。

  2. 2011年3月~2012年3月にリリースされた草案
    書籍の注釈に「2011年3月リリースの草案では~」という形で記載した仕様で、displayの値を「flexbox」「inline-flexbox」と指定します。この仕様にはIE10が対応しています。また、iOS6がベータ3までは対応していましたが、最終的に非対応となっています。

  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がサポートされています。