Use theCSS Overview panel to better understand your page's CSS and identify potential improvements.

Note: This is a preview feature in Chrome 96. Our team is actively working on this feature and we are looking for yourfeedback for further enhancements.

Overview

TheCSS overview panel creates a report of your website's CSS statistics. This report collects data on all CSS occurrences and even unused declarations. TheCSS overview panel helps you investigate occurrences further with page highlighting or by linking directly to the affected code in theElements panel.

See how toRun and re-run a CSS Overview report andUnderstand the CSS Overview report.

Open the CSS Overview panel

1. Open any web page, such asthis page.
2. Open DevTools.

3. SelectCustomize and control DevTools >More tools >CSS Overview.

   

   Alternatively, use theCommand Menu to open theCSS Overview panel.

   

Run and re-run a CSS Overview report

1. Click theCapture overview button to generate a CSS Overview report of your page.

   

2. To re-run a CSS Overview, click theClear overview icon and repeat the first step.

   

Understand the CSS Overview report

The report consists of five sections:

1. Overview summary. A high level summary of your page's CSS.

2. Colors. All the colors on your page. The colors are grouped by types, such as background colors, text colors, etc. This sections also shows you texts that have low contrast issues.

   

   Each color is clickable. For example, suppose the#DADCE0 border color doesn't match the color scheme of your site. To get a list of elements that use this color, click the color.

   

   To highlight the element on the page, hover over the element in the list.

   

   To open the element in theElements panel, click the element in the list.

3. Font info. All the fonts on your page and their occurrences, grouped by different font size, font weight, and line height. Similar to theColors section, to view the list of affected elements, click their occurrences.

   

4. Unused declarations. All the styles that have no effect, grouped by reason.

   

   For example, the two declarations above are unused because the content determines the height and width of an inline element. To view the corresponding elements, click the occurrences.

5. Media queries. All the media queries defined on your page, sorted by number of occurrences in descending order. To view the list of affected elements, click their occurrences.