Reset v2.0

Published 13 years, 10 months past

Earlier today, I updated the CSS Tools: Reset CSS page to list the final version of Reset v2.0, as well as updated the reset.css file in that directory to be v2.0.  (I wonder how many hotlinkers that will surprise.)  In other words, it’s been shipped.  Any subsequent changes will trigger version number changes.

There is one small change I made between 2.0b2 and 2.0 final, which is the replacement of the “THIS IS BETA” warning text with an explicit lack of license.  The reset CSS has been in the public domain ever since I first published it, and the Reset CSS page explicitly said it was, but the file itself never said one way or the other.  Now it does.

Thanks to everyone who contributed their thoughts and perspectives on the new reset.  Here’s to progress!

Comments (25)

  1. Sorry if you’ve been asked this before, but have you considered throwing this up on GitHub? You might get better contributions/suggestions there.

  2. Ben, I’ve considered it but I’m not inclined in that direction and anyway the conversation here has been pretty good. I don’t see that moving to GitHub would gain me anything except having to manage a whole separate interface. I figure anyone who’s interested in contributing can comment here as well as they could there.

  3. And thank you for your work on this. I got a lot of use out of tweaked versions of your first reset.

  4. Great stuff Eric, thanks for sharing this.

    It’s a shame to hear you’re not going to be hosting with Git on GitHub… it could have been really useful for future generations to easily see the progress of the reset from and to it’s current state with social comments inline etc to ask questions etc. Never the less, there’s always your blog :)

  5. Thanks for posting this work. I have been discussing resets at my user group, and we have been using yours as one of our examples.

  6. Thanks Eric,

    Your work is much appreciated.

    Now, time to go buy another Eric Meyer book to thank you right.

  7. I’m updating this on http://www.cssreset.com ASAP – 2.0 looks great!

  8. Thank you. I appreciate your work on this. Its a wonderful resource to use and to learn from.

  9. Hi Eric

    Thanks for this, very well thought out. I’ve updated my own CSS with this, only changing 2 things:

    1. Removed all elements that are obsolete in HTML (aka HTML5) from the first declaration.
    2. Added img{max-width:100%}, which keeps large images from exceeding their containing element’s width, handy for fluid/responsive layouts.

    Totally with you on :focus BTW. Not like it’s a rule, but browsers seem to use it for accessibility features, so best left alone I think.

  10. Pingback ::

    » [Friday Links] The HTML Edition - Wayne State Web Communications Blog

    […] Reset v2.0 […]

  11. Hey Eric,

    The last CSS reset had this in the comments:
    /* tables still need ‘cellspacing=”0″‘ in the markup */

    But now it’s gone!

    Do we no longer need to add cellspacing=”0″ into the markup?

  12. Matt, I don’t think it’s as necessary. Certainly one can add it to the markup if it makes you feel better, or if you have to support a lot of really old browsers, but at this point the vast majority of browsers in use understand those rules and so I don’t think the markup is as important. But absolutely test that assumption in your own projects, and act according to what you find.

  13. Thanks for the update, Eric

    I’ve noticed that the new font: inherit line removes boldness from the <strong> tag – I’m wondering what your reasons behind it are? (I know the tag isn’t supposed to be presentational, but wouldn’t you want strong text to be bold in most cases?)

  14. Awesome, been using reset for a few years now but will upgrade scratch files now.

  15. I like your CSS reset, Im using it now for my project and I have some improvements:

    1. input should be included in all elements reset so it has padding: 0, margin: 0 etc. If you dont include input border-radius wont work, and if you set input as fixed width and height it wont be pixel perfect! It will have some padding or margin depending on the browser!

    2. Add font-size: 62.5% to body tag! After that you can use ems to define font-size. 1em = 10px! This is nice if you prefer ems over px to define font-size, and I believe ems should be used to set font-size.

    3. Add a { text-decoration: none; } I dont use text-decoration that much so… well this last one could stay but I like it better if links dont have text-decoration “out of the box”.

    Here is my modified css reset:
    http://dl.dropbox.com/u/4505125/reset.css

    What do you guys think about this improvements?
    And what about input? Did you have any problems with input?
    I think input should have reset with other elements.

  16. update on last post :)

    For font-size: 62.5% to work font-size: 100%; and font-size: inherit; should be removed from… “global” reset at the top.

    I always use ems for font-size so i removed it from reset and it works good.

    And at the end, at a { text-decoration: none; } you can add outline: 0; so you wont have that outline browsers when you click a link. Some people use keyboards to navigate through links so it ok to left outline for them, but i remove outline on links… it joust looks ugly in nice web application.

    Here is v2:
    http://dl.dropbox.com/u/4505125/resetv2.css

    Hope you will implement some of this code!
    Thanks for the css reset!

  17. Matija, those are certainly things you can do to your personal copy of the rest, but they don’t really belong in the one I created.

    1. I avoid form elements like inputs for very specific reasons (search the site for “Reset Reasoning” and “Formal Weirdness”).
    2. I don’t impose a font size other than the browser default because that presumes that I know the best way to size fonts for anyone who might use the reset, and I don’t.
    3. I definitely don’t touch hyperlink underlining because that’s one of the last sacred user settings, as far as I’m concerned. I firmly believe that whether they’re underlined or not should always be up to the user, not the author.
    4. And considering that one of the primary changes of Reset v2.0 was to stop removing outlines from hyperlinks when people didn’t change my base reset styles, I’m very definitely not adding that back in.

  18. Thanks again for the reset eric! The only thing I ever add to it though is putting outline:none on A tags

  19. One simple question: Why do you you % instead of ems in the reset? Isn’t em the more “modern” unit?

  20. Hi Eric,

    I’m asking myself the same thing as Clair wrote… what’s font: inherit; for?
    It was an ugly surprise not having the <strong>s bolded and the <em>s italic when using this new Reset.css version

  21. FrankyJ, please stop that. You’re making your sites more inaccessible when you do.

    Steve, ems are no more modern than percentages, nor vice versa—the two are interchangeable (per the spec, anyway). I don’t really even have a preference between the two. I simply must’ve been in a percentage mood the day I wrote that declaration.

    Norman (and Clair), that’s exactly what the font: inherit is for. The only reason the original reset didn’t do that was that I couldn’t do it then (since inherit support was more limited) without breaking the normal operation of inheritance. You might usually want emphasis elements italic and strong-emphasis elements bold, but similarly you could argue that since one usually wants h1s to be big, the font size shouldn’t be reset either.

    The point of a reset is to zero out as much as possible, and now it’s more possible to zero out that sort of typographical default. That said, the point of a reset is also to serve as a starting point for your own baseline styles, so if you dislike that declaration, take it out or otherwise adapt the styles to your personal liking. In the meantime, you might think about why those elements have their usual defaults, and try to imagine circumstances in which you might want to do something different.

  22. FYI, there’s a slight clash between reset 2.0 and ie7.js 2.1 beta4 that results in a JavaScript error in IE 6 and 7.

    It’s detailed here, with a CSS workaround:

    http://code.google.com/p/ie7-js/issues/detail?id=307

  23. Hello Eric,

    Nice to see an update !
    What about new elements coming with HTML5 and the new default behaviours of the browsers ? I’m thinking of the way webkit styles the new “search” types of inputs for example.
    You can find some infos here : http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text. It’s not the main subject but is pointed out.

    See you !

  24. What can I say. Thank you thank you thank you Eric for removing outline: 0; – the beers are on me!

  25. Pingback ::

    The Pastry Box Project | 3 June 2013, baked by Oli Studholme

    […] The point of a reset is to zero out as much as possible … [and] to serve as a starting point for your own baseline styles — Eric Meyer […]

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview