17

How can I see what CSS properties are not found/applied by Chrome? (If any other browser can do the trick, I am fine with it. Chrome is my first preference.)

If I have

  <div class="myClass">

and I don't have myClass in my CSS file, I would like Chrome to log an error or warning.

I know about the element inspector which works fine for manually looking at individual elements. I want something that can scan the entire DOM and point out any missing CSS.

Rob Bednark
  • 25,981
  • 23
  • 80
  • 125
Koder
  • 1,794
  • 3
  • 22
  • 41
  • 1
    There might well be a reason for the class not related to CSS. It might be used by Javascript so removing it could break the functionality of the site. – Paulie_D Jul 22 '14 at 12:26
  • no default dev tool on Chrome will help you with this, you can refer http://stackoverflow.com/q/983586/1542290 – Mr. Alien Jul 22 '14 at 12:26
  • 1
    @Paulie_D, You are right, but that is not the case in my site as i am almost in full control of whats going on.. – Koder Jul 22 '14 at 14:20

1 Answers1

11

There is no such thing as "missing CSS selectors" since you can use classes and IDs for other purposes other than styles.

But you can detect unused CSS rules (as pointed by Berdiya Onur) and you can also do it the other way around and detect classes and IDs that are not used by any CSS rule.

You just need to create a list of the CSS rules (you can do that with document.styleSheets) and compare with a list of all classes and IDs (you can get that using document.querySelectorAll('*')).

In Chrome's Developer tools (F12), go to the Audits tab and run a Web performance test. It will also show which files contain the unused rules.

I did it all in jsbin (look at the JavaScript).

Rob Bednark
  • 25,981
  • 23
  • 80
  • 125
rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
  • 4
    The reason i asked this question was because of a recent style scheme change in my website. I have a new css which has some of the old css selectors in it but missing some of them. I can run a file compare between new and old, but i wanted to see what the actual html is using and fill in the gaps with only those that are being used. Your solution will certainly help. Thank you. – Koder Jul 22 '14 at 13:56
  • @Paulie_D & Rafael -- That you can kludge classes to do other tasks doesn't mean finding which aren't in your sheets isn't useful. Eg, I'd like to use jqgrid without a full jQuery UI installation. What classes do I need to shim? Important to know you might get a superset of what's needed, but not a useless exercise. – ruffin Nov 03 '15 at 14:30
  • I'm very confused by the wording of this answer. – CervEd May 14 '20 at 09:05