How to find which CSS files are used for the current page

Question

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

Answer 1

Use http://getfirebug.com/ to debug the page.

When viewing css, it will refer to the stylesheet.

For instance:

You can see in the screenshot that when using Firebug, a page with the style.css stylesheet is displayed in blue text.

Work with the tree in Firebug and just hover over your elements and see what styles are used.

Answer 2

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

Answer 3

You can do one thing:

• open website in firefox

• Use firebug to specify some control by which you want to see application classes.

• In the html source code in firebug, you can find the applicable CSS classes for a specific control.

• Find these classes in your CSS files.

• Repeat this process for all web page controls.

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

Thanks.

Answer 4

Use a web developer addon using firefox. http://chrispederick.com/work/web-developer/

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

Answer 5

There are many ways to find which CSS a page is using. here is some of them:

1) if you use firefox then it is useful to use firebug. http://getfirebug.com/ just right-click on the page and use the "Check item" option

2) if you use IE, then the developer tools are available in IE

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

Answer 6

The way you find or access the CSS files used for the current page may vary depending on the browser and / or operating system you are using.

Here I am going to share with you the opening of the Developer Toolbar of Chrome, Firefox, Internet Explorer, Safari, Opera on Windows and Mac OS.

When you open the console of the current browser, click on the item you want to check and on the right you will see the “ Styles” tab , as shown below:

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

Answer 7

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