W3cubDocs

/Support Tables

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

  1. 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.

  2. Partial support in Firefox refers to only support for inline SVG mask elements i.e. mask: url(#foo).

  3. Partial support refers to supporting the mask-box-image shorthand but not the longhand properties

* Partial support with prefix.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-masks