W3cubDocs

/Support Tables

CSS Masks

Method of displaying part of an element, using a selected image as a mask

Spec https://www.w3.org/TR/css-masking-1/
Status W3C Candidate Recommendation
IE Edge Firefox Chrome Safari Opera
      73 (1,*)    
    65 72 (1,*)    
    64 71 (1,*) TP (1,*)  
11 18 (6) 63 70 (1,*) 12 (1,*) 56 (1,*)
10 17 (4,5) 62 69 (1,*) 11.1 (1,*) 55 (1,*)
9 16 61 68 (1,*) 11 (1,*) 54 (1,*)
8 15 60 67 (1,*) 10.1 (1,*) 53 (1,*)
Show all
7 14 59 66 (1,*) 10 (1,*) 52 (1,*)
6 13 58 65 (1,*) 9.1 (1,*) 51 (1,*)
5.5 12 57 64 (1,*) 9 (1,*) 50 (1,*)
    56 63 (1,*) 8 (1,*) 49 (1,*)
    55 62 (1,*) 7.1 (1,*) 48 (1,*)
    54 61 (1,*) 7 (1,*) 47 (1,*)
    53 60 (1,*) 6.1 (1,*) 46 (1,*)
    52 (2) 59 (1,*) 6 (1,*) 45 (1,*)
    51 (2) 58 (1,*) 5.1 (1,*) 44 (1,*)
    50 (2) 57 (1,*) 5 (1,*) 43 (1,*)
    49 (2) 56 (1,*) 4 (1,*) 42 (1,*)
    48 (2) 55 (1,*) 3.2 41 (1,*)
    47 (2) 54 (1,*) 3.1 40 (1,*)
    46 (2) 53 (1,*)   39 (1,*)
    45 (2) 52 (1,*)   38 (1,*)
    44 (2) 51 (1,*)   37 (1,*)
    43 (2) 50 (1,*)   36 (1,*)
    42 (2) 49 (1,*)   35 (1,*)
    41 (2) 48 (1,*)   34 (1,*)
    40 (2) 47 (1,*)   33 (1,*)
    39 (2) 46 (1,*)   32 (1,*)
    38 (2) 45 (1,*)   31 (1,*)
    37 (2) 44 (1,*)   30 (1,*)
    36 (2) 43 (1,*)   29 (1,*)
    35 (2) 42 (1,*)   28 (1,*)
    34 (2) 41 (1,*)   27 (1,*)
    33 (2) 40 (1,*)   26 (1,*)
    32 (2) 39 (1,*)   25 (1,*)
    31 (2) 38 (1,*)   24 (1,*)
    30 (2) 37 (1,*)   23 (1,*)
    29 (2) 36 (1,*)   22 (1,*)
    28 (2) 35 (1,*)   21 (1,*)
    27 (2) 34 (1,*)   20 (1,*)
    26 (2) 33 (1,*)   19 (1,*)
    25 (2) 32 (1,*)   18 (1,*)
    24 (2) 31 (1,*)   17 (1,*)
    23 (2) 30 (1,*)   16 (1,*)
    22 (2) 29 (1,*)   15 (1,*)
    21 (2) 28 (1,*)   12.1
    20 (2) 27 (1,*)   12
    19 (2) 26 (1,*)   11.6
    18 (2) 25 (1,*)   11.5
    17 (2) 24 (1,*)   11.1
    16 (2) 23 (1,*)   11
    15 (2) 22 (1,*)   10.6
    14 (2) 21 (1,*)   10.5
    13 (2) 20 (1,*)   10.0-10.1
    12 (2) 19 (1,*)   9.5-9.6
    11 (2) 18 (1,*)   9
    10 (2) 17 (1,*)    
    9 (2) 16 (1,*)    
    8 (2) 15 (1,*)    
    7 (2) 14 (1,*)    
    6 (2) 13 (1,*)    
    5 (2) 12 (1,*)    
    4 (2) 11 (1,*)    
    3.6 (2) 10 (1,*)    
    3.5 (2) 9 (1,*)    
    3 8 (1,*)    
    2 7 (1,*)    
      6 (1,*)    
      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
12 (1,*) all 67 (1,*) 10 (1,*) 46 (1,*) 70 (1,*) 63 11 11.8 (1,*) 7.2 (1,*) 1.2 (1,*) 7.12 (1,*)
11.3-11.4 (1,*)   4.4.3-4.4.4 (1,*) 7 (1,*) 12.1     10   6.2 (1,*)    
11.0-11.2 (1,*)   4.4 (1,*)   12         5 (1,*)    
10.3 (1,*)   4.2-4.3 (1,3,*)   11.5         4 (1,*)    
Show all
10.0-10.2 (1,*)   4.1 (1,3,*)   11.1              
9.3 (1,*)   4 (1,3,*)   11              
9.0-9.2 (1,*)   3 (1,3,*)   10              
8.1-8.4 (1,*)   2.3 (1,3,*)                  
8 (1,*)   2.2 (1,3,*)                  
7.0-7.1 (1,*)   2.1 (1,3,*)                  
6.0-6.1 (1,*)                      
5.0-5.1 (1,*)                      
4.2-4.3 (1,*)                      
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

  4. Can be enabled in MS edge behind the "Enable CSS Masking" flag.

  5. Partial support refers to supporting mask-image and mask-size

  6. Partial support refers to supporting mask-image, mask-size, mask-position, and the mask shorthand

* Partial support with prefix.

Resources

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