Posted by on August 20, 2013 in CSS/HTML/JavaScript, Testing

I’m not a Front End Developer, but I often find myself writing, tweaking and adjusting style-sheets to make a particular element look just right, fix layout bugs and deal with cross-browser issues.

Most often I will find someone else that has already done what I want to do and look at how they’ve styled a given element.

This is hard because for any given element there are hundreds of computed styles, so finding the crucial style differences between the element I’m styling and the element I want it to look like, is a little like finding a needle in a haystack (particularly for someone who isn’t a CSS wizard).

Thus, I wrote a tool to point out the differences for me:

As an [overly-obvious] example, if I was working on the front page of, and couldn’t figure out how to make a couple of buttons look the same, I would click on:

Image 004

And then click on:

Image 005

And inspect the differences:

Image 006

In this case, I can tell that I just need to add a few classes to the first element, let’s try ‘orange’ and ‘lrg’:

Image 007

Problem solved. I wish it was always as easy as just adjusting a couple of classes…

Clearly, this is a contrived example, but I use it all the time for more complex styling issues, and I’ve passed the tool along to my front-end developer friends here. I can only imagine the complex CSS styling issues they have to deal with.

There are likely bugs and browsers the tool doesn’t work in yet, but please give it a try and leave some feedback below.

Join the Discussion

We really do appreciate your feedback, and ask that you please be respectful to other commenters and authors. Any abusive comments may be moderated. For help with a specific problem, please contact customer service.