meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Reset v2.0

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!

25 Responses»

    • #1
    • Comment
    • Wed 26 Jan 2011
    • 1405
    Ben Truyman wrote in to say...

    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
    • Comment
    • Wed 26 Jan 2011
    • 1420
    Eric Meyer wrote in to say...

    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
    • Comment
    • Wed 26 Jan 2011
    • 1456
    Eric wrote in to say...

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

    • #4
    • Comment
    • Wed 26 Jan 2011
    • 1530
    Kai Chan Vong wrote in to say...

    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
    • Comment
    • Wed 26 Jan 2011
    • 1623
    John Davey wrote in to say...

    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
    • Comment
    • Wed 26 Jan 2011
    • 1801
    Sheldon Kotyk wrote in to say...

    Thanks Eric,

    Your work is much appreciated.

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

    • #7
    • Comment
    • Wed 26 Jan 2011
    • 1920
    Joss wrote in to say...

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

    • #8
    • Comment
    • Wed 26 Jan 2011
    • 2055
    Douglas T wrote in to say...

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

    • #9
    • Comment
    • Thu 27 Jan 2011
    • 0955
    David Goss wrote in to say...

    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
    • Fri 28 Jan 2011
    • 0900
    • #11
    • Comment
    • Wed 2 Feb 2011
    • 2133
    Matt wrote in to say...

    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
    • Comment
    • Wed 2 Feb 2011
    • 2138
    Eric Meyer wrote in to say...

    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
    • Comment
    • Thu 3 Feb 2011
    • 1924
    Clair wrote in to say...

    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
    • Comment
    • Tue 8 Feb 2011
    • 1135
    57 Degrees North wrote in to say...

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

    • #15
    • Comment
    • Fri 11 Feb 2011
    • 1540
    Matija wrote in to say...

    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
    • Comment
    • Fri 11 Feb 2011
    • 1559
    Matija wrote in to say...

    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
    • Comment
    • Fri 11 Feb 2011
    • 1628
    Eric Meyer wrote in to say...

    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
    • Comment
    • Sun 13 Feb 2011
    • 2217
    FrankyJ wrote in to say...

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

    • #19
    • Comment
    • Fri 25 Feb 2011
    • 1649
    Steve Ooo wrote in to say...

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

    • #20
    • Comment
    • Sat 5 Mar 2011
    • 1735
    Norman wrote in to say...

    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
    • Comment
    • Sat 5 Mar 2011
    • 2127
    Eric Meyer wrote in to say...

    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
    • Comment
    • Mon 7 Mar 2011
    • 0605
    Paul D. Waite wrote in to say...

    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
    • Comment
    • Tue 29 Mar 2011
    • 0746
    McBenny wrote in to say...

    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
    • Comment
    • Thu 31 Mar 2011
    • 1655
    Rob wrote in to say...

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

    • #25
    • Pingback
    • Mon 3 Jun 2013
    • 0552
    Received from 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 [...]

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


January 2011
SMTWTFS
December February
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Sidestep

Feeds

Extras