frontend
Episode 14
Composition: The Browser's New Superpower
This episode is about the impact that
mix-blend-mode
could have on web design. At first glance, you might think that it isn't too different from the
background blend-mode
property we dug into in the last episode, but you'd be dead wrong. While the blend modes and the maths are the same,
mix-blend-mode
represents a monumental shift in the capabilities of web developers.
'Compositing' refers to two things. First, it's what the browser does to paint a webpage—building up each layer depending on its stacking context and
z-index
, blending them based on opacity and blend mode. But it's also the term for crafting a particular visual design—which layers we put where, how they respond to scrolling, etc. With a deep understanding of the former we open up totally new possibilities for the latter.
After all, it could be argued that Blending is really just "Photoshop in CSS". But Compositing? Well, that's a whole different beast altogether.