typestar

Seeing the boxes in CSS

Three throwaway rules that answer most layout questions faster than the inspector.

* { outline: 1px solid rgb(255 0 0 / 0.2); }

/* what is overflowing the page */
* { max-inline-size: 100%; }

/* images that will be unreadable to somebody */
img:not([alt]) { outline: 3px solid #dc2626; }

/* buttons with no accessible name at all */
button:not([aria-label]):empty { outline: 3px solid #f59e0b; }

/* the one that finds a stray z-index */
[style*="z-index"] { outline: 2px dashed #2563eb; }

How it works

  1. An outline on everything shows the boxes without changing any of them.
  2. outline does not take space; border does, so it moves what it measures.
  3. Highlighting an element without an accessible name catches real bugs.

Keywords and builtins used here

The run, in numbers

Lines
13
Characters to type
409
Tokens
80
Three-star pace
90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 53 seconds.

Type this snippet

Step 2 of 2 in Themes & tools, step 8 of 9 in Organizing CSS.

← Previous Next →