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.
Anders Lyman is a Software Engineer at Ancestry.com in Story Engineering. He and his team are innovators, creating tools that are often adopted and used by other teams. He enjoys reading, cooking, spending time with his beautiful wife and playing with his 9 month old daughter.