Skip to content

There are several CSS graphics-related properties that provide the bulk of support for Clipping, Masking, Filters and whatnot. The purpose of this repo is to hopefully provide some insight into what the current state of affairs is with various browsers.

master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 

README.md

css-graphics

There are several CSS graphics-related properties that provide the bulk of support for Clipping, Masking, Filters and whatnot. The purpose of this repo is to hopefully provide some insight into what the current state of affairs is with various browser implementations.

The 'Apply To' column below distinguishes whether we're talking about applying the feature to HTML or SVG graphic components. If you apply a feature to an entire embedded SVG graph, that falls under the HTML category. If however, you're talking about applying the feature to a subgraph within the SVG, that falls into the SVG category.

For each browser column, a 'No' indicates the feature is currently unsupported. Otherwise, I indicate whether the feature is currently vendor-prefixed or not.

I don't have much information at this point on Opera, so have decided to leave it out for now. If you want, go ahead and fill it out and do a pull request.

In fact, if any of this information is out of date or incomplete, please update and do a pull request.

FeatureApply ToSafariChromeFirefoxIEComments
clip-path with basic shapesHTML-webkit-clip-path-webkit-clip-pathNoNo
SVG-webkit-clip-path-webkit-clip-pathNoNo
clip-path with SVG pathHTML-webkit-clip-path-webkit-clip-pathclip-pathNo
SVGclip-pathclip-pathclip-pathclip-path
mask-imageHTML-webkit-mask-image-webkit-mask-imageNoNoUses alpha masking by default
SVGNoNoNoNo
mask-border-imageHTML-webkit-mask-box-image-webkit-mask-box-imageNoNo
SVGNoNoNoNo
maskHTMLNoNomaskNo
SVGmaskmaskmaskmaskUses luminance masking by default
SVG FilterHTML-webkit-filter-webkit-filterfilterNo
SVGfilterfilterfilterfilter
regions HTML -webkit-flow-into / -webit-flow-from No No Older support in IE with -ms-flow-into and -ms-flow-from. flow-into works differently, but flow-from is mostly the same. Chrome dropped support for regions

About

There are several CSS graphics-related properties that provide the bulk of support for Clipping, Masking, Filters and whatnot. The purpose of this repo is to hopefully provide some insight into what the current state of affairs is with various browsers.

Resources

Releases

No releases published
You can’t perform that action at this time.