Does anybody know of a good HTML5 CSS reset? I'm looking for somthing similar to Eric Meyer's Reset CSS or YUI reset but which covers all the latest tags. I've had a look at the first Google reset, but it was a little poor. Suggestions?

  • tried it zemodo over 7 years ago

7 answers

This was chosen as the best answer

A bit late to the party, but I just came across this HTML 5 Reset CSS:

I haven't tried it yet.

Answered over 7 years ago by Stephen Ireland

Wouldn't you just take your favorite reset and add the following:

section, article, aside, header, footer, nav, dialog, figure { display:block; }

and then delete out the deprecated tags, exactly as described in the article you linked? Not sure what more you'd want from the CSS reset.

Perhaps you're thinking of the JS to add missing elements to IE by Remy Sharp, found here. Alternatively you could use Modernizr, which additionally to creating the html5 elements, marks the body with classes depending on the browsers support of various CSS features.

Answered almost 8 years ago by Dylan Harrington

These are all great.

The one extra tip I'd heard about was writing a short javascript in the header (or include) that forced unsupported browsers to understand that `article, aside,

Answered almost 8 years ago by Luke Dorny

Just add something like this to Eric Meyer's Reset CSS:

article, aside, dialog, figure, footer, header, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;

If there are any other tags you want to add (or remove) check out this list of all HTML5 tags.

Answered almost 8 years ago by Jake Mates

I've given up using a CSS reset style sheet, there's an argument that goes something like:

"each HTML element has attributes for a reason, such as display: block for headings (h1, h2 etc), margins on paragraphs, by resetting them you make more work and CSS code by putting in (often) the same attributes all over again for your headings, imgs and spans etc".

That being said, I do use a generic.css stylesheet which does things like:

img { border: none; } /* stops image borders if they are links */

a { outline-style: none; } /* reset the dotted line on links in Firefox, when clicked */

.nosize { width: auto; border: none; } /* used on radio buttons and checkboxes to stop being sized as 100px wide in my input styles */

and a few more.

Hope that helps.

Answered almost 8 years ago by Yari McGauley

Could you elaborate on which tags are not covered by Eric Meyer's Reset CSS?

Answered almost 8 years ago by Shaun Robinson

I assume this refers to the various new elements added in HTML5, such as section, header, article, etc. Compass seems to have the same trivial reset.

Are you looking for something that just resets it, or that also gives those elements a decent-looking initial style? It seems like the resets do just about right in merely making them display block, since they also zero out margin and padding and such on the regular header elements.

Sadly, it looks like none of the major frameworks (blueprint, 960, elastic, and YAML were the ones I checked) have anything for HTML5. Even compass's edge branch seems to only have a reset for those elements, rather than a good baseline.

Personally, I would take this fabulous opportunity to develop some baseline styles based on the ones that exist for, e.g., the h* elements in one of those projects, fork the project on github, add in the HTML5 stuff, and send in a pull request. In a perfect world, your changes get included ;)

Answered almost 8 years ago by Antonio Salazar Cardozo