49

Does anyone know of a good tool that can parse and compare two CSS stylesheets in order to find which selectors have different styles?

I cannot use a standard diff-like tool because the two CSS files have very different layout. I need a tool that can parse and understand the CSS, then look for selectors that actually have different styles in the two stylesheets.

The only tool I've found is the CSS Comparer from Alan Hart, however it gets confused when there are styles that apply to multiple selectors.

David Harkness
  • 35,992
  • 10
  • 112
  • 134
Grodriguez
  • 21,501
  • 10
  • 63
  • 107
  • 1
    here's a crazy idea: you could load both stylesheets into a webpage and run some javascript compares between the different stylesheets. It would take quite a bit of coding but I think it could be made into a useful tool. – Joseph Marikle Oct 28 '11 at 14:09
  • Do you need to take into account browser defaults and other ways of computing styles? – BoltClock Oct 28 '11 at 19:00
  • 2
    @Joseph: Yes, that would work. I'm looking for an existing tool first, though :) – Grodriguez Oct 29 '11 at 12:34
  • @BoltClock: Nop. I just need to verify that the stylesheets are actually equivalent (or that existing changes are intended and not accidental). – Grodriguez Oct 29 '11 at 12:35
  • Css diff is nice: https://chrome.google.com/webstore/detail/css-diff/pefnhibkhcfooofgmgoipfpcojnhhljm?hl=en – SuperUberDuper Jun 29 '15 at 09:36
  • http://css-compare.com/ is really handy.. – Patriks Jul 20 '17 at 04:21
  • 1
    `css-compare.com` is dead - use https://github.com/mixi-inc/css-semdiff instead – IVO GELOV Jul 09 '18 at 13:11
  • The original tool I linked to (CSS Comparer Alan Hart) is still online: http://www.alanhart.co.uk/tools/compare-css.php – Grodriguez Jul 10 '18 at 06:09

2 Answers2

54

Here's what I ended up doing, in case someone else has the same problem:

  1. I used CSSTidy to "normalize" the two stylesheets I wanted to compare. Normalization in my case meant splitting multiple selectors and sorting selectors and properties. An online version of CSSTidy is available here.
  2. After this, I used the CSS Comparer tool from Alan Hart to find out differences between the two stylesheets.

This did the job for my specific requirements.

rain
  • 525
  • 6
  • 15
Grodriguez
  • 21,501
  • 10
  • 63
  • 107
  • the online version of csstidy doesn't normalize comma-separated multiple selectors. the CSS Comparer did work once i manually duplicated every rule that was comma-separated. – Gordon Dec 01 '16 at 23:47
  • 2
    This question is pretty old. But I recently had problem comparing minified and non minified version of same css. And http://css-compare.com really helped so I would share here so it helps people coming to this question..It makes it easy and quick, we have to just copy paste – Patriks Jul 17 '17 at 01:29
  • 1
    @Patriks I tried css-compare.com just now and got "Hmm. We’re having trouble finding that site." – Paul Chris Jones Apr 01 '20 at 13:36
3

I tried using CSS Compare. It seems to do exactly what you are looking for. However, it seems to have some issues with multiple selectors. The nice part is that it is command-line driven, so you can set up an automated process if you have lots of CSS files, or you can chain the CSS files together to compare them to one giant resultant SASS file. This tool will show you all the differences, including differences in the values of the classes.

What would be really nice if a tool showed you which styles overrode other styles in the same stylesheet. Many old sites have lots of baggage in this way and filtering it out would be great. Of course, an automated tool might cause issues, but at least something that generates a report like Firebug does, except for every selector and for the entire collection of CSS files, would be great. Sadly CSS Compare is not such a tool, and I don't know of one:(

Jan
  • 2,178
  • 3
  • 14
  • 26
cjbarth
  • 4,189
  • 6
  • 43
  • 62
  • Yes, this (issues with multiple selectors) is why I used CSSTidy first to normalize the stylesheets, then Alan Hart's CSS Comparer to do the actual comparison. – Grodriguez May 29 '14 at 09:29
  • 1
    Was moved to GH then: https://github.com/bertjohnson/CSSCompare – Jan May 05 '23 at 07:09