Interface

Recommended

• Build menus with popover

  Recommended

  Build menus, tooltips and simple overlays with the built-in popover attribute, instead of JavaScript modal code.

• Build modal dialogs with dialog

  Recommended

  Build modal dialogs with the <dialog> element and showModal(), never with a styled div and your own focus code.

• Pin menus to their button with CSS

  Recommended

  Attach popovers and menus to the element they belong to with CSS anchor positioning. Keep a plain fallback where browsers lack it.

• Let parts fit the space they get

  Recommended

  Let components adapt to the space they are given with container queries, not only to the width of the screen.

• Let the browser balance line breaks

  Recommended

  Use text-wrap: balance on headings and text-wrap: pretty on paragraphs, instead of manual line breaks.

• Keep room for the scrollbar

  Recommended

  Keep space for the scrollbar with scrollbar-gutter: stable, so the page doesn't shift when scrolling is locked or unlocked.

• Size full-height panels for phones

  Recommended

  Size full-height phone layouts with dvh, svh or lvh instead of vh, so they fit when the address bar moves.

Optional

• Wire buttons without click handlers

  Optional

  Connect buttons to popovers and dialogs in HTML with commandfor and command. Keep a fallback for older browsers.

• Define every colour once

  Optional

  Define every colour once as a light-dark() custom property, and switch themes with color-scheme, never with duplicate rules.

• Animate on scroll with CSS

  Optional

  Drive scroll effects with CSS animation-timeline instead of scroll event listeners in JavaScript.

• Skip page fades unless they help

  Optional

  Use View Transitions only where the animation helps people follow a change, and check that it doesn't slow down clicks.