Prototyping CSS

Overview

• What problem is DevTools solving?
  • It's tedious to edit CSS, reload page, check the new CSS, re-edit, and so on

Prototyping basics

1. Select element in DOM Tree
2. Add declarations to element in Styles pane

Make Me Italic!

Autocomplete by value

• Typing italic autocompletes to font-style: italic
• Typing bold autocompletes to font-weight: bold

Can't remember a property name? Try typing the value. Introduced in May 2019 (Chrome 76).

Make Me Bold & Italic!

Highlight all elements

1. Hover over a declaration to see other elements affected

Hovering over box model properties like margin and padding highlights all elements affected by the declaration. Introduced in March 2019 (Chrome 74).

P.S. Up to increment by 1, Shift+Up ... 10, Control+Up or Command+Up ... 100.

• Don't change my margin-left!
• Change my margin-left!
• Don't change my margin-left!

Pseudo-classes

1. Go to Styles pane
2. Click :hov button

Force a special state, like hover, focus, or visited. And inspect the CSS for those special states in the Styles pane.

Classes

1. Go to Styles pane
2. Click .cls button

Quickly add and remove classes.

Detour: Dark Theme

• Command Menu > Switch To Dark Theme
• Automatic syncing with OS theme

Automatic syncing introduced in July 2019 (Chrome 77).

Contrast Ratio

1. Inspect an element
   • Inspect Mode's Tooltip can also help
2. Find the element's color declaration
3. Click the small box next to color value
4. Expand the Contrast Ratio section

Copy Element Styles

• Right-click > Copy > Copy Styles

Copy a DOM element's styles to your clipboard. Introduced in July 2019 (Chrome 77).

Screenshots

• Command Menu > Capture Screenshot
• Command Menu > Capture Full Size Screenshot
• Command Menu > Capture Area Screenshot
• Command Menu > Capture Node Screenshot