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

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

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機能iOSAndroidFirefoxSafariChromeOperaInternet ExplorerIE6IE7IE8参照
@charset エンコードの種類の指定-
@font-faceCSS3Webフォント162
@import 外部スタイルシートファイルのインポート××032
@keyframesCSS3アニメーションのキーフレームの指定
5
×
10
×××284
@mediaCSS3メディアクエリ036
@namespaceCSS3名前空間の指定×××254
@page ページメディアの設定××040
@page:firstCSS31ページ目の設定××040
@page:leftCSS3左ページの設定××040
@page:rightCSS3右ページの設定××040
~: calc()CSS3計算結果を値として利用
6
×
6

22
××××306
~: canvas()拡張Canvasの機能で描画した画像の利用××××××145
~: counter() カウンターの挿入××240
~: cross-fade()CSS3クロスフェード
6
××
6

22
×××××解説
~: element()CSS3HTML要素の画像化×××××××××142
~: gradient()拡張グラデーションの表示××××××140
~: hsl()CSS3HSLカラーの指定×××306
~: hsla()CSS3HSLAカラーの指定×××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()CSS3RGBAカラーの指定×××306
~: image-rect()拡張画像の部分利用×××××××××150
animationCSS3アニメーションの指定
5
×
10
×××284
animation-delayCSS3アニメーションのディレイ
5
×
10
×××284
animation-directionCSS3アニメーションの方向
5
×
10
×××284
animation-durationCSS3アニメーションの再生時間
5
×
10
×××284
animation-fill-modeCSS3アニメーションのディレイ中と再生後の表示
5
×
10
×××291
animation-iteration-countCSS3アニメーションの繰り返し
5
×
10
×××284
animation-nameCSS3アニメーションのキーフレーム名
5
×
10
×××284
animation-play-stateCSS3アニメーションの再生と一時停止
5
×
10
×××290
animation-timing-functionCSS3アニメーションの補間方法
5
×
10
×××284
appearanceCSS3アピアランス×××××305
backface-visibilityCSS3裏面の表示
4

15

12
×
10
×××276
backgroundCSS3背景の指定119
background-attachmentCSS3背景画像の固定対象


5
111
background-clipCSS3背景画像の表示エリア


5



4



5.1
×××114
background-color 背景色102
background-imageCSS3背景画像103
background-inline-policy拡張ボックスが途切れる場合の表示スタイル×××××××××131
background-originCSS3背景画像の表示位置の基点×××116
background-positionCSS3背景画像の表示位置


15
109
background-repeatCSS3背景画像の表示スタイル106
background-sizeCSS3背景画像の表示サイズ×××117
border 罫線の指定122
border-collapse テーブルの罫線の表示方法249
border-color 罫線の色122
border-end拡張書字方向に合わせた罫線の表示×××××××××129
border-imageCSS3画像を使った罫線の表示××××126
border-radiusCSS3角丸の指定×××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-radiusCSS3各角の角丸の半径×××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-alignCSS3flexboxアイテムの縦方向の揃え位置×
10
×××073
box-decoration-breakCSS3ボックスが途切れる場合の表示スタイル×××××××××130
box-flexCSS3flexboxアイテムをスペースに合わせた大きさで表示×
10
×××073
box-ordinal-groupCSS3flexboxアイテムの表示順×
10
×××073
box-orientCSS3flexboxアイテムを並べる方向×
10
×××073
box-packCSS3flexboxアイテムの横方向の揃え位置×
10
×××073
box-reflect拡張鏡像の表示××××××294
box-shadowCSS3ボックスのドロップシャドウ


