9

I have a lot of CSS files on the page. But a lot of these files are not used by styles. Is it possible to determine which files are used by page and which not.

Machavity
  • 30,841
  • 27
  • 92
  • 100
Sergey
  • 7,933
  • 16
  • 49
  • 77
  • the two questions marked as a dup are relevant, but the accepted answer to both (DustMe Selectors) seems to no longer be in development, and doesn't work with the latest version of Firefox. – Spudley Oct 13 '11 at 08:33

7 Answers7

12

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.css stylesheet.

enter image description here

Work down the tree in Firebug and simply hover over your elements and see which stylesheets are used.

Rob
  • 6,304
  • 24
  • 83
  • 189
1

New in Chrome 59 is the coverage tool that shows you CSS and JS code coverage. It'll show you what percentage of CSS files are used on a page. When you click on that file, it'll show you which styles are used and which ones aren't. More info here: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

enter image description here

Johnny Oshika
  • 54,741
  • 40
  • 181
  • 275
1

You can debug with firebug ( http://getfirebug.com/ ). It will show what is used for what and allows you to find out.

JNDPNT
  • 7,445
  • 2
  • 34
  • 40
1

You can do one thing :

  1. open the website in Firefox

  2. Use firebug to point some control on which you want to see the applied classes.

  3. In the html source code in firebug , you can find the applied css classes on a particular control.

  4. Find those classes in your CSS files.

  5. Repeat this process for all the controls of the webpage.

Now you can remove those CSS files that are not used on that web page.

Thanks.

Rupendra
  • 608
  • 2
  • 11
  • 42
0

The way to find or access to CSS files are used for current page, could vary base on the Browser and/or Operating system you are using.

Here I am going to share with you Opening the “Console” panel (Developer Tool) of Chrome, Firefox, Internet Explorer, Safari, Opera in both Windows and Mac OS.

When you open the Console of the current browser, click on the element you want to inspect and on the right hand side you will have a tab name Styles as shows below:

enter image description here

As you can see the image has the name of the CSS file (in this example named "desktop_ltr.css")

S. Mayol
  • 2,565
  • 2
  • 27
  • 34
0

Use Web Developer Addon with firefox. http://chrispederick.com/work/web-developer/

After installing this addon goto firefox tool->web developer -> css-> view css.

Rohit
  • 165
  • 4
0

There are many ways to find which CSS are being used by page. here are some of them:

1) if you are using firefox then firebug is useful to use. http://getfirebug.com/ just right click on page and use Inspect Element option

2) if you use IE,then Developer tools is available in IE

3) If you use google chrome,then u can directly use Inspect Element option by right clicking on page.

ravidev
  • 2,708
  • 6
  • 26
  • 42