CSS Overview: Identify potential CSS improvements

Use the CSS Overview panel to better understand your page’s CSS and identify potential improvements.

# Open the CSS Overview panel

1. Open any web page, such as this page.

2. Open DevTools.

3. Click on More options     > More tools > CSS Overview.

   

   Alternatively, use the Command Menu to open the CSS Overview panel.

   

# Run and re-run a CSS Overview report

1. Click on the Capture overview button to generate a CSS Overview report of your page.

   

2. To re-run a CSS Overview, click on the clear overview icon, and repeat step 1.

   

# Understand the CSS Overview report

The report consists of 5 sections:-

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

2. Colors. All the colors in your page. The colors are grouped by usages such as background colors, text colors, etc. It also shows you the texts that have low contrast issues.

   

   Each of the color is clickable. For example, say this border color #DADCE0 doesn’t match the color scheme of your site, click on it to get a list of elements that use the color.

   

   Hover over an element in the list to highlight the element in the page.

   

   Click on the element in the list to open the element in the Elements panel.

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

   

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

   

   For example, the 2 declarations above are unused because the height and width of an inline element are determined by its content. Clicking the occurrences to view the affected elements.

5. Media queries. All the media queries defined in your page, sorted by the highest occurrences. Click on the occurrences to view the list of affected elements.