The browser mess: What developers must know before using CSS3

HTML5 gets all the press these days, but CSS3 really brings some great new possibilities to your web applications. CSS3 lets developers drastically improve an application’s look and feel with minimal effort. It lets developers use design elements that previously required the use of images and image editors.

Why is that so important? Like it or not, a well-designed web application is more important than many developers realize. Studies show that users judge a web page/application within one second of arriving (based on design alone). A nice-looking web application can improve usability, end-user adoption, or even sales (if it’s a customer-facing web app).

Now, if you’re a web developer who hasn’t dabbled much with application design, you must understand something about web browser differences before you begin. Whether you’re using CSS3 for a major overhaul, or just making minor design alterations (company logo, colors, etc…), your application may not look the same across all web browsers. For instance, a web application that looks great in Firefox may look different in Chrome and awful in Internet Explorer.

But wait…it gets worse.

Different browser versions render web applications differently too. For example, a web app may look one way in Internet Explorer 7, but look completely different in Internet Explorer 8, 9, and 10. Even if four different users accessed the same application using Internet Explorer, they could see 4 different things if they each used a different version of IE.

Why does this happen?

Without getting into the specifics, different browsers offer varying levels of support for HTML and CSS standards. Some browsers don’t support all the standards, and some interpret certain standards in different ways. Yes, it’s a mess.

Can you avoid it?

Short answer: No. Ten years ago, Internet Explorer owned 94% of the browser market. Developers could safely build applications knowing that the vast majority of users were using the same browser. That’s no longer the case. Browser usage is so evenly distributed these days, there’s no way you can develop for one browser and ignore the others. As of now, the major browsers include: Internet Explorer(7, 8, and 9), Chrome, Firefox, Safari, and Opera.

What does this mean to you?

Suppose you build an application and need to customize the look and feel in some way. Maybe you need to add your company’s logo/colors or maybe you want improve the look and feel with CSS3. You must test your application in each major browser to ensure a consistent look and feel.

Example

To help you understand this issue, let’s take a look at an example. Suppose you had a simple application that let your salespeople enter new sales into your database. Without adding any styles, it looks something like this:

That’s a pretty plain-looking application. Let’s spice it up with a few CSS3 styles and some HTML5 form elements (Click here to read more about HTML5 form elements). Now, here’s what that form looks like in the Opera browser. Notice the placeholder text in the input boxes, and the date field, which I’ve selected to show off the HTML5 date-picker. Also, it’s worth mentioning that this form uses no images…all of the design is done with CSS.

Opera

That looks quite a bit better, doesn’t it? But, what does it look like in other browsers? Let’s take a look.

Chrome/Firefox

Here’s what that same form looks like in Chrome and Firefox. I group them together because both of them render it the same way. While the design remained consistent, the date-picker doesn’t work in these browsers.

Internet Explorer 9

Here’s what the form looks like in Internet Explorer 9. You’ll notice a few more changes now. The placeholder text in the input fields is gone, the line spacing is a little off, and the gradients are gone.

Internet Explorer 7

Finally, let’s look at IE7 (I’ve skipped IE8 because it displays the form similar to IE7). You’ll notice the same issues found in IE9, and a few more: The rounded corners and shadowing have disappeared, and the spacing is a little off. It’s important to note that IE7 handles spacing differently than other browsers.

How to test applications in different browsers

You may be wondering how you can possibly test your applications in each browser, especially considering that the older browsers are no longer available for download. Fortunately, there are a few free tools that let you view your app in different browsers. Here are 3 such tools and a short description of each:

  1. Adobe Browser Lab : Gives you a web-based interface, but only lets you see screenshots of your apps.
  2. IETester: Downloadable software that lets you actually use your web app in all versions of IE (which are the main culprits). I personally use this tool frequently.
  3. Spoon browser sandbox : Requires that you download a browser plugin, but lets you run any browser from the web with no installs. In my experience, loading up each browser always take a few minutes, but it does provide access to the widest array of browsers for testing.

How to avoid this problem

Now that you understand just how different one application may appear in different browsers, and how to test your apps, let’s address the next logical question: How can you avoid this problem? There are a few ways to get around the browser differences, and actually use CSS3 in your current web applications with minimal effort. However, that’s a whole new topic, and one that I will cover in future posts.

Stay tuned for the next post, in which I test a javascript library that claims to bring CSS3 styles to older IE browsers.

Related Posts:

3 thoughts on “The browser mess: What developers must know before using CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *