Search code examples
csshtmlcss-reset

CSS reset for HTML5


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.


Solution

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