Explore a Site's CSS with Chrome DevTools CSS Overview

Jhey Tompkins
InstructorJhey Tompkins

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

Check out the new and currently experimental "CSS Overview" feature in Chrome's DevTools.

Use it to get an overview of details such as colors, fonts, media queries, and even unused declarations.

Jhey Tompkins: [0:00] Start by opening Chrome's developer tools, go to Settings, then Experiments, then enable CSS Overview.

[0:14] After restarting Chrome's developer tools, you will see a CSS Overview tab. Click Capture overview to start. The Overview tab gives you a summary of your page's CSS, along with details about Colors, Fonts, Unused declarations, and Media queries.

[0:34] We can see here, these are the colors I have used on jhey.dev. The colors are separated into different categories, such as Text color. Here, we can see the Fill colors that are used on icons and the avatar on my page.

[0:53] One interesting feature of the CSS Overview panel is being able to see Unused declarations for your CSS. These are declarations in your styles which have no effect. To show this feature in action, I've added an unused declaration to the local development version in my page. Here, vertical-align will have no effect and is essentially unused.

[1:17] Running the CSS Overview tool, shows me the Unused declaration, "Vertical alignment applied to element which is neither inline nor table-cell." Clicking the occurrences shows me the affected elements.

[1:33] In review, the new CSS Overview feature of Chrome's developer tools is a nifty way to get an overview of your page's CSS. Whether it be a quick summary, an overview of your page's colors, the font info for your page, checking if there are any unused declarations, or getting an idea of the media queries that are in play.

egghead
egghead
~ 9 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.

Become a member to join the discussion

Enroll Today