Every front-end developer has come across a CSS issue that works differently from a web browser to another. This was more obvious when we were trying to make layouts work the same on IE8 as they work on Chrome. I’ve scratched my head many times thinking about how to debug and fix CSS issues, but recently things have changed for the better, resulting in fewer concerns about a layout working perfectly in different browsers.

In this article, I will share my thoughts on why cross-browser development is better than in the past. Adding on that, I will also share some issues we still have these days.

Introduction

Cross-browser development is making a web page look and behave the same on different desktop and mobile browsers. Five years ago, this was a real challenge for front-end developers. Thankfully, it’s has gotten much easier now with the support for modern CSS tools like Grid and Flexbox.

Consider the following mockup that I designed in Sketch.

Here is how it looks in four different browsers. There is no difference between them, right? That’s the goal of cross-browser development, to have something look and behave the same on different browsers.

I know that it’s nothing complex, but my goal was to illustrate the idea. For years, we have struggled with a lot of browser inconsistent issues that made the front-end developer job extremely hard to the level that you will debug and fix issues more than writing actual CSS.

How CSS Cross-Browser Development Used To Be

If we go back in time to 2011, IE9 was the latest version of Internet Explorer. At that time, Google Chrome was almost three years old, and developing multiple browser support was a challenge.

For new CSS comers, they might not know how developers used to build web layouts in the past. In 2011, a website was supposed to work on IE8, and in case you want to use modern CSS features at that time (e.g: CSS gradients), you need to provide an image fallback.

To provide a consistent experience for old and new browsers was quite challenging, a front-end developer needs to either use old CSS techniques to achieve the layout they need to, or to provide a proper fallback.

The concept of making a website consistent wasn’t optional. In 2010, the usage of IE was 52% (according to StatCounter. With that percentage or usage, You can’t ignore IE.

Timelapse Of CSS Development For The Past 10 Years

I want to take you on a journey from 2010 to today so you can witness and see how CSS development used to be. For me, it’s important for a developer to learn about that so they can appreciate the effort done by the web community to make cross-browser development more straightforward.

#article #css