The “P” in Progressive Enhancement stands for “Pragmatism”
— 5 minute read
I often think of IE11 as a rancid smog that follows us around, spoiling things. This is not me criticising the browser, though. Instead, I’m referencing how it follows progress on the web around, hindering it.
I’m also seemingly putting the blame on the browser for that, too, but no: that blame sits firmly on the shoulders of the web community. Nearly every time some modern CSS is talked about in the hellish vacuum of sensible discourse: Twitter, you can set your watch by the TTWAI, which is “Time To What About IE11?”.
Support means support, not mimic
The TTWAI phrase is almost always used as a prefix that someone “has to support IE11”. What they inadvertently give away in their short, often petulant exchange, is that when they say “support”, they actually mean “my website has to work identically in IE11 as it does in Chrome”. This, my friends, is the stinkiest shit, especially when you consider web design and development with a progressive enhancement mindset.
We seem to be stuck in pixel perfection and identical experiences across devices and browsers, even though we really have very little control about how our work will land on any given user’s device. Pixel perfection is a “a collective, consensual hallucination”, as mentioned by Jeremy Keith in Resilient Web Design. It’s a collective, consensual hallucination that just wont go away: just like that smog.
Last year, I wrote about this stuff in some depth and mentioned the term: “minimal viable experience” a lot. As explained in the article, “minimum viable experience” is the absolute baseline experience—a sensible default.
The beauty of approaching your work like this is that when things go wrong (emphasis on when), your minimum viable experience is ready and raring to go! This is much better than a broken, often blank website, right?
Bringing this back around to CSS, a context that always results in TTWAI is when someone talks about CSS Custom Properties. These are a perfect candidate for working out a minimal viable experience, and I’ll show you how.
Notice that I only referenced them here and still haven’t defined them. You’ll also notice that the text turned dark blue. This is because I set darkblue as a sensible fallback for if --color-primary wasn’t defined. Now, finally, let’s define the custom properties.
This is a hyper-simplified example of using Progressive Enhancement with CSS, but I hope it’s demonstrated how to build things up naturally with browser support.
With a Progressive Enhancement mindset, support actually means support. We’re not trying to create an identical experience: we’re creating a viable experience instead.
Also with Progressive Enhancement, it’s incredibly likely that your IE11 user, or your user on a low-powered device, or even your user on a poor connection won’t notice that they’re experiencing a “minor” experience because it’ll just work for them. This is the magic, right there. Everyone’s a winner.
Always remember: it’s people that we build our websites or web apps for.
Hi 👋 I’m Andy, a freelance web designer
I currently have availability for short term design and front-end development projects.