122

Which HTML5 reset CSS do you use and why? Is there one that you've found to cover more cases?

I've started using HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/ It seems to work, but I'm wondering if there is something better out there.

Darryl Hein
  • 142,451
  • 95
  • 218
  • 261
  • 1
    Similar to: http://stackoverflow.com/questions/3277671/css-reset-for-html5 – Mark Byers Aug 15 '10 at 00:39
  • It's similar yes, but I'm more just looking to use someone elses instead of modifying one to make it work so at a later date, if needed, I can just copy a newer version. – Darryl Hein Aug 15 '10 at 01:36
  • 20
    D_N I understand that, but HTML5 does have an affect on the CSS, especially on a reset CSS where you now need to include other tags, like nav or aside. – Darryl Hein Aug 15 '10 at 15:30

8 Answers8

40

Real talk: Despite the markdowns kaikai is right, you only need to reset *padding & margin to 0.

Though unfortunately 99% of us do not have resources or man power to keep up with the hundreds of browser versions out there. So a reset sheet is essential for the typical website.

html5reset: (It's too interfering)

I just took a look at http://html5reset.org/

img,
object,
embed {max-width: 100%;}

And:

html {overflow-y: scroll;}

I understand it has good intentions but, that's not the job of a reset sheet. It's making too many assumptions.

BluePrint Reset:(literally a blueprint) 

body {
  line-height: 1.5;
  background: white;
}

Whats up with 1.5. And why background white?(I know it's for correcting but still not necessary)

Normalize.css: (Not normal)

https://github.com/necolas/normalize.css/blob/master/normalize.css

It started good with some webkit/ie hacks but

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

Every header tag is targeted. & they don't reset the line-height of the body.

I'm sure all the above does the intended job well, but will probably be overridden more than necessary.

Eric Meyer

YUI

HTML5Boilerplate

The above are more for pros with Boilerplate leaning to the (over friendly) side I'm sure due to popularity. At the moment 80% of my customized reset is boilerplate.

I'm going to go though all three bit by bit and make my own, it's not rocket science.

Community
  • 1
  • 1
frontsideup
  • 2,833
  • 1
  • 21
  • 23
  • 2
    Note that normalize.css has changed by now; font-sizes of headings are no longer set. – Ruben Verborgh Feb 10 '14 at 14:22
  • 2
    It's all worth mentioning that Normalize.css doesn't just manage desktop browsers but also mobile browsers such as iOS Safari, Chrome for Android, stock browsers, et al., which are unique in their own right. For this reason and others Normalize is baked into many popular frameworks. – Matt Smith Feb 15 '14 at 03:46
  • I used to use 'Eric Meyer' but now use 'YUI' reset style sheet because of this: http://danielsokolowski.blogspot.ca/2012/11/a-tip-for-relatively-sized-html-input.html – Daniel Sokolowski May 09 '17 at 16:41
19

Normalize.css is great for both desktop and mobile browsers and is used in many popular HTML templates.

But what about using the CSS all property which resets CSS properties except direction and unicode-bidi? That way you don't need to include any additional files:

{
    all: unset
}

CSS all has wide support except in IE/Edge. Similarly with unset.

Matt Smith
  • 1,932
  • 1
  • 21
  • 41
  • Interesting but it seems to be the slowest solution and supported only in Firefox, thus it's got no real use (at least at this point of time). – tomasz86 Feb 17 '14 at 03:34
  • True that only Firefox is supporting it right now but I think it has a good chance of ending up in solutions like Modernizr. https://github.com/Modernizr/Modernizr/issues/1219 – Matt Smith Feb 17 '14 at 17:04
6

The reset.css used by Blueprint CSS framework works well and includes HTML5 elements. It gets included in their screen.css file.

Blueprint is a useful resource for rapid prototyping of new sites, and their source code is well organized and worth learning from.

calvinf
  • 3,754
  • 3
  • 28
  • 41
4

Eric Meyer also released v2 of his CSS reset (and he did so almost a year ago now):

http://meyerweb.com/eric/tools/css/reset/

Illes Peter
  • 1,637
  • 5
  • 25
  • 43
4
  1. Preserves useful defaults, unlike many CSS resets.
  2. Normalizes styles for a wide range of HTML elements.
  3. Corrects bugs and common browser inconsistencies.
  4. Improves usability with subtle improvements.
  5. Explains what code does using detailed comments.

normalize.css

zzart
  • 11,207
  • 5
  • 52
  • 47
2
* {
    margin: 0;
    padding: 0;
}

simple yet entirely effective. perhaps throw in a:

body {
    font-size: small;
}

for good measure.

kaikai
  • 35
  • 5
  • 9
    Zapping the default margin and padding on form controls can have unwelcome effects and named font-size keywords don't have entirely consistent behavior across browsers. This is overly simplistic. It also fails to set styles for elements introduced in HTML 5, so they remain `display: inline`. – Quentin Aug 15 '10 at 10:20
  • 4
    I disagree. Margin and padding are the only unpredictable properties. The font-size property uses a named keyword to specifically target browsers who read those, which makes the YUI font scales effective across every major browser (http://developer.yahoo.com/yui/examples/fonts/fonts-size_source.html). I would also never want to impose upon the normal flow of elements and so I would leave those HTML 5 elements alone, only changing their display type or positioning as needed. I realize my choice is unpopular, but it is far more elegant than other solutions and it works. – kaikai Aug 15 '10 at 23:22
  • 3
    No no no no no! HTML5 elements do not have have the display property set, so they gracefully fall back to the default `display: inline`. Have you ever seen a site diagram where the header, footer, navigation, side columns, practically every page section flowing inline??? Sorry kaikai, but this just isn't acceptable! – Filip Dupanović Nov 20 '10 at 22:37
  • Dude, I'm not even an HTML5 guru (yet) and I know this is totally completely not the right way to reset. – Icemanind Apr 06 '13 at 02:59
  • 4
    Absolutely valid answer. The only drawback might be that ``*`` selectors are slow, I heard. – Anton Strogonoff May 26 '13 at 05:31
  • @AntonStrogonoff Although valid answer this is part of the worst practices due to usage of `*` selector. This is slow and introduces hard to follow behavior of css. – skmasq Aug 05 '16 at 09:36
  • @skmasq the question is “what reset do you use?”, and it is addressed precisely, which is why I upvoted the answer. Doesn’t matter now that it’s a community wiki. If you could clarify what hard to follow behavior would you observe in modern browsers with these CSS rules, that’d be useful! – Anton Strogonoff Aug 05 '16 at 14:44
2

The HTML5 spec includes recommended CSS declarations for CSS-capable browsers. For the fun of it I took them and reverted those, where it makes sense. You can view the result in this article.

However, I don't recommend using this in production. It's more a proof of concept and might better be used to give hints than to serve as an all-purpose-reset stylesheet. Any of the other suggestions before might be a better choice.

Boldewyn
  • 81,211
  • 44
  • 156
  • 212
0

I use Normalize or the reset from HTML5 Doctor, and I alter it to fit the project I'm working on.

BTW it's only the concept of using a reset that's become more or less a standard.

cornishninja
  • 553
  • 5
  • 12
  • Do you have any additional details? – James A Mohler Jan 07 '13 at 16:38
  • I don't leave in elements that I'm not using ion a specific project. For example I remove form elements if I'm not using forms. I'm sure you get the idea. There's no point in resetting elements that you aren't using. – cornishninja Jan 07 '13 at 16:50
  • To back up my point about modifying the reset to fit my needs: http://www.cssreset.com/which-css-reset-should-i-use/ – cornishninja Jan 07 '13 at 19:21