Reseting Browser Defaults (reset.css)
I’ve heard a lot of arguments for and against the CSS reset file and most recently had a short conversation with Jonathan Snook about it. He’s seemed to be avidly against the use of a reset file due to the extra code you need to make it happen. As a CSS person, I like dumping as much stuff as I can into my CSS rather than javaScript, so I’m all for reseting the crappy browser defaults.
After I read Andy Clarke’s Transcending CSS about 6 months ago I started using the one he has in the book. And then Eric Meyer released a version on his blog. Ever since then I’ve been using a hybrid of the two and I added a little extra in there for myself.
Eric and Andy’s reset files don’t include reset rules for the HR element, rightfully so; it’s damn near impossible to get it right since IE treats it weird (try it, you’ll see). So I added the HR into my version of the reset file, it’s not perfect, but I think its better than the default value… and really…how often do you use a horizontal rule? I rarely do.
So today I was poking around my reset file and decided to remove some of the absurd elements that I’ve never used but somehow found their way into my reset file, like q, var and dfn. I have never once used those elements; so I took them out, slimmed down the file a little and thought I’d FINALLY release it. So here it is:
/**
* reset browser defaults
----------------------------------*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td {margin:0;padding:0;}
body {line-height:1;color:#121212;background:#fff;}
h1,h2,h3,h4,h5,h6,p {font-size:100%;font-weight:400;}
ol,ul {list-style:none;}
caption,cite,code,th {font-style:normal;font-weight:400;}
fieldset,img {border:0;}
caption,th {text-align:left;}
:focus {outline:1px dotted #eee;}
table {border-collapse:collapse;border-spacing:0;}
hr {border:0;border-top:1px solid #555;margin:0;height:1px;}
You can also download it at: http://www.csskarma.com/css/reset.css
with ease,
Tim
What I would like is a file that resets all styles to what Firefox sets the defaults as. Seeing as Firefox seems to treat things as I’d expect and that’s what I’m used to using.
Lewis, that’s actually real easy, if you’re on a PC do a search for “html.css”. If you’re on a Mac, it’ll be in the Mozilla Firefox “res” folder (pretty sure it’s there).
All browsers work off a master CSS file, since Firefox is open source, you can just grab it from the Mozilla folder.
The only reason I’d advise against doing that is that the Firefox html.css file is 10Kb where the reset file is only 777bytes. Also since Firefox isn’t 100% standards compliant, there’s probably a fair amount that they’re planning to change for the better in the relatively near future.
It’s not a bad idea to poke around in that html.css file though, you’d be surprised what’s styled in there, including body, html, head, style, script. A lot of elements that we never think get styled, I learned a lot from it.
Aww… what’s wrong with the
qelement? Inline quotes have a place too!Personally I use the Yahoo! reset style. I don’t know why, it was just the first I came across. Don’t forget to take out all the whitespace to cut down on the size even more!
When did you get to talk to Jonathon Snook? Was that WDN, you lucky …?
yea, I actually leave the whitespace in now, when you have a giant css file I think it’s 100% easier to scan through. You can see it if you view the CSS on this site, looks really nice and only adds a few byes to the file size.
I read an article on it a while ago…lemme search for it…Single Line CSS
gives a good balance of readability and optimization, i think.
Yea I talked to him for a few minutes at WDN, very cool conference, I posted my notes earlier this week if you want to look through ‘em
Thanks Tim! I had a feeling that was probably the case, I just never got round to doing some research.
It’s mostly things like lists that I need it for, so I’ll probably only use a few lines of it.