Topic: how to detect unused css classes/ids (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=30556" title="Pages that link to Topic: how to detect unused css classes/ids (Page 1 of 1)" rel="nofollow" >Topic: how to detect unused css classes/ids <span class="small">(Page 1 of 1)</span>\

 
GRUMBLE
Paranoid (IV) Mad Scientist

From: Omicron Persei 8
Insane since: Oct 2000

IP logged posted posted 09-20-2008 17:48 Edit Quote

hello,
i have a css file, which over the years, has grown pretty big. now it contains several classes and ids which are not used anymore and i want to find out which they are. is there a way to automatically do this?

thanks!

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 09-20-2008 18:17 Edit Quote

You could use a browser supporting or a JS framework replicating querySelectorAll() and go through the selectors in your stylesheets. If a call returns an empty collection, you've got a winner.

Note that you might have to strip the pseudo class of the selectors.



(Edited by poi on 09-20-2008 18:19)

GRUMBLE
Paranoid (IV) Mad Scientist

From: Omicron Persei 8
Insane since: Oct 2000

IP logged posted posted 09-20-2008 18:30 Edit Quote

thank you. and which browsers do support that?

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 09-20-2008 19:08 Edit Quote

That API is quite recent. There isn't many [stable] browser supporting it. The fastest way is certainly to go with jQuery or any similar framework.

AFAIK, Safari 4 dev preview 2 ( webkit 528.1.1 ) supports it. Firefox 3.1 will. I'm not entirely sure about Opera 9.6, it depends when 9.6 was branched out.




(Edited by poi on 09-20-2008 19:17)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 09-20-2008 19:20 Edit Quote

Check slickspeed to see if the browsers you have have native support for the selector API.

Veneficuz
Paranoid (IV) Inmate

From: A graveyard of dreams
Insane since: Mar 2001

IP logged posted posted 09-21-2008 18:58 Edit Quote

You could also have a look at the Dust-Me Selectors addon to Firefox. It gives you a nice list of all unused CSS-selectors on a given page.

_________________________
- the Golden Ratio

GRUMBLE
Paranoid (IV) Mad Scientist

From: Omicron Persei 8
Insane since: Oct 2000

IP logged posted posted 09-23-2008 22:38 Edit Quote

that's perfect veneficuz. thanks!

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 09-28-2008 10:17 Edit Quote

Wow, great tool!

I usually just end up rewriting my css from scratch, referencing the original for the stuff I know I need to keep. I too end up with a huge CSS library of classes, (well and with many inconsistencies and problems). Eventually the site is too difficult to manage and add on to (plus I redesign the damn thing once a year it seems).

Karl.



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu