New in Chrome: CSS Overview

Right here’s a flowery new experimental characteristic in Chrome! Now, we are able to get an outline of the CSS used on a website, from what number of colours there are to the variety of unused declarations… even right down to the full variety of outlined media queries.

Once more, that is an experimental characteristic. Not solely does that imply it’s nonetheless in progress, nevertheless it means you’ll must allow it to start out utilizing it in DevTools.

Open up DevTools (Command+Choice+I on Mac; Management+Shift+I on Home windows)Head over to DevTool Settings (? or Operate+F1 on Mac; ? or F1 on Home windows)Click on open the Experiments sectionEnable the CSS Overview choiceScreenshot of the Chrome DevTools Experimental Settings window showing the CSS Overview option selected.

And, oh hey, have a look at that! We get a brand new “CSS Overview” tab within the DevTools menu tray when the settings are closed. Be certain it’s not hidden within the overflow menu should you’re not seeing it.

Screenshot of the CSS Overview window in Chrome DevTools. It shows an overview of the elements, selectors, styles and colors used on the site, which is CSS-Tricks in this screenshot.Screenshot of the CSS Overview window in Chrome DevTools. It shows an overview of the elements, selectors, styles and colors used on the site, which is CSS-Tricks in this screenshot.Pretty shade palette you bought there, Mr. Coyier. 😍

Discover that the report is damaged out into a lot of sections, together with Colours, Font data, Unused declarations and Media queries. That’s a variety of data accessible in a small quantity of house proper at our fingertips.

That is fairly nifty although, huh? I really like that instruments like this are beginning to transfer into the browser. Take into consideration how this may also help us not solely as front-enders but additionally how we collaborate with designers. Like, a designer can crack this open and begin checking our work to verify every part from the colour palette to the font stack are all in tact.

Leave a Reply