The reset

Why it works

1. min-width: 0 lets flex and grid items shrink below their content. Their default is min-width: auto, which is why a long word or a wide child overflows a grid.
2. interpolate-size: allow-keywords turns on transitions to and from auto for the whole page. Accordion that animates its height depends on it.
3. text-wrap: pretty tells the browser to spend more effort on line breaks. It avoids a last line that holds one short word, and Safari also evens out the ragged edge. The property inherits, so :root reaches every element.
4. text-wrap: balance gives headings lines of similar length.
5. font-synthesis: none stops the browser from faking a bold or italic that the font file lacks.
6. The two smoothing rules switch macOS from subpixel to grayscale antialiasing. Text renders thinner and matches the weight shown in Figma. Other systems ignore them.
7. 100svh is the viewport height with the mobile browser toolbars showing, so the page never sits behind them. 100dvh changes as the toolbar moves and re-lays out the page each time.
8. scrollbar-gutter: stable reserves the scrollbar's space. The page does not shift sideways when a modal locks scrolling or when content grows past one screen.
9. overflow-wrap: break-word breaks a word that cannot fit on a line, such as a URL, where it would otherwise run out of its box. Long text that wraps, truncates or clamps has the rest.
10. -webkit-text-size-adjust: 100% stops iOS from inflating text in landscape.
11. -webkit-tap-highlight-color: transparent removes the gray flash iOS and Android paint over a tapped element.
12. Inputs at 16px or more stop iOS Safari from zooming the page on focus. It does not zoom back out.
13. touch-action: manipulation tells the browser the element never double-tap zooms, so click fires without the wait.
14. user-select: none on controls stops a long press from selecting a button's label.

Rules

1. Load every weight and style the design uses. With font-synthesis: none a missing bold renders as regular.
2. With min-width: 0 on everything, a sized image, icon or avatar in a flex row shrinks to make room for the text beside it. Give it flex: none.
3. The reset removes the tap highlight, so every pressable element needs its own :active state. Press feedback has it.
4. Never fix input zoom with user-scalable=no or maximum-scale=1. That takes zoom away from people who need it.
5. Keep user-select: none to controls. Never set it on body or on links, because people copy text.
6. Text the user types inherits pretty, in textarea and contenteditable. If lines shift while typing, set text-wrap: stable on that element.
7. The reserved gutter puts centered content slightly off-center on a page too short to scroll. Chris Coyier documents this. Accept it.
8. svh is for documents and heroes. An app shell with UI pinned to the bottom uses height: 100dvh, so it tracks the toolbar. Emil Kowalski draws this line in his mobile-native skill.

Support

Credits