Skip to Content
0 likes
Fix a Container Query That Measures the Wrong Ancestor Level: Advanced

Reproduce a nested-container breakpoint failure, select the intended named ancestor, and verify the repair at a fixed viewport and at its boundary.

0 likes
Cascade Layers (@layer) on an Existing Stylesheet Level: Advanced

Put an old stylesheet in the first layer so your new rules win without touching the old file or raising specificity.

0 likes
prefers-reduced-motion Without Killing Useful Motion Level: Advanced

Keep spinners and fades, replace slides and smooth scrolling, and check both settings in Chrome.

0 likes
Stop Layout Shift From Web Fonts Level: Advanced

Compute size-adjust and the vertical overrides from the font files, build the fallback face, and measure the layout shift before and after.

0 likes
srcset and sizes for Product Images That Don't Waste Bandwidth Level: Advanced

Measure the real slot width at each breakpoint, write sizes from it, and check which file loads at each screen density.

0 likes
Critical CSS Without Shipping Your Whole Stylesheet Twice Level: Advanced

Mark the first-screen rules once, split the stylesheet in the build, and confirm the rest loads without blocking.

0 likes
Dark Mode With prefers-color-scheme and One Token File Level: Advanced

Use one token file with light-dark(), add a saved toggle that does not flash, and check the colours in both themes.

0 likes
CSS Custom Properties for Theming a Multi-Brand Site Level: Advanced

Switch brands with a data attribute, and avoid the derived-token trap that freezes hover colours on the wrong value.

0 likes
Animate a Modal Without Breaking Keyboard Focus Level: Advanced

Use a native dialog, animate it with CSS only, and check focus, Tab, Escape and reduced motion by keyboard.

0 likes
Find Unused CSS Before It Bloats Production Level: Advanced

Record coverage in Chrome DevTools, test the states that hide rules, and remove dead CSS in small, reversible steps.

0 likes
Audit Contrast and Focus Paths Before You Ship Level: Advanced

Measure contrast by number, run axe, and walk the keyboard focus path with a script to catch what the tool cannot see.

0 likes
Partial and Required on a Form Draft Object Level: Intermediate

Derive a draft type with Partial, require every field with Required, and write one check that turns a draft into the finished type. After this, an unfinished form cannot reach the submit function.