フィルター効果

ジャンプ先:
  1. リファレンス
  2. 仕様書
  3. ブラウザーの対応

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

リファレンス

プロパティ

データ型

仕様書

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

ブラウザーの対応

backdrop-filter プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome 完全対応 47
無効
完全対応 47
無効
無効 From version 47: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 17Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1178765.
IE 未対応 なしOpera 完全対応 34
無効
完全対応 34
無効
無効 From version 34: this feature is behind the Enable Experimental Web Platform Features preference.
Safari 完全対応 9
接頭辞付き
完全対応 9
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 未対応 なしChrome Android 完全対応 47
無効
完全対応 47
無効
無効 From version 47: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile 未対応 なしFirefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1178765.
Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし

凡例

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

filter プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
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 完全対応 6
接頭辞付き
完全対応 6
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 53
完全対応 53
完全対応 4.4
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 53Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
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 完全対応 40
完全対応 40
完全対応 22
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 6
接頭辞付き
完全対応 6
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 6.0
On SVG elementsChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 35IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 35Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

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

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mfuji09
最終更新者: mfuji09,