4
×××132
box-sizingCSS3ボックスの大きさの算出方法××302
break-afterCSS3マルチカラムの改段:ボックスの後での処理×
10
×××093
break-beforeCSS3マルチカラムの改段:ボックスの前での処理×
10
×××093
break-insideCSS3マルチカラムの改段:ボックス内での処理×
10
×××093
caption-side テーブルのキャプションの表示位置××245
clear 回り込みの解除064
clip 画像の切り抜き244
color 文字の色100
column-countCSS3マルチカラムの段の数
10
×××087
column-fillCSS3マルチカラムの段のバランス×××××
10
×××092
column-gapCSS3マルチカラムの段の間隔
10
×××089
column-ruleCSS3マルチカラムの区切り線
10
×××090
column-rule-colorCSS3マルチカラムの区切り線の色
10
×××090
column-rule-styleCSS3マルチカラムの区切り線のスタイル
10
×××090
column-rule-widthCSS3マルチカラムの区切り線の太さ
10
×××090
columnsCSS3マルチカラムの段の数と横幅×
10
×××087
column-spanCSS3マルチカラムの段にまたがる表示の指定×
10
×××091
column-widthCSS3マルチカラムの段の横幅
10
×××087
contentCSS3コンテンツの挿入・置換234
counter-increment カウンターの増減値××240
counter-reset カウンターの初期値××240
cursorCSS3カーソルの種類305
direction 書字方向220
displayCSS3ボックスの種類046
displayCSS3フレキシブルボックスレイアウト×
10
×××071
解説
displayCSS3グリッドレイアウト××××××
10
×××078
empty-cells 空セルの表示××253
filterCSS3フィルタ
6
××
6

22
×××××解説
float 配置と回り込みの指定061
flow-fromCSS3リージョンの指定××××
22
×
10
×××解説
flow-intoCSS3リージョンに流し込むコンテンツの指定××××
22
×
10
×××解説
font 文字のデザイン170
font-family フォント160
font-feature-settingsCSS3OpenTypeフォントの字形の切り替え×××××
10
×××157
解説
font-sizeCSS3文字の大きさ154
font-size-adjustCSS3文字サイズの自動調節×××××××××172
font-smoothing拡張アンチエイリアス処理×××××××209
font-style 斜体のスタイル156
font-variant 字形157
font-weight 文字の太さ155
grid-columnCSS3グリッドセルの指定××××××
10
×××078
grid-column-alignCSS3グリッドアイテムの揃え位置××××××
10
×××085
grid-columnsCSS3グリッドラインの指定××××××
10
×××078
grid-column-spanCSS3複数のグリッドセルの指定××××××
10
×××078
grid-rowCSS3グリッドセルの指定××××××
10
×××078
grid-row-alignCSS3グリッドアイテムの揃え位置××××××
10
×××085
grid-rowsCSS3グリッドラインの指定××××××
10
×××078
grid-row-spanCSS3複数のグリッドセルの指定××××××
10
×××078
height 高さ057
hyphensCSS3ハイフネーションの利用
5


6

4

6

5.1


6

14
×
10
×××184
解説
image-renderingCSS3画像の拡大縮小のレンダリング処理××××
12
××××151
interpolation-mode拡張画像の拡大縮小のレンダリング処理×××××××××152
left ポジショニング:基点の左辺からの距離095
letter-spacing 文字の間隔192
line-breakCSS3禁則処理のルール××××××180
line-height 行の高さ210
list-styleCSS3リストマークのデザイン228
list-style-image リストマークの画像228
list-style-position リストマークの表示位置228
list-style-typeCSS3リストマークの種類228
margin マージンの大きさ051
margin-top / margin-right / margin-bottom / margin-left 各辺のマージンの大きさ052
marquee-directionCSS3マーキーの動きの方向×××××068
marquee-play-countCSS3マーキーの繰り返しの回数×××××068
marquee-speedCSS3マーキーの動きのスピード×××××068
marquee-styleCSS3マーキーの動きのスタイル×××××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-fitCSS3ボックスに合わせた画像サイズの調節×××××××××146
object-positionCSS3ボックス内での画像の表示位置×××××××××148
opacity 透明度×××101
orient拡張プログレスバーの向き××
6
×××××××-
orphans ページの末尾に最小限必要な行数×××××××044
outline アウトラインの表示××300
outline-color アウトラインの色××300
outline-offsetCSS3アウトラインのオフセット××××300
outline-style アウトラインのスタイル××300
outline-width アウトラインの太さ××300
overflow オーバーフローしたコンテンツの表示065
overflow-scrolling拡張スクロールバーの表示
5
×××××××××解説
overflow-xCSS3横方向にオーバーフローしたコンテンツの表示066
overflow-yCSS3縦方向にオーバーフローしたコンテンツの表示066
padding パディングの大きさ056
padding-top / padding-right / padding-bottom / padding-left 各辺のパディングの大きさ056
page-break-after 改ページの指定:ボックスの後での処理042
page-break-before 改ページの指定:ボックスの前での処理042
page-break-inside 改ページの指定:ボックス内での処理042
perspectiveCSS3子要素の透視投影
3.2

