フィルター効果 - CSS: カスケーディングスタイルシート | MDN

メインコンテンツまで移動
言語を選択
検索結果へスキップ

フィルター効果 (Filter Effects) は CSS のモジュールの一つで、要素が文書内に表示される前の処理方法を定義します。

リファレンス

プロパティ

データ型

<filter-function>

仕様書

仕様書	状態	備考
Filter Effects Module Level 1 filter の定義	草案	初回定義

ブラウザーの対応

`backdrop-filter` プロパティ

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`backdrop-filter`	Chrome 完全対応 76 完全対応 76 完全対応 47 無効無効 From version 47: this feature is behind the `Enable Experimental Web Platform Features` preference. To change preferences in Chrome, visit chrome://flags.	Edge 完全対応 17	Firefox 完全対応 70 無効完全対応 70 無効無効 From version 70: this feature is behind the `layout.css.backdrop-filter.enabled` preference (needs to be set to `true`) and the `gfx.webrender.all` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE 未対応なし	Opera 完全対応 34 無効完全対応 34 無効無効 From version 34: this feature is behind the `Enable Experimental Web Platform Features` preference.	Safari 完全対応 9 接頭辞付き完全対応 9 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	WebView Android 完全対応 76	Chrome Android 完全対応 76 完全対応 76 完全対応 47 無効無効 From version 47: this feature is behind the `Enable Experimental Web Platform Features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android 未対応なし補足未対応なし補足補足 See bug 1178765.	Opera Android 完全対応 54 完全対応 54 完全対応 34 無効無効 From version 34: this feature is behind the `Enable Experimental Web Platform Features` preference.	Safari iOS 完全対応 9 接頭辞付き完全対応 9 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Samsung Internet Android 完全対応 12.0

凡例

完全対応: 完全対応
未対応: 未対応
実装ノートを参照してください。: 実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。: ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。: 使用するには、ベンダー接頭辞または異なる名前が必要です。

`filter` プロパティ

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`filter`	Chrome 完全対応 53 完全対応 53 完全対応 18 接頭辞付き補足接頭辞付き -webkit- のベンダー接頭辞が必要補足 In Chrome 18 to 19, the `saturate()` function only takes integers instead of decimal or percentage values. From Chrome 20, this bug is fixed.	Edge 完全対応 12 完全対応 12 完全対応 12 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Firefox 完全対応 35 完全対応 35 部分対応 34 無効無効 From version 34: this feature is behind the `layout.css.filters.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. 完全対応 49 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要完全対応 46 接頭辞付き無効接頭辞付き -webkit- のベンダー接頭辞が必要無効 From version 46: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE 未対応なし補足未対応なし補足補足 Internet Explorer 4 to 9 implemented a non-standard `filter` property. The syntax was completely different from this one and is not documented here.	Opera 完全対応 40 完全対応 40 完全対応 15 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Safari 完全対応 9.1 完全対応 9.1 完全対応 6 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	WebView Android 完全対応 53 完全対応 53 完全対応 4.4 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Chrome Android 完全対応 53	Firefox Android 完全対応 35 完全対応 35 部分対応 34 無効無効 From version 34: this feature is behind the `layout.css.filters.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. 完全対応 49 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要完全対応 46 接頭辞付き無効接頭辞付き -webkit- のベンダー接頭辞が必要無効 From version 46: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android 完全対応 41 完全対応 41 完全対応 14 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Safari iOS 完全対応 9.3 完全対応 9.3 完全対応 6 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Samsung Internet Android 完全対応 6.0
On SVG elements	Chrome 未対応なし	Edge 未対応なし	Firefox 完全対応 35	IE 未対応なし	Opera 未対応なし	Safari 未対応なし	WebView Android 未対応なし	Chrome Android 未対応なし	Firefox Android 完全対応 35	Opera Android 未対応なし	Safari iOS 未対応なし	Samsung Internet Android 未対応なし

凡例

完全対応: 完全対応
未対応: 未対応
実装ノートを参照してください。: 実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。: ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。: 使用するには、ベンダー接頭辞または異なる名前が必要です。

最終更新日: Mar 18, 2019, MDN 貢献者