DevTools Tips: Identify CSS improvelements

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