Web Tools #553 - CSS Overview, Frameworks, Build Tools, Uncats

The DevTools in Chromium-based browsers continue to be improved on and if you're not careful you can end up using the same features without checking out other useful stuff.

One new feature that's currently in experimental mode is the "CSS Overview". To access this section, visit the page for which you want to generate a CSS overview, then click the three dots in the top-right area (the "Customize and control DevTools" option). Select "More tools" then choose "CSS Overview". You can also open the same option using the command palette by doing a keyword search.

This brings up a summary page explaining briefly how the tool can help you. Click the "Capture Overview" button to run the CSS Overview test.

The first thing you'll see in the result is a basic overview of your page's CSS, with data on number of stylesheets, inline style elements, number of style rules, as well as different types of selectors.

After that, there's info on colors, which divides the colors into categories and provides info on low contrast. The example shown in the screenshot below has 7 different contrast issues that could use fixing for more accessible text.

There's also info on fonts. For both colors and fonts, you can click on a color or a font to see a list of elements using that color or font. You can click the element to go to it in the Elements panel if you want to deal with it in there.

And you can also simply hover over any of the elements in the list and the element will be indicated visually on the page so you can see which one it maps to in the layout, as shown in the screenshot below.

And finally, there's info on unused declarations and number of media queries used on the page. The unused declaration info can certainly be useful for cleaning up your stylesheets and doing some refactoring.

When you first open the CSS Overview panel, you'll see a reminder that this is still an experimental feature, with a link to this bug report thread where you can submit issues if you find any. You can also use that for feature requests. It will be interesting to see how this feature improves as it's developed and comes out of the experimental stage, so keep an eye on that!

Now on to this week's tools!