HTML5 Reset Debug

December 3, 2010 | HTML/CSS | Comments Off on HTML5 Reset Debug

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

Comments are closed.

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by