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.

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.)

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)

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.