How to improve backwards compatibility for "older" browsers

How To
1

Hi all!

I’ve just started testing the first page I’ve put together using Bricks, and, the building experience has been fantastic! However, I’m bumping into some issues with backwards compatibility for older browsers, and the not-so-graceful degradation I’m seeing when testing on them.

Using Browserstack, I’ve tested the page on a series of Apple mobile devices (I haven’t delved into Android yet) and have found that iPads running iOS 15 or older have a completely broken appearance, which I don’t consider usable. The same is true for iPhones running iOS 14 or older.

Testing the page in Safari on an iPad 9th gen running iOS 15, shows the mobile navbar missing all its styles and being stuck on screen when it should be hidden, text being the wrong colour and size, and images being skewed, the wrong size, or not loading at all. The footer has also become tall enough to claim independence from the rest of the website :sweat_smile: .

Obviously, the iPad 5th gen was released in 2017 and can run iOS 16, and the iPhone 6s Plus came out in 2015 and can run iOS 15. So, assuming it’s kept up to date, a device from 9 years ago should load the page fine. Meaning, perhaps I’m worrying about nothing by wanting the page to fail slightly more gracefully - but, I was wondering if anyone else has looked into this, and might have a few pointers?

Here’s an image from iOS 15 on the iPad for reference:

image
image549×746 96.9 KB

2

Modern CSS requires up to date browsers. Modern CSS is necessary today to build fast and good looking websites.

3

You would have to detect browser version and use only compatible CSS for those versions.

If it is a matter of CSS that older browsers do not recognize, there may be a corresponding vender prefix alternative you can add in the CSS that they would recognize.

This will tell you the prefix CSS to add. https://autoprefixer.github.io/

If the prefixed version works in old and new browsers, that is the solution.