Subscribe

Chrome DevTools: CSS Overview

✍️

How to use the new CSS Overview in the Chrome DevTools

30 Nov, 2021 · 3 min read

I love how the Chrome dev team keeps making it easier and easier to identify potential issues on websites. Everything with improving speed and user experience.

The latest addition to these incredible tools is the "CSS Overview". This new feature is available as a preview in Chrome 96

Using the Chrome DevTools CSS Overview

First, we need to open the Chrome Dev Tools.

Mac Cmd + Shift + C or Windows: Ctrl + Shift + C.

Then click the "More options" button find, "More tools", and click CSS Overview.

How to find the CSS Overview in Chrome DevTools

Once you open the tool, you'll be prompted with an overview and some explanation of what it does. Click the capture button to start.

The CSS Overview welcome page

Once the tool is done, you'll see a mix of things returned. I'll break them down per chapter.

Overview summary

This high-level overview quickly shows you how many elements are found and how many selectors and stylesheets there are.

CSS Overview summary

Colors

Then we get the colors panel, which shows all colors found on the page. This overview gives you a quick example of whether these colors match your brand colors.

Color panel overview

And show possible contrast issues.

The cool thing here is that you can click on each element to see all occurrences in the stylesheet.

In the image below, I clicked the #DEBFDE color, and you can see all elements that have this color. You can then press each element to highlight it in the DOM.

Color explorer

Really find this a welcome addition to quickly see unwanted color styles, like white on white or hidden elements.

Font info

Then we enter the font overview panel, which shows all fonts you use on the page and their style.

CSS Font overview

I actually noticed through this tool that I'm assigning different fonts on top elements, causing the font issue to go a bit wild.

Again, super easy to quickly identify weird are one-of-a-kind font sizes that might not be in line with your brand.

Unused declarations

Then we have a panel on unused declarations, making it easy to find styles that will have no effect.

Unused declarations overview

In my case, it's a pseudo selector setting vertical-align on an element that's not inline or a table-cell.

(This particular case is actually valid, so I will log this with the DevTools team)

Media queries

And then, we get an overview panel for our media queries. This makes it super easy to find all your queries.

Media queries overview

Including screen sizes, preferred schemes, and more. You might find elements to optimize and combine queries that are about the same size.

Conclusion

I hope you enjoy this tool as much as I do. I really like to revamp my CSS to be smaller, more inline, and brand correct.

And this tool definitely helps with that 🎉.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Chrome DevTools: Recorder

21 Jan, 2022 · 3 min read

Chrome DevTools: Recorder

Performance heads-up display in Chrome

29 Jun, 2021 · 2 min read

Performance heads-up display in Chrome

Join 1513 devs and subscribe to my newsletter