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.