CSS マスク

CSS マスク (CSS Masking) は CSS のモジュールの一つで、マスク、クリップを含め、可視要素の一部または全部のを隠すための方法を定義します。

リファレンス

プロパティ

仕様書

仕様書 状態 備考
CSS Masking Module Level 1 勧告候補  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
mask の定義		 勧告 初回定義

ブラウザーの対応

mask プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
maskChrome 部分対応 1
補足
部分対応 1
補足
補足 While the property is recognized, values applied to it don't have any effect.
完全対応 1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Edge 完全対応 12Firefox 完全対応 2
補足
完全対応 2
補足
補足 From Firefox 10, the default color space when handling masks is sRGB. Previously, the default and only supported color space was linear RGB. This changes the appearance of mask effects, but brings Firefox into compliance with the second edition of the SVG 1.1 specification.
IE 未対応 なしOpera 部分対応 15
補足
部分対応 15
補足
補足 While the property is recognized, values applied to it don't have any effect.
完全対応 15
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Safari 部分対応 3.2
補足
部分対応 3.2
補足
補足 While the property is recognized, values applied to it don't have any effect.
完全対応 3.2
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
WebView Android 部分対応 2
補足
部分対応 2
補足
補足 While the property is recognized, values applied to it don't have any effect.
完全対応 2
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Chrome Android 部分対応 18
補足
部分対応 18
補足
補足 While the property is recognized, values applied to it don't have any effect.
完全対応 18
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 From Firefox 10, the default color space when handling masks is sRGB. Previously, the default and only supported color space was linear RGB. This changes the appearance of mask effects, but brings Firefox into compliance with the second edition of the SVG 1.1 specification.
Opera Android 部分対応 14
補足
部分対応 14
補足
補足 While the property is recognized, values applied to it don't have any effect.
完全対応 14
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Safari iOS 部分対応 3.2
補足
部分対応 3.2
補足
補足 While the property is recognized, values applied to it don't have any effect.
完全対応 3.2
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Samsung Internet Android 部分対応 一部
補足
部分対応 一部
補足
補足 While the property is recognized, values applied to it don't have any effect.
完全対応 4.0
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。
関連トピック