#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2008
    Posts
    15
    Rep Power
    0

    CSS Reset. Which one is better?


    I have two CSS reset files.

    One by: Erik Meyer

    The other by: Yahoo! Inc. All rights reserved. Code licensed under the BSD License

    Which is better?

    I tried to put links to them, but the forum is prohibiting me, so if anyone is familiar, then advise.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4310
    Eric's is better, however, I prefer to just set the styles for each element as needed.

    Comments on this post

    • Akh agrees : The best approach
    • Skipt agrees : Yes. ERIC'S is better ;)
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2009
    Posts
    11
    Rep Power
    0
    I don't know what Yahoo!'s Reset CSS is like, as no one provided a link.
    But looking at Erics version, I would disagree about it being good.

    When it comes to resetting all margins, paddings etc to allow all web brower to abide the same instructions, the best way I feel to do this is to use the * definition (Its simple to).

    Code:
    *{
    padding: 0px;
    margin: 0px;
    ...
    }
  6. #4
  7. Banned

    Join Date
    Jul 2004
    Location
    The Mews At Windsor Heights
    Posts
    5,326
    Rep Power
    0
    Read the reasoning behind Meyer's reset: http://meyerweb.com/eric/thoughts/20...set-reasoning/

    I started using it recently and it does iron out annoying browser inconsistencies.

    I think it's best to avoid using the * selector as it's slow and can cause some bugs. There is some explanation here: http://sixrevisions.com/css/css-tips...ith-css-reset/

    Comments on this post

    • Akh agrees
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2008
    Posts
    15
    Rep Power
    0
    I have read SO MANY different view points on these CSS resets.
    I have checked many sites and everyone has a different opinion.
    I just wish someone could say, this is one I produced and it does all its suppose to.

    Is there such a thing as a perfect CSS reset font?
  10. #6
  11. Banned

    Join Date
    Jul 2004
    Location
    The Mews At Windsor Heights
    Posts
    5,326
    Rep Power
    0
    Read the article from sixrevisions I linked. It's a very good, rounded discussion on CSS reset. It also contains links to other informative articles - they are all good and accurate.
  12. #7
  13. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    This is an issue for which I can see no sane reason.

    People speak of different browser defaults being brought to heel. Just which default values are there that differ? The default values may not be exactly what you want, but where do the vendors have significant differences?

    If you want something different, then set it the way you want it to be. Zeroing the default, then resetting to the desired value is a ridiculous idea.

    Meyer's apologia makes no sense at all.

    The Six Revisions article is likewise lacking in sane arguments.

    Their link example is specious at best. If a browser comes along that completely ignores longstanding convention, then its users will expect links to look different. And, if the author hasn't purposely set the way links should render, why should he mess with user expectations for the default?

    The paragraph margin example is based on ignorance. IE renders differently because the container has layout. IE mishandles margin collapse in that case. Other differences are due to different default fonts; the author didn't specify fonts, leaving it to the user/browser configuration. Test case:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xml:lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          lang="en">
    <head>
      <meta name="generator"
            content=
            "HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
    
      <title></title>
      <meta http-equiv="content-type"
            content="text/html; charset=utf-8" />
      <meta name="author"
            content="Gary Turner" />
      <style type="text/css">
    /*<![CDATA[*/
    
      div {
        border: 1px solid black;
        }
    
      div.layout {
        zoom: 1;
        }
    
      /*]]>*/
      </style>
    </head>
    
    <body>
      <div>
        <p>test paragraph: no layout</p>
        <p>test paragraph: no layout</p>
        <p>test paragraph: no layout</p>
      </div>
    
      <div class="layout">
        <p>test paragraph: parent has layout</p>
        <p>test paragraph: parent has layout</p>
        <p>test paragraph: parent has layout</p>
      </div>
    </body>
    </html>
    This is not to say you can't set your own values of font face, size/scale, leading, margins, indentions, etc.. You can, and probably should, as the default values aren't perfect, typographically. What you shouldn't do is zero a bunch of stuff, then turn around and reset to the desired values. That's just inane. Besides, if you miss setting an element, the defaults provide a safe fallback, where a zero is probably ugly.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4310
    This article explains some of the problems caused by using the universal margins and padding reset: No Margin For Error
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. Banned

    Join Date
    Jul 2004
    Location
    The Mews At Windsor Heights
    Posts
    5,326
    Rep Power
    0
    Originally Posted by k55st
    Zeroing the default, then resetting to the desired value is a ridiculous idea."
    Yes but that's not what a CSS reset does. It's more about resetting the defaults to a common baseline. You seem to be making a lot of assumptions and generalisations I agree the <p> example is slightly misleading - but it's fine. What's wrong with using a CSS reset to quash IE's hasLayout rendering bug?

    I never used to use a CSS reset but on a recent project there were some inconsistencies that could not be addressed without one. In some situations, it's necessary to ensure that different browsers start from the same blank canvas. Otherwise it can be impossible, for example, to make text exactly the same size in different browsers.

    There's not one single CSS reset that everyone should always use - each reset should be custom-tailored to a specific project (if the project requires it). For example, there is no point resetting elements that are never even used in the site.

    For balance, Johnathan Snook discusses why he doesn’t reset his styles
  18. #10
  19. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    I don't know what Yahoo!'s Reset CSS is like, as no one provided a link.
    But looking at Erics version, I would disagree about it being good.
    No one provided a link? If you went to google then this link would have came up

    http://developer.yahoo.com/yui/reset/

    I don't use css reset because not all browsers support it fully yet. I also don't want my form elements to have default no padding or margin. Just seems simpler to leave it out. Not saying its worthless because it does help with making other browsers look the same

    This is an issue for which I can see no sane reason.
    I smell a flame war coming
  20. #11
  21. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1228
    It think it boils down to that if you are inexperienced with css you probably shouldn't use these reset styles and if you are experienced you probably don't need them.

    I've seen many cases where people use Meyers reset and don't supply any style for :focus. This really breaks behavior users expect.

    I rather work with the defaults and tweak them where I seem it necessary, it will just be double work if I reset everything.

    Comments on this post

    • kk5st agrees : exactly
  22. #12
  23. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Originally Posted by b3n
    Yes but that's not what a CSS reset does. It's more about resetting the defaults to a common baseline. You seem to be making a lot of assumptions and generalisations
    The advocates of css resets are the sources of generalizations. I have yet to see a single example of default value differences among browsers—and don't throw out list indentions. All browsers indent the same 40px by default. Only the mechanisms are different, and that doesn't matter unless you're making it a different value. (I will acknowledge that Opera has a different bullet for nested items—if it matters, set the list markers for yourself.)

    I agree the <p> example is slightly misleading - but it's fine. What's wrong with using a CSS reset to quash IE's hasLayout rendering bug?
    That's about killing a pestilent bug, not reset.

    I never used to use a CSS reset but on a recent project there were some inconsistencies that could not be addressed without one.
    Be specific. Don't generalize.

    In some situations, it's necessary to ensure that different browsers start from the same blank canvas.
    Be specific. Don't generalize.

    Otherwise it can be impossible, for example, to make text exactly the same size in different browsers.
    I have not found that to be an issue when comparing on identical monitors, at the same resolutions, with the same font faces, and with the same user configurations. Otherwise, all bets are off, no matter what you do.

    There's not one single CSS reset that everyone should always use - each reset should be custom-tailored to a specific project (if the project requires it). For example, there is no point resetting elements that are never even used in the site.
    Agreed, mostly. Nor, is there a point to resetting any elements that do not differ between browsers. Which elements are those? No one's yet said.

    Pretty much what I said, but more politely.

    cheers,

    gary

    Comments on this post

    • Kravvitz agrees
    • Akh agrees
    Last edited by kk5st; February 12th, 2009 at 02:02 PM. Reason: typos
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  24. #13
  25. Banned

    Join Date
    Jul 2004
    Location
    The Mews At Windsor Heights
    Posts
    5,326
    Rep Power
    0
    Originally Posted by kk5st
    Originally Posted by b3n
    For balance, Johnathan Snook discusses why he doesn’t reset his styles
    Pretty much what I said, but more politely.
    Yes, the Snook link was already in the sixrevisions article, so why did you feel you had to say anything? I feel that the article(s) covered the issue in a more balanced, objective (polite) way

    The point I was trying to make is that if a CSS reset helps, then it is fine to use one - but don't just automatically use one for everything as it's usually not necessary (if you know what you're doing).

    Originally Posted by kk5st
    Nor, is there a point to resetting any elements that do not differ between browsers. Which elements are those? No one's yet said.
    I think that the idea behind that is to protect against any future browsers that might introduce their own idiosyncracies. I guess it's safer and easier to re-define everything, just in case.
  26. #14
  27. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Originally Posted by b3n
    Yes, the Snook link was already in the sixrevisions article, so why did you feel you had to say anything? I feel that the article(s) covered the issue in a more balanced, objective (polite) way
    Because you had cited the Meyer and Six Revisions articles, not Snook. In re Snook, by polite, I meant wishy washy. Balanced and objective do not imply equal validity of ideas. A bad idea does not deserve the respect you'd give a good idea, or even a so-so idea.

    The point I was trying to make is that if a CSS reset helps, then it is fine to use one - but don't just automatically use one for everything as it's usually not necessary (if you know what you're doing).
    And, my point is that no one has shown where it is actually a help. You said you've found cases where it was needed/helpful, but you've yet to provide any evidence.

    I think that the idea behind that is to protect against any future browsers that might introduce their own idiosyncracies[sic]. I guess it's safer and easier to re-define everything, just in case.
    That's an inane argument. If such a browser shows up, deal with it then. The idea of redefining the default values of the elements on the off chance that some where, some when, some as yet unknown browser will use some default property value for some element that is different from what we have now in the existing browsers by implicit agreement among vendors, is silly.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  28. #15
  29. Banned

    Join Date
    Jul 2004
    Location
    The Mews At Windsor Heights
    Posts
    5,326
    Rep Power
    0
    Originally Posted by kk5st
    Because you had cited the Meyer and Six Revisions articles, not Snook.
    I cited Snook, indirectly. Anyone who read the article would have seen that.

    Originally Posted by kk5st
    In re Snook, by polite, I meant wishy washy. Balanced and objective do not imply equal validity of ideas. A bad idea does not deserve the respect you'd give a good idea, or even a so-so idea.
    This makes no sense. Ideas aren't respected at all - only the person who thought of the idea. All things should be judged objectively, regardless of what they are, or whether they are good/bad examples.

    Originally Posted by kk5st
    And, my point is that no one has shown where it is actually a help. You said you've found cases where it was needed/helpful, but you've yet to provide any evidence.
    Similarly, I don't think you can prove categorically that a reset is never needed.

    I had a CSS problem that I could not eliminate - after using a reset it was fixed. Maybe I could have avoided the reset if I spent longer on it - but I had already wasted too much time and the deadline was looming.

    Originally Posted by kk5st
    That's an inane argument. If such a browser shows up, deal with it then. The idea of redefining the default values of the elements on the off chance that some where, some when, some as yet unknown browser will use some default property value for some element that is different from what we have now in the existing browsers by implicit agreement among vendors, is silly.
    It's a logical argument. It's cost-effective, with regards to time and money. Otherwise developers would have to go back and re-edit every stylesheet, for every project, every time that a new browser (or browser version) version was released.

    I think we'll have to agree to differ

    Thanks,

IMN logo majestic logo threadwatch logo seochat tools logo