Tool for comparing CSS files?


I’m writing a web application in a proprietary server page framework provided by a large business software vendor. They give you a suite of standard stylesheets for their own applications, and we’ve tinkered with these to make them fit the requirements for our new application.

The client has recently upgraded to a new version of the software and the standard CSS files have completely changed (as in the file has been completely re-ordered and reformatted). Looking at the end results in a browser, not a lot has changed between the two versions, but it’s impossible to tell which styles are new/changed using a standard diff or Beyond Compare comparison, since the files look nothing alike.

Is there a CSS comparison tool out there that actually parses CSS files and can tell you the differences between the style declarations in different files?



You could use Opera Dragonfly or Firebug to look at the resulting CSS on each element, and get a list of the properties applied and inherited, and the calculated values, but you’d still have to compare the two manually. But at least you’d have to lists that you could put side-by-side that would include the same properties in the same order.