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.
+3
A:
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)
Jason McCreary
2010-07-18 23:30:50
Others have suggested such ( http://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.
American Yak
2010-07-18 23:36:44
@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.
Nick Craver
2010-07-18 23:42:22
@American, never said HTML5 or best practices were irrelevant. I'm all for best practices. Just providing my recommendation, take it or leave it.
Jason McCreary
2010-07-19 00:09:13
+1
A:
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.
kingjeffrey
2010-07-19 04:36:42
I'm curious why you opt for border-collapse: separate; instead of collapsed? (Notably not an HTML5 question, but still...)
American Yak
2010-07-26 14:36:49
+2
A:
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.
Grant Palin
2010-07-19 05:03:59
+3
A:
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.)
rdela
2010-07-19 06:54:28