CSS Masks
CSS Masks
Method of displaying part of an element, using a selected image as a mask
| Spec | http://www.w3.org/TR/css-masking-1/ |
|---|---|
| Status | W3C Candidate Recommendation |
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 57 | 62 (1,*) | ||||
| 56 | 61 (1,*) | TP (1,*) | 48 (1,*) | ||
| 16 | 55 | 60 (1,*) | 11 (1,*) | 47 (1,*) | |
| 11 | 15 | 54 | 59 (1,*) | 10.1 (1,*) | 46 (1,*) |
| 10 | 14 | 53 | 58 (1,*) | 10 (1,*) | 45 (1,*) |
| 9 | 13 | 52 (2) | 57 (1,*) | 9.1 (1,*) | 44 (1,*) |
| 8 | 12 | 51 (2) | 56 (1,*) | 9 (1,*) | 43 (1,*) |
| Show all | |||||
| 7 | 50 (2) | 55 (1,*) | 8 (1,*) | 42 (1,*) | |
| 6 | 49 (2) | 54 (1,*) | 7.1 (1,*) | 41 (1,*) | |
| 5.5 | 48 (2) | 53 (1,*) | 7 (1,*) | 40 (1,*) | |
| 47 (2) | 52 (1,*) | 6.1 (1,*) | 39 (1,*) | ||
| 46 (2) | 51 (1,*) | 6 (1,*) | 38 (1,*) | ||
| 45 (2) | 50 (1,*) | 5.1 (1,*) | 37 (1,*) | ||
| 44 (2) | 49 (1,*) | 5 (1,*) | 36 (1,*) | ||
| 43 (2) | 48 (1,*) | 4 (1,*) | 35 (1,*) | ||
| 42 (2) | 47 (1,*) | 3.2 | 34 (1,*) | ||
| 41 (2) | 46 (1,*) | 3.1 | 33 (1,*) | ||
| 40 (2) | 45 (1,*) | 32 (1,*) | |||
| 39 (2) | 44 (1,*) | 31 (1,*) | |||
| 38 (2) | 43 (1,*) | 30 (1,*) | |||
| 37 (2) | 42 (1,*) | 29 (1,*) | |||
| 36 (2) | 41 (1,*) | 28 (1,*) | |||
| 35 (2) | 40 (1,*) | 27 (1,*) | |||
| 34 (2) | 39 (1,*) | 26 (1,*) | |||
| 33 (2) | 38 (1,*) | 25 (1,*) | |||
| 32 (2) | 37 (1,*) | 24 (1,*) | |||
| 31 (2) | 36 (1,*) | 23 (1,*) | |||
| 30 (2) | 35 (1,*) | 22 (1,*) | |||
| 29 (2) | 34 (1,*) | 21 (1,*) | |||
| 28 (2) | 33 (1,*) | 20 (1,*) | |||
| 27 (2) | 32 (1,*) | 19 (1,*) | |||
| 26 (2) | 31 (1,*) | 18 (1,*) | |||
| 25 (2) | 30 (1,*) | 17 (1,*) | |||
| 24 (2) | 29 (1,*) | 16 (1,*) | |||
| 23 (2) | 28 (1,*) | 15 (1,*) | |||
| 22 (2) | 27 (1,*) | 12.1 | |||
| 21 (2) | 26 (1,*) | 12 | |||
| 20 (2) | 25 (1,*) | 11.6 | |||
| 19 (2) | 24 (1,*) | 11.5 | |||
| 18 (2) | 23 (1,*) | 11.1 | |||
| 17 (2) | 22 (1,*) | 11 | |||
| 16 (2) | 21 (1,*) | 10.6 | |||
| 15 (2) | 20 (1,*) | 10.5 | |||
| 14 (2) | 19 (1,*) | 10.0-10.1 | |||
| 13 (2) | 18 (1,*) | 9.5-9.6 | |||
| 12 (2) | 17 (1,*) | 9 | |||
| 11 (2) | 16 (1,*) | ||||
| 10 (2) | 15 (1,*) | ||||
| 9 (2) | 14 (1,*) | ||||
| 8 (2) | 13 (1,*) | ||||
| 7 (2) | 12 (1,*) | ||||
| 6 (2) | 11 (1,*) | ||||
| 5 (2) | 10 (1,*) | ||||
| 4 (2) | 9 (1,*) | ||||
| 3.6 (2) | 8 (1,*) | ||||
| 3.5 (2) | 7 (1,*) | ||||
| 3 | 6 (1,*) | ||||
| 2 | 5 (1,*) | ||||
| 4 (1,*) | |||||
| iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 11 (1,*) | |||||||||||
| 10.3 (1,*) | all | 56 (1,*) | 10 (1,*) | 37 (1,*) | 59 (1,*) | 54 | 11 | 11.4 (1,*) | 5 (1,*) | 1.2 (1,*) | 7.12 (1,*) |
| 10.0-10.2 (1,*) | 4.4.3-4.4.4 (1,*) | 7 (1,*) | 12.1 | 10 | 4 (1,*) | ||||||
| 9.3 (1,*) | 4.4 (1,*) | 12 | |||||||||
| 9.0-9.2 (1,*) | 4.2-4.3 (1,3,*) | 11.5 | |||||||||
| Show all | |||||||||||
| 8.1-8.4 (1,*) | 4.1 (1,3,*) | 11.1 | |||||||||
| 8 (1,*) | 4 (1,3,*) | 11 | |||||||||
| 7.0-7.1 (1,*) | 3 (1,3,*) | 10 | |||||||||
| 6.0-6.1 (1,*) | 2.3 (1,3,*) | ||||||||||
| 5.0-5.1 (1,*) | 2.2 (1,3,*) | ||||||||||
| 4.2-4.3 (1,*) | 2.1 (1,3,*) | ||||||||||
| 4.0-4.1 (1,*) | |||||||||||
| 3.2 (1,*) | |||||||||||
Notes
Partial support in WebKit/Blink browsers refers to supporting the mask-image and mask-box-image properties, but lacking support for other parts of the spec.
Partial support in Firefox refers to only support for inline SVG mask elements i.e. mask: url(#foo).
Partial support refers to supporting the mask-box-image shorthand but not the longhand properties
- * Partial support with prefix.
Resources
- WebPlatform Docs
- HTML5 Rocks article
- Detailed blog post
- Firefox implementation bug
- Visual test cases
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-masks
