Skip to content

How to fix CSS Styling for Browser Compatibility

Published by kksrini89 on March 4, 2020

Last updated on March 5, 2020

Introduction

In recent years, browsing vendors are more mature enough to support the latest features of CSS experimental features.

Anyhow, we should be cautious about old versions of browsers also while employing new CSS features to our code base.

I keep this blog post to very short and straight to the point to fix CSS Styling for browser compatibility.

To fix CSS Styling for Browser Compatibility

To demonstrate for this exercise, I take one simple CSS property background-color but that works well with both old and latest browser versions.

Let’s say we have a .bold CSS class 

.bold {
   background-color: red;
   background-color: hsl(120, 60%, 30%);
}

In the above code snippet, we have a background-color CSS property repeated twice.

If the browser is latest one, then it reads the line with hue CSS function and that gets applied and by simply ignoring the first line.

But conversely, this will work for the old browser version by executing first line. Even after seeing the second line it will not work since that is not supported.

Thus we overcome fixing the browser compatibility issues. Yes, we should repeat CSS property twice to overcome but there might be some other ways also out there.

You can also please share if you have anything in the comments section.

References

Published inCSS