CSS マスク

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

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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 部分対応 1
補足
部分対応 1
補足
補足 While the property is recognized, values applied to it don't have any effect.
完全対応 あり
接頭辞付き 補足
接頭辞付き -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 完全対応 あり
補足
完全対応 あり
補足
補足 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 部分対応 一部
補足
部分対応 一部
補足
補足 While the property is recognized, values applied to it don't have any effect.
完全対応 あり
接頭辞付き 補足
接頭辞付き -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 部分対応 4
補足
部分対応 4
補足
補足 While the property is recognized, values applied to it don't have any effect.
完全対応 あり
接頭辞付き 補足
接頭辞付き -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
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 3.2
接頭辞付き
完全対応 3.2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android ?
Applies to HTML elementsChrome 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge ? Firefox 完全対応 3.5IE 未対応 なしOpera 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Shorthand for mask-* propertiesChrome 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge ? Firefox 完全対応 53IE 未対応 なしOpera 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 53Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

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

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

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