Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tool to diff two CSS elements

Tags:

css

I have two div's that display slightly differently, I have looked through each of their CSS properties and they appear to be the same, however I am wondering if I've overlooked something.

Is there a tool that will basically diff the CSS of two different elements?

Preferably integrated into the browser.

EDIT

I have used Chrome's built in dev tools and gone through the computed styles area and manually compared each property (IE div.A font-weight:normal; div.B font-weight:normal etc...)

I am looking for a tool that essentially says "Select Element A and B", and shoots out a list of differences. Like a Winmerge comparison or something like that.

like image 943
Nathan Koop Avatar asked Aug 02 '11 13:08

Nathan Koop


2 Answers

Similar question was asked here and, as a result, I created a script that compares two elements in Chrome (you will find it in the linked answer). Also, based on said script, I created a handy Chrome DevTools Extension "CSS Diff".

CSS Diff in action

like image 136
Konrad Dzwinel Avatar answered Nov 06 '22 10:11

Konrad Dzwinel


I think Firediff is what you want. While it doesn't compare two elements, but it kind'of logs DOM changes, so that you can compare those logs to see what's happening.

Also you can go to computed style in Firebug, and copy/paste computed style of each div into a different notepad file, and then compare those files using a file comparison tool. BeyondCompare is really cool.

like image 32
Saeed Neamati Avatar answered Nov 06 '22 11:11

Saeed Neamati