Is a "CSS Reset" necessary for cross-browser CSS?

Question

I've been trying to come up with a decent cross-browser CSS framework for my next project, because my last one had a whole bunch of PHP/CSS hacks (horrible things like class="blah<?=isIe()?>"). I'd like to do it "right". I've looked at this question, which did not get a lot of interest, so I'd like to narrow this down: is a CSS reset necessary for cross-browser formatting? What about the Doctype? Should one use

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or what? Also, does anybody have any insight into the usefulness of Blueprint?

score 8 · Answer 1 · answered Oct 19 '09 at 13:16

8

A CSS Reset isn't needed, but it does simplify things.

A Doctype is needed, without one browsers will enter Quirks mode and you open a big box of inconsistencies. The HTML 4.01 Strict Doctype you mention is a good choice, it is the most modern version of HTML that has decent support in the market.

answered Oct 19 '09 at 13:16

Quentin

914,110
126
1,211
1,335

Perfect, that's my current thinking on the thing too. If I can get 90% of the way with just a reset and a Doctype declaration, I'm in :) – Dan Rosenstark Oct 19 '09 at 13:22

score 5 · Accepted Answer · answered Oct 19 '09 at 13:27

5

A CSS reset isn't necessary, but it definitely helps a lot. It will make it so all elements are rendered the same in all browsers.

There are still certain things that will be slightly different due to each browser (mainly IE) rendering the box model differently. There are easier ways of doing browser specific CSS that inline class changes though. You can create an IE specific style sheet and just override the specific things you need changed. You don't need PHP for this either.

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

You can can also use "lt" for < and "gt" for >.

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

For me, doing a CSS reset has fixed 99% of my issues.

Yahoo has a nice one. http://developer.yahoo.com/yui/3/cssreset

answered Oct 19 '09 at 13:27

Josh Close

22,935
13
92
140

Ah yes, overriding. So much nicer than server-side hacking. Thanks for that! – Dan Rosenstark Oct 19 '09 at 13:31
However, what is that [if thing? Browsers know how to handle that? – Dan Rosenstark Oct 19 '09 at 13:32
1

IE knows how to handle that specifically. So you can create an IE specific stylesheet, and every other browser thinks it's just a comment. – Josh Close Oct 19 '09 at 14:06
That is incredible. Incredibly lame that they would need to do this, but good to know. Thanks again! – Dan Rosenstark Oct 19 '09 at 14:24

score 1 · Answer 3 · answered Oct 19 '09 at 13:29

1

I've taken to always using a CSS reset and building back up from this base for my projects. It simplifies things a lot as you no longer have to worry about differing default sizes, etc between browsers. Besides, any sufficiently large project has a large amount of CSS reseting in it anyway, and in those projects not using a CSS reset sheet they will instead most likely have it split across lots of areas, badly done and buggy :)

I tend to use the YUI CSS sheets for my projects but I may now check out Blueprint now it's been brought to my attention ;)

answered Oct 19 '09 at 13:29

workmad3

25,101
4
35
56

1

Tell me what you think about Blueprint, please. More is more. – Dan Rosenstark Oct 19 '09 at 13:33
1

I started off with Blueprint but found it a little heavy and eventually worked my way to a more lightweight, generic css reset. I don't remember where my current one came from because i've customized it so much and pulled it from one project ot the next. – Abram Simon Oct 19 '09 at 13:47

Is a "CSS Reset" necessary for cross-browser CSS?

3 Answers3