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.
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
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at email@example.com.
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!