Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What tool can analyze my site and report on unused / unneeded CSS?

Tags:

html

css

how can i find in a early way that this css class is being used or not in website ?

like-

style property that i write in my css is being used or not?

and

class or id is being used in webpage?

exe:

.textstyle4{
    font:normal 12px Arial, Helvetica, sans-serif ;
    color:#777;
}

i want to know in my whole website where this css style is being used?

this is an example.

like image 639
Kali Charan Rajput Avatar asked Jun 30 '10 18:06

Kali Charan Rajput


People also ask

What can I do with unused CSS?

If you want to remove unused CSS entirely, you can use a tool such as PurifyCSS to find out how much CSS file size can be reduced. Once you get the CSS code you should eliminate, you have to remove it manually from the page.


3 Answers

The CSS Usage addon for firefox does what I think you are looking for: https://addons.mozilla.org/en-US/firefox/addon/10704/

like image 146
heisenberg Avatar answered Oct 24 '22 04:10

heisenberg


If you want to see what CSS styles are being applied to an element that is being rendered on your browser you should look into using Firefox and Firebug to view the DOM and CSS information.

http://getfirebug.com/

If you are using IE8 you could use the IE8 Developer tools to do the same thing.

like image 29
Roberto Hernandez Avatar answered Oct 24 '22 04:10

Roberto Hernandez


There's also "Dust-Me", a firefox extension to find unused CSS:

https://addons.mozilla.org/en-US/firefox/addon/5392/

However this plugin doesn't work with FF5+

like image 1
desau Avatar answered Oct 24 '22 06:10

desau