GUIDE: Dev CSS Overview</RWB>

GUIDE: Dev Tools --> CSS Overview Tab

Open the dev tools tab with CTRL + SHIFT + J or with the CTRL + SHIFT + I keyboard shortcut in Firefox. Navigate to the CSS Overview tab.

Default view of CSS Overview tab — A default view of CSS Overview tab in developer's tools.

The default tab's view has instructions and a Capture overview button. Click the capture overview button. The page's CSS is analyzed and a result summary is shown relevant of the captured styles. An example shown below of <RWB>pages</RWB> page styles, each section can be selected to review and find/fix according to the recommendations.

A highlighted view of css overview's summary — CSS Overview summary view.

A highlighted view of css overview's colors — Colors highlighted in CSS Overview tools

A highlighted view of css overview's font info — Font highlighted in CSS Overview tools

A highlighted view of css overview's unused declarations and media queries — Unused declarations and media queries highlighted in CSS Overview tools

A highlighted view of css overview's non-simple selectors — Selector performance highlighted in CSS Overview tools

CSS Overview is only in Edge browser.