Legacy Browser Support: Challenges & Solutions

Still supporting old browsers in 2024? You’re not alone. Here’s what you need to know:

Legacy browsers (like IE11) can’t handle modern web tech
3% of users still use IE11, despite its upcoming end-of-life
Supporting old browsers keeps your site accessible to more people
Main challenges: display issues, JavaScript limitations, security risks, slow performance

Key solutions:

Build from basic to advanced
Use code patches (polyfills)
Check browser capabilities
Reduce features smoothly
Test on multiple browsers

Browser	Share
Chrome	53.02%
Safari	24.62%
Firefox	7.47%
IE	2.21%

Supporting legacy browsers is tough, but it keeps your site open to more users. Focus on making core functionality work everywhere, then add extras for modern browsers.

Main problems with legacy browser support

Supporting old browsers is a headache. Here’s why:

Display and layout issues

Old browsers can’t handle modern CSS. This breaks layouts in many ways:

Flexbox and Grid? IE11 only gets some of it right.
CSS variables? IE11 says “nope.”
Responsive images? Older browsers don’t know what srcset is.

In fact, 70% of developers in a 2021 MDN survey said IE was their biggest compatibility nightmare.

JavaScript headaches

Older JavaScript versions miss out on the good stuff:

Feature	IE11 Support	What breaks
Arrow functions	No	Your code
Promises	No	Async operations
`let` and `const`	No	Variable scoping
Template literals	No	Easy string formatting

Security holes

Old browsers = unpatched vulnerabilities. Microsoft saw IE-related security issues DOUBLE from 2019 to 2020.

Slow as molasses

Legacy browsers struggle to keep up:

Pages load like they’re on dial-up
Animations look like flipbooks
UI feels like it’s stuck in mud

WebPageTest found that sites load 3x slower on IE11 compared to modern browsers. Ouch.

Developers often use polyfills and transpilers to patch things up. But that’s like putting band-aids on a sinking ship.

As Brian Kardell from Igalia puts it:

“Supporting legacy browsers is like running a race with weights on. It slows you down and makes everything harder.”

Truer words were never spoken.

How to support legacy browsers

Supporting old browsers doesn’t have to be a headache. Here’s how to do it:

Build from basic to advanced

Start simple, then add fancy stuff. This way, everyone gets a usable site.

Shopify themes do this. They make sure the basics work everywhere, then add extras for newer browsers.

“If ‘unsupported’ means ‘unusable,’ we’re making the web less inclusive and losing sales.” - Shopify Themes Team

Use code patches

Sometimes you need extra code to make new features work in old browsers. These are called polyfills.

Feature	Polyfill	Works in
Flexbox	Flexibility.js	IE 8+
Promise	es6-promise	IE 9+
Fetch	whatwg-fetch	IE 10+

Check what browsers can do

Before you start, see what each browser supports. Use caniuse.com to check.

Shopify stopped supporting IE11 in new themes in 2020. Why? Only 1.9% of people used it, making just 0.69% of checkout money.

Reduce features smoothly

Make sure the important stuff works in old browsers, even if the cool features don’t.

For example:

Use simple CSS layouts

Start with a basic mobile layout for old browsers. Add fancier layouts for newer ones.

Have backups for modern JavaScript

Use regular links instead of just JavaScript. This helps old browsers and makes your site more accessible.

Test on lots of browsers

Use online tools to check your site on different browsers. BrowserStack lets you test without needing all the devices.

Remember: Your site won’t look the same everywhere. Focus on making it work for everyone.

Tips for legacy browser support

Supporting old browsers can be a pain. But these tips will help:

Pick your browsers

Set clear rules about which browsers you’ll support. Base this on your users and resources.

For example: Microsoft’s ditching IE 11. Support ends January 1, 2024. This gives folks time to switch to modern browsers.

Stack Exchange? They only support the last two browser versions. They call IE11 a “6-year-old browser”, kept around for legacy sites.

Clean code

Split your code for new and old browsers. Use if-statements for different browser needs. It’ll make your life easier.

Take Babel, for instance. It’s a JavaScript compiler that can make your code work with ES5 and lower - the last standard IE11 can handle. You write modern code, but old browsers can still use it.

Speed it up

Make your site fast. It’s crucial for old browsers - they’re often slower.

Osano, a consent management platform, lets customers turn off legacy browser support. Why? It can speed up page loading by cutting down code size. They say:

“The larger the code bundle, the slower a site will load. Disabling legacy browser support can decrease the size of the bundle.”

Document and teach

Keep records of your legacy browser strategies. Train your team on browser-specific issues. It keeps everyone on the same page.

Remember: Every site is different. Check how many of your visitors use old browsers before you decide what to do.

One expert puts it well:

“A well-structured HTML document should always be your starting point. Ask yourself: if you remove your stylesheet, does your content still make sense?”

Wrap-up

Supporting old browsers is tricky. You want to keep your site open to everyone, but you also want to use new tech. Here’s how to handle it:

Check your users: Look at who’s visiting your site. This tells you which old browsers you need to worry about.
Use feature detection: Don’t just look at browser versions. Check if the browser can do what you need it to do.
Be careful with polyfills: They can help, but don’t go overboard. Too many can make your site slow.
Test everything: Try your site on different browsers. It’s the best way to catch problems.
Keep an eye on changes: Browser support is always shifting. For example, IE11 is going away soon.
Think about speed: Dropping support for old browsers can make your site faster.
Write it down: Keep track of how you’re handling old browsers. It helps your team stay in sync.