Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tool to parse and compare two CSS stylesheets [closed]

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.

like image 211
Grodriguez Avatar asked Oct 28 '11 13:10

Grodriguez


People also ask

How can I tell which CSS file is using my current page?

Use http://getfirebug.com/ to debug the page. When looking at the css it will reference which stylesheet is used. For example: You can see from the screenshot that when using Firebug it shows in the blue text that the page is using the style.

How do I know which CSS is not used?

1. Audit Tab: > Right Click + Inspect Element on the page, find the "Audit" tab, and run the audit, making sure "Web Page Performance" is checked. Lists all unused CSS tags - see image below.

How do I stop CSS from loading?

Using only JavaScript, there is no way to prevent a CSS file from being loaded by the browser if the CSS is already included (either with <link> or <style> tags) on the HTML page. You'll need some way to alter the web server's HTTP Response (i.e. remove the CSS) if you want to prevent the browser from loading it.

What is the order in which style rules are executed?

css is loaded quickly, and styles. css takes a while, styles. css will become the second stylesheet, and any rules of the same specificity from master. css will be overwritten.


2 Answers

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.

like image 108
Grodriguez Avatar answered Oct 02 '22 09:10

Grodriguez


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:(

like image 36
cjbarth Avatar answered Oct 02 '22 09:10

cjbarth