rulururu

post CSS resets and if you should use them

May 4th, 2008

Filed under: UI, web — mike hall @ 11:44 pm

Rendering a web page that does not have a custom style sheet written for it, will use the browser’s default style sheet to style the content. However, different web browsers have slightly different default style sheets. They may have different margins and paddings from one other, or different default colors, or may have additional or even fewer rules than each other. One way to avoid this potential train wreck is by using a CSS Reset. A CSS reset is basically a set of rules in your style sheet to get the rendering web browser to forgot all its defaults. In this way, different web browsers can all start from the same baseline when determining how to display content.

We seemingly want to use a CSS reset because we want our web page, web site, or web app to render pixel-perfect across all web browsers. If we look at Digg or Wikipedia in IE compared to Firefox or Safari or Opera, they don’t render completely the same. The fonts are slightly different. The font weight in some is bolder than in others. They’re all pretty close, but just a little different.

 

Should web pages look the same across all web browsers or is a little variation ok?

Personally, I’m torn on which side to take (since not everyone uses them). It appeals to me that with a CSS reset, you start from scratch. What you build up will look the same on all browser platforms. The problem is that they still won’t. A CSS reset isn’t actually a pure and complete reset of all style sheet rules. With a CSS reset, you don’t reset everything with the * selector, you just reset a subset of all selectors, because not all browsers will apply things like a margin of 0 and a padding of 0 to all elements in a consistent way. So what you end up with is a lot of different renderings that all look a lot closer than if no reset was performed, but still not pixel perfection. So is it ok that CSS resets don’t completely reset everything? Is this a case where it’s all or nothing?

Not having a complete CSS reset may not be all that bad though. When using CSS resets, you (theoretically) should have to fix less spacing and style issues throughout development. On the web project I’m on, we don’t use CSS resets. While it may not render exactly the same across all browsers, it’s still pretty darn close. However it does make me wonder that if we had used CSS resets, that would we have had to handle a lot fewer of the small problems on a case by case basis and would we have had a lot more of them taken care of from the start.

Getting back to the main point, doesn’t part of this sound like the age old Java/JRE debate? You write code once and it runs on all platforms (that can run the JRE of course) and it looks the same on all platforms too. That’s great and all, but the thing is that no one likes Java. It may look exactly the same whether you’re on Windows, Linux or Mac OS X, but that’s not exactly a good thing. People want their apps to look native to the OS they’re on. I don’t want my app to look like an app that runs on a platform somewhere else. I’ve complained about that same problem with iTunes. With CSS resets, it’s not quite that bad since you’re mostly dealing with margins and paddings and smaller issues like that, but it strikes the same nerve.

 

But should all web pages look the same across all platforms?

The perfectionist in me says “yes”, but the realist in me says that it doesn’t matter. Applications don’t have to look the same in different operating systems, so why should web sites have to look the same in different browsers? Especially when different browser usage is largely (although not always) due to different operating system use. And on a similar note, applications in my opinion shouldn’t look the same on different operating systems. That’s a common downfall in application design: making your application look and feel and work the same in all operating systems due to company branding and application recognition. You should make your application look and feel and work how the users of that operating system think and how they are used to applications working. Making Mac users use Window-isms in an application running on Mac OS X is bad. Making Windows users use Linux-isms in an application running on Windows is bad. But that in itself is probably a discussion for another day…

Maybe the answer to all of this lies in some immortal lyrics from the 80’s:

Now, the world don’t move to the beat of just one drum,
What might be right for you, may not be right for some.

1 Comment »

  1. I would sum it up as: web pages should look *good* across all platforms. Different or not…

    Comment by Aaron
    May 5, 2008 @ 6:23 pm

RSS feed for comments on this post. TrackBack URI

Leave a comment

ruldrurd

Powered by WordPress, Theme based off the "I'm Okay" theme by Laurentiu Piron

Creative Commons License This work is licensed under a Creative Commons Attribution 3.0 United States License.


Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.