File Under: CSS, HTML5, Web Standards

Popular ‘CSS Reset’ Stylesheet Gets an HTML5 Makeover

Woolly, the CSS sheep.

Eric Meyer introduced the web to the concept of a “reset stylesheet.” The goal of a reset stylesheet is to make sure every browser starts from the same set of display defaults, correcting differences in default line heights, margins, heading fonts and so on. Now Meyer has updated what’s probably the web’s most popular reset stylesheet, the famous “Eric Meyer Reset.”

You can grab the latest version of Meyer’s reset stylesheet from his website (note that Meyer’s main reset page still hosts V1, for the updated version you’ll need to copy and paste from the linked blog post).

The latest version of Meyer’s reset stylesheet dispenses with a few CSS rules that probably aren’t necessary anymore — for example, the font selector in the first reset rule — and adds some new rules to handle HTML5 elements in older browsers.

Meyer also corrects what he considers the biggest mistake of the original code — setting :focus to invisible. The idea behind the rule was sound — reset :focus so authors can easily define their own styles. The problem was that too many people did not define their own focus styles. That meant thousands of websites that simply copied and pasted (or hotlinked) Meyer’s stylesheet, without really reading it, wiped out all the :focus styles.

In the new version Meyer has commented out the entire :focus rule to avoid obliterating :focus styles on sites that simply copy and paste the code. Those that take the time to uncomment the rule will, one hopes, notice the comment telling them they need to define their own visible focus rule.

If you’ve been using the also very popular HTML5 Doctor reset stylesheet, you’ll probably notice some similarities in Meyer’s new effort. Both make excellent starting points for those that have grown accustomed to reset stylesheets. Just keep in mind that Meyer’s update is still a beta release so, as he writes, “use with caution and test with abandon.”

See Also: