Use (experimental) CSS Overview in Chrome to get an overview of CSS used on a site

Tomasz Łakomy: [0:00] Imagine that you open up a website such as Google, and you would like to get an overview of what kind of fonts are they using? What kind of colors are they using? What kind of media queries do they have on this website?

[0:11] Of course, you can do that manually using the elements tab. If I go ahead and select a button, I can see that, for instance, they're using this background color, but doing so element by element is going to take quite a bit of time, and it would be useful to have some kind of overview.

[0:26] That's why, there's an experimental feature in Google Chrome, which is called CSS Overview. To enable it, click on the Settings icon over here. Next up, click on Experiments, and check the CSS Overview checkbox.

[0:39] Once you do that, there's a new CSS Overview tab. After you click on it, you can click over here in order to capture the overview of this page. Now, we know everything about this page from a CSS perspective.

[0:51] Here in the summary section, we can see how many elements there are, how many style rules, how many media queries and so on are used on google.com home page.

[1:00] If I click on the colors tab, we can see what colors are used on this page. You can see that those colors are organized by background, text, field, and border. Next up, there's the font info, which tells you all about what kind of fonts are they using on this page.

[1:15] Two last sections are unused declarations, which allows you to optimize your CSS and media queries. This section can be quite useful if you're building your own app, and you're trying to see whether you have too many media queries because it might get difficult to maintain.