This content originally appeared on Go Make Things and was authored by Go Make Things
Today, I wanted to talk about my approach to browser support. The tl;dr version…
- Basic functionality should work on any device that can access the web.
- Extras and flourishes are treated as progressive enhancements for modern devices.
- The UI can look different and even clunky on older devices and browsers, as long as it doesn’t break rule #1.
Let’s unpack this a bit…
1. Basic functionality on any device
The implications of this vary from one project to another.
For a lot of my sites and apps, that means that I start with a base of pre-rendered or server-rendered HTML, and use old-school <form> elements that submit to a server with a full page refresh for any type of action that can’t be handled with a basic link.
For some types of apps, that doesn’t always work.
A game, for example, might require JavaScript to work. In that case, I’m either writing my JavaScript old-school…
- Avoiding stuff that only works in modern browsers (like optional chaining), or
- Using polyfills to add modern features to older browsers, or
- Transpiling my modern code to older methods.
I actively try to avoid option 3 if I can, because I hate build steps!
2. Progressively enhance the extras and flourishes
If my app uses HTML with <form> elements for interactivity, I might wrap it in a Web Component that turns it into an ajaxy web app when modern JavaScript is supported.
Works just fine in older browsers. Newer ones get a slicker experience.
If the app requires JS to work, I might be a bit more loose and comfortable using JavaScript that only works in modern browsers for nice-to-have stuff that’s not essential: animations or slide-in navigation menus.
Maybe that expand-and-collapse section uses a <details> and <summary> element that just shows the content with a heading on unsupported browsers. Maybe that modal that loads a <dialog> pop-up starts its life as a link that takes users on older devices to a dedicated HTML page for instead.
3. The UI doesn’t have to look the same
A lot of older browsers support flex and grid layouts, but don’t have gap support.
I’m ok with the content in those not having any gutters. I’d rather do that than continue to rely on lots of conditional padding and margins.
Really old browsers don’t support flex or grid at all. I’m comfortable letting those browsers and devices see a single-column layout that gets enhanced into something better for newer browsers.
Unlike JavaScript, most CSS features can’t be polyfilled or transpiled as easily.
Yes, you can automate browser prefixes (ugh, remember when that was a thing?). But most build tools won’t replace gap with with margin, and if they did, they’d run the risk of breaking stuff.
Why do all of this?
For a lot of folks, this sounds like a lot more work. And in some cases, it can be more work than saying YOLO and only authoring for modern devices.
But doing that is a privilege I have as a moderately affluent person browsing the web in a country with relatively good web infrastructure and an area of my country with access to high-speed data (both landline and mobile) and an unlimited data plan.
There are a lot of people who use the web who don’t have some (or any) of those things!
Not everyone can afford a new computer. Some folks can’t afford a computer at all, and browse exclusively on mobile. Not everyone can purchase a new phone. A lot of older phones can be upgraded to newer browsers, or would start to fail if they did.
A lot of countries have very flaky internet. And even in the US where I live, large parts of the country have very slow internet and no access to fiber optic. Many people have data gaps on their mobile devices. Some of them turn off or block JavaScript to reduce data consumption.
The web is for everyone. What we build should be, too.
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-04-03T14:30:00+00:00) A pragmatic browser support strategy. Retrieved from https://www.scien.cx/2025/04/03/a-pragmatic-browser-support-strategy/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.