244 Chapter 18
Summary
Blend modes, filter effects, and masking provide access to web browser
features that were previously found only in professional photo-imaging soft-
ware. Each is useful on its own, but combine them and designers and devel-
opers get a whole new way to approach visual design on the Web.
The ability to use graphical effects like these comes thanks to the wide-
spread implementation of SVG. The markup that describes an SVG image
is already closely tied with HTML (it can be dropped into HTML and will
be parsed as part of the document), and in the future you should see SVG
and CSS become much more closely tied—we’ve seen that with the graphi-
cal effects in this chapter, and modules currently in development also
describe a shared implementation of the animation properties described
in Chapter 14.Chapter 18: Blend Modes, Filter Effects, and Masking
Chrome firefox safari ie
background-blend-mode Yes Yes Safari 8 No
mix-blend-mode No* Yes Safari 8 No
isolation No* No Safari 8 No
filter Yes† No‡ Yes† No
clip-path Yes* No Safari 8§ No
mask Yes† No Yes† No
* Implemented but off by default
† With vendor prefix
‡ Can use filters defined in SVG
§ With vendor prefix; implemented with outdated syntax in Safari 7