Use the CSS Overview panel to refactor and optimize your website

This article will introduce you to the CSS Overview Panel that Chrome 87 started to support, and how to make better use of this panel. Through the CSS Overview Panel, you may be able to help us:

1. More accurate (high-fidelity) restore the design draft , to assist the design walkthrough
2. Better Streamline our CSS code
3. to improve the accessibility of the website
4. Have a clearer understanding of the overall overview of the website style

What is CSS Overview Panel

CSS Overview Panel literally translates to CSS Overview Panel, which is a laboratory feature that has been supported since Chrome 87.

Belongs to a TAB under the console DevTool:

This laboratory function is closed by default, that is, we can't see it when we open the console, so how do we open it? Two ways:

1. From the Experiment menu under Setting of DevTools, enable CSS Overview
2. Open DevTools, call out the Command Menu Cmd + Shift + P Show CSS Overview

What are the functions of the CSS Overview Panel?

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

After a few seconds, the plug-in will analyze the CSS of the current page and output a simple report (somewhat similar to LightHouse):

Here I found a GIF picture for a simple demonstration:

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

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

2. Colors (Using Color Overview): Lists all the color related information used in the page, which background color is used, which text color is used, which color is used for the border, and the contrast between the text and its background color can be traced by clicking To which element a specific color is used

3. Font info: Measure the usage of fonts and how often they appear in the style sheet. Including font weight and line height indicators, you can select font indicators to display the affected elements, you can click to trace the source

4. Unused declarations: Unused CSS rules can be traced back to specific style codes by clicking.

5. Media queries: Details of CSS media queries (such as minimum/maximum width values) and how often they appear in the style sheet. You can click to view the relevant code for specific media queries

How to make better use of CSS Overview?

So, when should we start using it or what can it help us to do? I personally think that some of the more core points:

More accurate (high-fidelity) restoration design draft, assisting design walkthrough

On pages that have higher requirements for the restoration of the design draft, in the design walkthrough link, it is very suitable to use this panel to check whether the color usage and font usage of the page conform to the specifications.

Because usually designers will make a series of specifications, such as where to use what color/font. However, because the front end is in the process of reconstructing the design draft, for some reasons (for example, the color picker is not accurate enough, and it is assumed that some color values are black or white).

Then using the Color and Font modules, you can clearly find the colors or fonts that are not in the specification and modify them.

Better streamline our CSS code

This is very easy to understand. Using the Unused declarations (unused style rules) module, we can find the unused CSS code very well, and remove it after confirming it.

to improve the accessibility of the website

I think this is very meaningful. Accessibility, also known as A11Y, is a very important part of the development process of our website. Another name for it is barrier-free design .

The general significance of improving website accessibility is to help people with disabilities use our website better. Of course, making content related to accessibility is actually more friendly to everyone. Because in some, special situations, we may also be disabled people , as shown below:

In the CSS Overview panel, the only thing related to accessibility is the contrast under the Color module (Contrast issues):

Here it lists the places where the text is displayed on the page, and whether its text color and background color comply with the contrast value required by the WCAG AA

The most authoritative Internet accessibility specification- WCAG AA stipulates that the color contrast of all important content needs to reach 4.5:1 or above (3:1 or above when the font size is larger than 18), in order to have a better performance. Readability.

There is a concept here - color contrast . Simply put, the description is the difference in brightness between two colors. When applied to our pages, most of the cases are the contrast between the background color (background-color) and the content color (color).

Borrow a picture- know almost-15 UI design tools to help you easily do barrier-free recommendations :

Obviously, in the last example above, the text is very unclear, and it is already difficult for normal users to see clearly.

And by making good use of this function in CSS Overview, we can easily find the places that are not up to the standard, modify them, and enhance the accessibility of our pages.

For more information about Web accessibility, you can browse my article for more information - Incomplete Guide to Front-end Good Practices

Have a clearer understanding of the overall overview of the website style

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

finally

Of course, the functions of the CSS Overview Panel are far more than the above points, and there are more scenarios waiting for us to continue to explore. I think this Panel is a function that we don't want to turn off again after opening it. Reasonable use and use of it can become a very good tool in our development process.

This concludes this article, I hope it helps you :)

If you want to get the most interesting CSS information, don’t miss my account - 1616f7f3c75024 iCSS front-end facts 1616f7f3c75026 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.