CSS Reset and other browser neutralizers.

[samanime]

I've heard about CSS reset but I've never really used it or any other neutralizers to help me in my work. But, the more I read about them, the more curious I get and I wonder if they'll really help me to create better pages faster.

So, what are they all about exactly? Is there a standard reset page everyone uses, and are there any other reset-like pages that everyone uses often with their designs?

Thanks.

[mhulse]

Hi,

I personally like the YUI approach to resets, fonts, and base styles.

undohtml.css by Tantek.

For more info, Google "css frameworks". I am sure most will have a reset style sheet... I personally like and use variations of the YUI utility style sheets.

Good luck.
Cheers,
Micky

[junjun]

The simplest for reset is just a CSS rule removing all default padding and margin on all elements:
* {margin: 0; padding: 0;}

Nowadays it's more or less referring to more advanced stylesheets that makes it more efficient to make consistent designs and get rid of some of the peculiar browser differences. Eric Meyer and the Yahoo interface library have the ones I've looked at
http://meyerweb.com/eric/thoughts/20...eset-reloaded/
http://developer.yahoo.com/yui/reset/

I've basically made my own, but it's more of a custom reset based on the group of proprietary web applications I style on a regular basis.

[mhulse]

Howdy,

Here is a similar thread that talks about the * reset approach.

I think it is best to avoid that approach for anything other than quick-and-dirty setups... In the above thread, I quote and link to some good info as to why one should avoid using the * reset. Paul has also posted some great info.

Off Topic:

JunJun, cool cat pic!

[junjun]

Off Topic:

Off Topic:

JunJun, cool cat pic!

Ay, it was time for an update

[samanime]

Thanks for the info. I'll check out those articles you gave me.

Up to this point, the only kind of "reset" I really used was to simply remove the padding and margin, but only on the elements I needed it removed on.

[samanime]

After reading all of those documents you presented and actually taking a look at the CSS for each I think I'll go with Eric's. The Yahoo one seemed to be almost over-complete, providing a lot of stuff I didn't really need. Tantek's seemed a little under-developed if I really wanted to use the concept of reseting to it's full extend.

I think I'll take it for a test drive, but I may end up just making my own (which, judging by the contents of those CSS documents, it looks like I've been doing without realizing it anyways).

Thanks for the help and info.

[mhulse]

I think Tantek was the originator of the Reset... and that is probably why it is not as robust as any of the others.

I have yet to really looks at Eric's reset, but I think the YUI reset, fonts, and base files make for the perfect combination... But yeah, I have tweaked mine too... Sounds like that is the best bet: find an approach that works well, and modify it to suit your needs. No reason to re-invent the wheel.

Cheers,
Micky

[markbrown4]

I think i'll adopt the YUI reset as well - i'll just try and trim it down to reset for only the elements that I use regularly.

samanime, it's not only being able to achieve more browser consistency, it means that you don't need to keep writing margin: 0; padding: 0; on every element your styling. It keeps your CSS more lightweight and it's one less thing to think about.

[samanime]

Yes, that's a good point.

However, along with that point comes another question:
Is it better to have a few more lines of CSS in your page, but keep it all in one page call, or to make your main CSS file smaller, but add 1-3 additional page calls. This referring to transfer speeds, bandwidth usage, page calls, etc.

That's probably the first thing that pops into my mind when I see someone using about 6 different CSS pages.

[junjun]

I try to find a balance, I don't want too many requests to server, but I'd like to keep my CSS logically separated as well. Typically one stylesheet for every major app, one for general layout, one for forms and one for print.

[mhulse]

I am looking forward to using this technique. View source on Home page of Sitepoint to see it in action... pretty cool.

[samanime]

That is an interesting technique indeed. I typically do a manual version of that, but that seems like it could come in handy, especially for larger projects. I'll bookmark that page for future use. Good find.

[rguy84]

The simplest for reset is just a CSS rule removing all default padding and margin on all elements:
* {margin: 0; padding: 0;}

I didn't look at the Meyer link you gave, but he has issues with the universal selector.

[DaveWoods]

You may have problems using the universal selector if you have a lot of forms.

If I'm dealing with forms then I'll tend to use Meyer's reset method.

However, if I'm dealing with a standard page without any forms then I see no problem in using the universal reset method.

[junjun]

I didn't look at the Meyer link you gave, but he has issues with the universal selector.

Look at the Meyer and Yahoo link, it will show you more advanced versions of CSS resets.

[mhulse]

Just for the sake of adding more relevant info to this thread, here is what I posted elsewhere:

...<snip>...

The YUI resets are nice, because it does not totally slaughter form elements... This thread might help explain better (navigate through the messages at bottom)... Which refers to this:

Starting with CSS: revisited

The other thing is the use of the "star-selector," or * { } in CSS.
The star selector selects every single element, which produces an
overkill of style-nullifying. Sander pointed out that Mozilla (for
one) has a great deal of default styling on form controls, which the
star selector nullifies when applying margin:0 and padding:0 to it. As
a result, buttons don't behave like buttons anymore, and so forth. I
never really noticed that, which only goes to show that I'm no longer
used to buttons behaving like buttons. I did some research in this,
and as it turned out, most of all the weblogs I frequently comment on
have this same problem: buttons not behaving like buttons. In most
cases, it was indeed the star selector being the culprit.

Additionally, Mozilla developers have stated that the star selector
slows down things. While this is apparently not noticeable for
end-users in most cases, it may slow down other aspects that interact
with the CSS as well. And don't forget that it's definitely a bit
overkill to loop through all elements when you only have to alter a
dozen of them, roughly.

...<snip>...