I just wrapped up my first official website project! It’s a small company ad site, and while it was a bit tricky with all the absolute positioning and animations, I managed to get through it.
Everything was looking great… until I found out it doesn’t work on some older Chrome versions (like 2017/18). So, I did some Googling, learned about how different browsers handle CSS, and fixed a few things to make it look better.
But then… one of the design guys told me it looks awful on iPhones. I totally forgot about Safari support! I don’t have an iPhone or a Mac, so now I’m in a bit of a pickle. To make things worse, I also tried it on the pre-Chromium version of Edge, and a bunch of stuff is broken there too.
I wasn’t given a specific list of browser versions to support, and now I’m lost. How far back should I be supporting these browsers? And what about the libraries I’m using (like SwiperJS)? I can’t control their compatibility!
Just when I thought I had nailed the design, this whole browser compatibility thing has opened a whole new can of worms.
Mac support is kinda important, I guess, but honestly, I wouldn’t bother with the old Edge or Chrome versions that are 6+ years old. No one should be using a browser that outdated anyway — there are serious security risks. If they haven’t updated in six years, they’ve got bigger problems than your website not working!
Get your company to clarify which browser versions they expect everything to work on.
Suggest they get a LambdaTest, BrowserStack, or something similar so you can test those versions properly.
Also, remind them that spending tons of time tweaking CSS for just 0.01% of users who probably won’t even see the site doesn’t really make sense. As a freelancer, I usually offer support for the last four versions of browsers in my basic package. If clients want more, that’s an extra cost, and you’d be surprised how quickly they realize that people who don’t keep their systems updated are kinda on them!
For libraries, only use those that claim compatibility with the browsers your company cares about. If none do, go for the one with the widest support. And if some browsers don’t support certain features, get your designer to create alternative designs and use feature detection.
Don’t forget to add stuff like Autoprefixer for CSS and auto polyfilling for JavaScript in your build pipeline. But overall, only spend time on those little tweaks at the end. If something can’t be fixed, talk to the product manager about whether it’s worth the hassle, or if it’s okay to let those fancy features not work for a small group of iPhone users.
In the end, you’ll get the hang of what works across different browsers and code accordingly from the get-go. But honestly, most browsers were pretty solid five years ago, and the few things that don’t work usually aren’t critical since those users probably aren’t your main audience anyway.
For Firefox and Chrome, don’t stress too much about older versions. Most people have auto updates on, so if someone’s using an outdated version, they’re either super careless or stuck on some ancient corporate network.
According to Can I Use, less than 1% of the internet is using anything older than the last couple of versions of those browsers:
Hey, if it’s a new product, definitely ask the company for browser stats on the end users. It’s super helpful to understand your user base. You might want to add some tracking to gather this info, too. Make sure you prioritize your development goals and work closely with the product and design teams to define what’s really needed.
And don’t let them get away with saying it should work on all browsers! Ask for data and reasons behind their decisions. If older browsers are an issue, the design might need some tweaking.
On a personal note, I’d say Safari is pretty important to support, but you can probably ignore older versions of Chrome and Edge since they might only have a small user base. You could even detect the browser version and suggest users update or switch to a different one.
You’re on a learning curve, and mistakes are part of the process! Just take them in stride; that’s how you improve.
I’d recommend asking management for a timeline on which browsers to support. If they don’t give you that info, just stick to the latest versions of the big three: Chrome, Firefox, and Safari. Most other browsers are just variations of those.
Personally, I usually start in Safari and then make some minor CSS tweaks for Chrome and Firefox to get everything working on both desktop and mobile. If I kick things off in Chrome or Firefox, I end up having to make bigger changes for the other two. This definitely shows me that Safari is either super standards-compliant or just really consistent!
It’s a small company ad site, and while it was a bit tricky with all the absolute positioning and animations, I managed to get through it.
I totally forgot about Safari support! I don’t have an iPhone or a Mac, so now I’m in a bit of a pickle. To make things worse, I also tried it on the pre-Chromium version of Edge, and a bunch of stuff is broken there too.