Overview Open Chrome DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu Record, replay and measure user flows View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources
Overview Open Chrome DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu Record, replay and measure user flows View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources

Identify potential CSS improvements

Published on

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

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

Open the CSS Overview panel

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

  2. Open DevTools.

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

    CSS Overview in the menu

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

    Show CSS Overview command in the Command menu

Run and re-run a CSS Overview report

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

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

    Clear overview

Understand the CSS Overview report

The report consists of 5 sections:-

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

  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.

    Colors

    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.

    A list of elements that use the color

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

    Hover over an element 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.

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

    Unused declarations

    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.

    Media queries

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.