DevTools Tips: Identify CSS improvelements

Sofia Emelianova
Sofia Emelianova

The CSS Overview panel in DevTools lets you find potential CSS improvements on your page at a glance.

To get a report, open DevTools > More. > More tools > CSS Overview and click Capture overview.

The report shows you several sections:

  • A summary with statistics on styles, selectors, and media queries.
  • A breakdown of used colors including contrast issues—the most common issues on the web.
  • A breakdown of used fonts with statistics on size, weight, and line height.
  • Unused CSS declarations.
  • Statistics on media queries sorted by number of occurrences in descending order.

For a more hands-on learning experience, see CSS Overview: Identify potential CSS improvements.

To learn more on contrast issues, see Make your website more readable.