Which HTML5 Reset CSS Do You Use and Why

CSS reset for HTML5

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

CSS reset - What exactly does it do?

In the beginning, there was no standardisation on how styles worked, each browser implemented what it felt was right. One of the reasons you see so many questions about style errors in IE is because IE was the browser with the most dissimilarities from other browsers in terms of styling. Though IE has improved and so have other browsers they still apply their own borders, padding and margins, zoom, fonts to elements to give their own unique feel to pages. One example is, chrome gives its own yellow borders to text boxes. The "reset" actually "resets" all these styles to zero/none, so that you don't see any styles you haven't applied to your page.

If these styles are not "reset", you will see unwanted styles/effects and things breaking. Its generally recommended to "reset" the browser's styles.

Have a look at this article Should you Reset Your CSS?

html5 reset css tips - with and without universal selector

I had the same question, so I searched it out and found this article:

http://www.cssreset.com/what-is-a-css-reset/

Which states "If your CSS Reset isn’t carefully written, you might find that your CSS rules are being themselves overwritten by the code that was supposed to be their baseline! This is often a problem when using the Universal Selector Reset, but won’t generally be an issue if working with well-written code such as the HTML5 Doctor CSS Reset."

Hope this helps!

CSS reset for HTML5

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

Best-practice approach to reset CSS styles on a specific element?

That will be very difficult/likely impossible to ensure. The type of solutions that Starx is referring to assume no preset styles other than the browser defaults, and "reset" in that context refers to harmonizing the inconsistencies across various browser defaults.

But in your case, your client CSS may already contain highly specific selectors such as

#someDiv .aClass a{float:left;}

... and applying those "CSS reset" solutions simply will not override this.

You can see that Truth's selectors also have lower specificity than this, and therefore will fail to ovetride the client's styles in such cases.

Your question is very similar: How to remove all inherited and computed styles from an element?

So the short answer is: there is no way to ensure this because you cannot "remove all inherited and computed styles from an element" ... update: ...unless you can anticipate and override every preexisting style declaration with new declarations having appropriate specificity.

all: initial vs. using CSS resets

You are correct that initial resets to initial values for a given CSS property, but note that CSS properties have no initial value for each element-- they only have an initial value for that property, which will be the same for any and all elements it is applied to. For instance, the color property spec has a single initial value defined-- not a list of initial values to which it should be set for every element. So when you use it in conjunction with all, using:

* {
  all: initial
}

...you are telling the browser to take every property of every single element and reset it to the property's default value. So, for instance, the display property spec defines its initial value as inline-- so every single element on your page will be displayed as inline.

Is this CSS Reset okay?

I generally think that wide-ranging CSS resets are not the best. I agree with Russ Weakley, who "zeroed" in on three big concerns:

1. Every element that's reset must be redefined. CSS file size & maintenance can increase.
2. You could forget to restyle something you reset.
3. Some resets are harmful to users who rely on keyboards for navigation.

See his whole presentation here: http://www.maxdesign.com.au/articles/css-reset/

Specifically, I think the following should not be reset, as it is in your stylesheet

:before, :after {
    content: '';
}

:link, :visited, :hover, :active {
    color: inherit;
    color: #000; /* for IE7 'inherit' problem (again) */
    text-decoration: none;
}

:focus {
    outline: 0;
}

ol li, ul li {
    list-style: none;
}

focus is an accessibility issue.

ol and ul should have their default styles. You are likely to need them. (Although you may need to overwrite them for a nav.)

:link, :visited, :hover, :active I would reset these only as needed.

As mentioned and acknowledged by you *{ // } could cause performance issues and may cause unforeseen issues.

Also, I would consider adding something to reset the big top and bottom margins on headers

h1, h2, h3, h4, h5, h6 {margin-top:0; margin-bottom:0;}

Should my css reset go before or after my css code?

CSS prioritizes as it progresses, as well as by a scoring method that can be reviewed in Toni's comment: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

You would do your reset first, then override your styles as you progress in the stylesheet. Consider the rules in that link to fully understand how css will score the selectors.

Also, Sadaj has a good suggestion as well.

---

Related Topics