2016 html5 css3 各ブラウザのマスク・クリッピング対応状況
結論、2016年3月20日現在、使うのはやめておいた方がよい。
Android/iOS mobile safari のみであれば無理やり使えなくもないが、仕様が異なるのでトラブルになりそう。
ざっくりとした対応状況としては、firefox系はsvgで記述、webkit系はcssで記述できるという状況
最大の問題はIE
なんと、IE6時代から独自プロパティでマスクに対応していたが、IE10以降、独自プロパティを捨ててモダンブラウザに合わせてcss3に実装しなおしはじめたのは、いいが、css3のマスク機能が実装されていない為、機能的には劣化。htmlをinline svgに変換してsvgのclip pathやmaskを使えばなんとかできそうだが、そういったライブラリは見当たらず、IE10,IE11はクリッピング、マスク効果適用から除外した方が簡単。phptoshopでクリッピングした透過pngを用意する等..。あるいはIE10,IE11をIE9モードで動作させるか..だ。がIE9互換設定しても、filter機能はデフォルト封印されているので、インターネットオプションで解放が必要。実質的に無理っぽい。
