HTML5 Reset Debug

By BylineJohn Dyer on

I’m a huge fan of using HTML Reset, originally created by Eric Meyer and given HTML5 updates by people like Richard Clark.
The only problem is that when you try to use Firebug, WebKit inspector, IE Developer Tools, or Opera Dragonfly, you get tons of declarations. Ever seen something like this?

HTML Reset Production


It’s a little hard to tell what’s going on. So instead of several large blocks of HTML selectors which are needed in production, I’ve listed each selector only once and explicitly defined all CSS properties and values. This makes the above WebKit screenshot turn into

HTML Reset Debug


Of course, you should never use this in production because it’s around 11KB compared to .6KB for a minified HTML reset designed for production. But I’ve been finding it helpful for development, and I thought I would share it.

Make Your Own

Get it