15

12
×
10
×××273
解説
perspective-originCSS3投影中心のx軸・y軸方向の位置
3.2

15

12
×
10
×××274
position ポジショニングによる位置指定


5



3
095
positionCSS3ポジショニング:「page」による位置指定××××××
10
×××解説
quotes 引用符の指定
5

4

5.1
××243
resizeCSS3ボックスのリサイズ×××××××304
right ポジショニング:基点の右辺からの距離095
ruby-alignCSS3ルビの位置揃え××××××226
ruby-positionCSS3ルビの表示位置××××××225
table-layout テーブルの表示方法246
tab-sizeCSS3タブ幅×××××××××179
tap-highlight-color拡張ハイライト表示の指定


3.2
××××××××030
text-alignCSS3行揃え185
text-align-last 行揃え××
15
×××190
text-autospaceCSS3数字やアルファベットの前後の余白の処理××××××193
text-decoration 下線・上線・取り消し線の表示


5



5.1
197
text-decoration-lineCSS3下線・上線・取り消し線の種類××
6
×××××××198
text-decoration-colorCSS3下線・上線・取り消し線の色××
6
×××××××198
text-decoration-styleCSS3下線・上線・取り消し線のスタイル××
6
×××××××198
text-emphasisCSS3圏点の指定
5

4
×
5.1
×××××201
text-emphasis-colorCSS3圏点の色
5

4
×
5.1
×××××201
text-emphasis-positionCSS3圏点の表示位置
5

4
×
5.1
×××××203
text-emphasis-styleCSS3圏点のスタイル
5

4
×
5.1
×××××201
text-fill-color拡張文字の色××××××207
text-indent 1行目のインデント195
text-justifyCSS3両端揃えの調節方法××××××188
text-overflowCSS3オーバーフローしたテキストの省略表示
7
解説
text-rendering拡張欧文のレンダリング処理×××××208
text-shadowCSS3文字のドロップシャドウ


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-positionCSS3下線の表示位置××××××199
top ポジショニング:基点の上辺からの距離095
touch-callout拡張ポップアップメニューを隠す×××××××××030
transformCSS32Dトランスフォーム×××256
transformCSS33Dトランスフォーム
3

15



12
×
10
×××262
解説
transform-originCSS32Dトランスフォームの原点×××260
transform-originCSS33Dトランスフォームの原点
3

15
×
10
×××269
transform-styleCSS3子要素の3Dトランスフォーム
3.2

15

12
×××××272
transitionCSS3トランジションの指定
10
×××279
transition-delayCSS3トランジションのディレイ
10
×××279
transition-durationCSS3トランジションの再生時間
10
×××279
transition-propertyCSS3トランジションさせるプロパティ
10
×××279
transition-timing-functionCSS3トランジションの補間方法
10
×××279
unicode-bidi 双方向アルゴリズムの変更221
vertical-align インライン要素の位置揃え216
visibility 表示の有無069
white-space 改行コード・タブ・スペースの表示177
widows ページの先頭に最小限必要な行数×××××××044
width 横幅057
word-breakCSS3自動改行のルール××181
word-spacing 単語の間隔191
word-wrap 長い単語の改行ルール182
wrap-flowCSS3除外××××××
10
×××解説
wrap-marginCSS3除外××××××
10
×××解説
writing-modeCSS3縦書き・横書きの指定
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がサポートされています。

HTML&CSS コーディング・プラクティスブック
最新ラインナップ

デザインカンプと指示書に従い、
Webページをコーディングしてみる実践シリーズです。
シリーズ情報