This article introduces you to the CSS Overview Panel that Chrome 87 is starting to support and shows you how to make better use of it. The CSS Overview Panel may help us:

  1. More accurate (high fidelity) restore design draft, assist design to go through the link
  2. Better simplification of our CSS code
  3. Assist in improving the accessibility of the website
  4. Get a clearer picture of the overall site style picture

What is CSS Overview Panel

CSS Overview Panel is a lab feature supported by Chrome 87.

A TAB belonging to console DevTool:

By default, the lab function is turned off, which means we can’t see it when we open the console, so how do we turn it on? Two ways:

  1. From the Experiment menu under DevTools’ Setting, enable CSS Overview
  2. Start DevToolsCmd + Shift + PCall Command Menu and enterShow CSS Overview

What does the CSS Overview Panel do?

OK, after opening CSS Overview, go to the site you want to review. Click the button:

After a few seconds, the plugin will analyze the CSS on the current page and output a simple report (a bit like LightHouse) :

Here I found a GIF for a simple demonstration:

As you can see, the entire panel is divided into several modules (I’ll cut to DevTool’s Chinese mode map below) :

  1. Overview Summary: Overview of the overall CSS information, such as the number of elements, number of style sheets, number of style rules, and so on.

  1. Colors: Lists all the Colors used on the page, including the background color, text color, border color, contrast between text and background color. You can click to trace the specific color used in which element

  1. Font Info: Measures the use of fonts and how often they appear in the stylesheet. Include font weight and line height indicators, you can select font indicators to display affected elements, you can click trace

  1. Unused declarations: An Unused CSS rule that can be traced to a specific style code by clicking on it.

  1. Media queries: Details of CSS Media queries (such as minimum/maximum width values) and how often they appear in the stylesheet. You can click on the specific media query code

How to make better use of CSS Overview?

So, when should we start using it and what can it help us do? Personally, I think there are some core points:

More accurate (high fidelity) restore design draft, assist design to go through the link

In the design of the original higher requirements of the page, in the design of the link, it is very suitable to use this panel to view the page color use, font use is in accordance with the standard.

Because usually the designer has a set of rules, such as what color/font to use in what place. However, in the process of reconstructing the design draft, for some reasons (for example, the color picker is not accurate enough, it is taken for granted that some color values are black or white).

Then using the Color and Font module, you can clearly find the Color or Font that is not in the specification, and modify it.

Better simplification of our CSS code

The Unused declarations module is a good way to find Unused CSS code and discard it when identified.

Assist in the conduct of the websiteAccessibility improved

This I think is still very meaningful. Accessibility, also known as A11Y, is a very important part of my website development process. Another name for it is accessible design.

The general meaning of making our site accessible is to help people with disabilities make better use of our site. Of course, getting accessibility content right is actually kinder to everyone. Because in some special situations, we may also be disabled, as shown below:

In the CSS Overview panel, the only thing relevant for accessibility is Contrast Issues under the Color module:

Here it lists the places on the page where text is displayed, and whether its text color and background color meet the contrast values required by the WCAG AA specification.

WCAG AA, the most authoritative web accessibility specification, states that all important content needs to have a color contrast ratio of 4.5:1 or more (3:1 or more for font size 18 or larger) to be readable.

What’s the difference between the two colors on the Brightness scale? When applied to our pages, most cases are the contrast difference between background-color and content color.

15 UI design Tools to help you easily do barrier-free:

Obviously, in the last example above, the text is so unclear that normal users can hardly see it.

With CSS Overview, we can easily find substandard areas and make changes to improve the accessibility of our pages.

For more on Web accessibility, you can read my article – an incomplete guide to Good Front-end practices – for more information

Get a clearer picture of the overall site style picture

Finally, through the information of the whole panel, we can have a deeper understanding of our website, which can in turn assist us to optimize the page, guide our performance optimization, page reconstruction new direction.

The last

Of course, the CSS Overview Panel does much more than that, and there are many more scenarios to explore. I think this Panel is a function that we do not want to turn off when we open it. It can become a very good tool in our development process by using it reasonably and making more use of it.

That’s the end of this article, I hope it was helpful 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.