SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)

    CSS Reset and other browser neutralizers.

    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.

  2. #2
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  5. #5
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by mhulse View Post
    Off Topic:

    JunJun, cool cat pic!
    Ay, it was time for an update

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.

  10. #10
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am looking forward to using this technique. View source on Home page of Sitepoint to see it in action... pretty cool.

  13. #13
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by junjun View Post
    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.
    Ryan B | My Blog | Twitter

  15. #15
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  16. #16
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rguy84 View Post
    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.

  17. #17
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just for the sake of adding more relevant info to this thread, here is what I posted elsewhere:

    Quote Originally Posted by mhulse View Post
    ...<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:

    Quote Originally Posted by Faruk Ateş
    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>...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •