Recently I walked through each part of the implementation for SVG navigation or UI dynamically colored with CSS using mix-blend-mode. That example includes progressive enhancement with a fallback for the versions of Microsoft IE & Edge that don’t support this property.

Because progressive enhancement can vary between one developer and another so much even on the same project or task, I wanted to share some of my own higher-level thinking about how I make these types of design changes during engineering. While polyfills typically imply the use of JavaScript, in this discussion I’ll be focusing on CSS and specifically support for older browsers.

Read the original post then jump back over here for more of an abstract look at progressive enhancement in general.

Modern CSS provides an incredible opportunity to create innovative, engaging user interfaces and experiences, but many well-supported properties are still rarely used to their full artistic and technical potential.

One of the most useful but still underutilized properties today is mix-blend-mode. This property allows elements to be blended together by dictating how blending should appear between stacked HTML elements by blending elements from layers above with those behind them.