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: http://elementcomparer.aws.af.cm/
As an [overly-obvious] example, if I was working on the front page of Ancestry.com, and couldn’t figure out how to make a couple of buttons look the same, I would click on:
And then click on:
And inspect the differences:
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’:
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.