Is there a way to check which CSS styles are being used or not used on a web page?

by

Updated July 2022 – it appears Google has removed option #1 below (Audit tab has been removed, and Lighthouse and Recorder have been added)

Google Chrome has a two ways to check for unused CSS.

1. Audit Tab: > Right Click + Inspect Element on the page, find the “Audit” tab, and run the audit, making sure “Web Page Performance” is checked.

Lists all unused CSS tags – see image below.

Screen Shot of Chrome's Audit Tool

Update:
– – – – – – – – – – – – – – OR – – – – – – – – – – – – – –

2. Coverage Tab: > Right Click + Inspect Element on the page, find the three dots on the far right (circled in image) and open Console Drawer (or hit Esc), finally click the three dots left side in the drawer (circled in image) to open Coverage tool.

Chrome launched a tool to see unused CSS and JS –
Chrome 59 Update
Allows you to start and stop a recording (red square in image) to allow better coverage of a user experience on the page.

Shows all used and unused CSS/JS in the files

  • see image below.

Example of Coverage tool in Chrome

More Related Contents:

  1. CSS not applying on multiple instances of a custom control
  2. What is the difference between visibility:hidden and display:none?
  3. What is the difference between Normalize.css and Reset CSS?
  4. CSS \9 in width property
  5. Opacity CSS not working in IE8
  6. CSS hover border makes inline elements adjust slightly
  7. What is the meaning of “cascading’ in CSS?
  8. Difference between @import and link in CSS
  9. Angular-cli from css to scss
  10. Position a CSS background image x pixels from the right?
  11. What is the difference between :focus and :active?
  12. Why does ‘overflow: auto’ clear floats? And why are clear floats needed?
  13. font-size vs line-height vs actual height
  14. Google chrome a:visited background image not working
  15. Bootstrap 4 – Navbar items outside the collapse
  16. hide div tag on mobile view only?
  17. CSS3 transform order matters: rightmost operation first
  18. Zebra striping a table with hidden rows using CSS3?
  19. How to remove border of drop down list : CSS
  20. What is the difference between `margin` and `padding` in CSS?
  21. Can I apply a CSS transition to the overflow property?
  22. How to change the scrollbar color using css [duplicate]
  23. Align form elements in CSS
  24. How to add a margin to a table row [duplicate]
  25. CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]
  26. CSS: Left, Center, & Right Align Text on Same Line
  27. CSS negative z-index: what does it mean?
  28. minmax fails (invalid property value)
  29. Div with cut out edges, border and transparent background
  30. Select specific element before other element

Leave a Comment