CSS reset for HTML5

Question

Best practices?

How does this differ from HTML4 or XHTML1?

There's a lot of discussion going on over here: http://html5doctor.com/html-5-reset-stylesheet/

I'm wondering what other resources/discussion exists.

Uppermost

UPDATE: just discovered this site: html5reset.org w00t! – Uppermost

Answer 1

The comments on that post are crazy. You're certainly not going to find a more thorough discussion. I think you should delete unnecessary rules and deprecated tags from whatever reset you've been using and keep truckin. Paul Irish (jQuery core contributor, co-creator of Modernizr and now Googler) has a comment in the article you link to that has all the HTML5 specific CSS leveling you're likely to need:

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

Google's using a simpler version in their base.css on HTML5Rocks.com:

section, article, header, footer {  display: block; }

You'll still need to use Remy Sharp's simple, bare-bones HTML5 Shiv or Modernizr to run a JavaScript loop to enable styling of new HTML5 elements in IE. HTML5 Shiv just creates the elements to allow styling, Modernizr is a much more full-featured HTML5 and CSS3 detection/styling solution. There's another great post on HTML5 Doctor worth a look, How to use HTML5 in your client work right now from March 2010, co-written by Remy and Richard 8 months after the reset article. They mention using Modernizr "to detect Web Forms 2.0 and other HTML5-type support."

Also, Dion (from Ajaxian and now Palm) tweeted about css3pie that will render visual elements like border-radius, box-shadow, and gradients in IE. Can't vouch for it myself.

(I had more links in here but had to remove all but one b/c my rep. is < 10, if there's something you can't find. reply and I'll post it.)

Thitherto

Note that I've recently adopted a new approach that folds reset + base together: #4393537 – Uppermost

Answer 2

HTML5 is still not widely supported. As such, I don't think you will find an HTML5 specific reset stylesheet yet. My recommendation would be to take Eric Meyer's and add the tags for HTML5. (e.g. nav, header, footer, etc)

Matrilineage

Others have suggested such ( doctype.com/html5-reset-css ), but I'm hoping for a bit more of a substantial answer. Saying "HTML5 is not widely supported" doesn't make HTML5 and best practices irrelevant. – Uppermost

@American - It's more standard for properties than HTML4 was though, from the browsers that I've seen, the properties that differed before don't anymore. If something's consistent cross-browser...there's no need to reset/normalize it. – Solmization

@American, never said HTML5 or best practices were irrelevant. I'm all for best practices. Just providing my recommendation, take it or leave it. – Matrilineage

Answer 3

I just use my variation of Eric Meyer's reset, with my own preferences. For HTML5 compatibility, I add the new elements in as needed.

One thing in particular is that new elements are unstyled by default, so you need to provide your own defaults. This is especially important for block elements like section, aside, and article. You need to ensure you specify display:block for those elements.

Emu

An important note regarding display. – Uppermost

Answer 4

I modified Eric Meyers reset late last year for HTML5. Use it for every project, and it works great: CSS Reset Refreshed

It sets the new HTML5 block elements to display accordingly. This is not done in any mainstream browser today, and you will run into problems if you do not set this.

It also "resets" HTML5 element styles. Technically, the resetting is not yet needed as browsers do not natively style HTML5 elements, but your site will be future proofed for when they do.

Lyford

Answer 5

There's a lot to it. You can't take one persons css rest as gospel. I recently made a custom reset sheet by revising parts of boilerplate, YUI, my preference and some other ppls methods. It's more down to preference & practicality. In terms of differentiating html5 css standards from xhtml & html4, don't bother compare you should aim to use html5 doc-types for all your new work unless your project specifically requires xhtml by request.

Headrest