CSS workflow

CSS inspection and layout: inert selectors, scroll snap and columns

A native preview explains a bounded setting, not every receiving page. Keep source order, keyboard navigation and real content visible while testing layout.

Content updated: · Maintainer and corrections

Keep pasted HTML inert

Selector testing uses an unattached template owner document. Imported elements never enter the active page: scripts, custom-element upgrades and resources are not executed. The DOM tree is rendered as text. Parsing a fragment can repair markup, so a match does not validate the original HTML.

The contract excludes dynamic pseudo-classes, pseudo-elements, :scope, escaped selectors and CSS comments outside quoted values. Queries do not cross nested template contents, shadow roots or iframes. HTML is bounded to 100,000 UTF-8 bytes, 1000 nodes and depth 32; selectors to 500 bytes and 200 matches. Too-large results are rejected, not silently truncated.

Snap within the preview, not the page

Mandatory snap requires an eligible snap point when scrolling ends; proximity lets the browser decide when it is close enough. Scroll padding changes the snapport and scroll margin changes an element's snap area. They are not ordinary layout padding and margin.

The focusable preview uses native scrolling, arrow keys, touch or previous/next controls that affect only that region. Check oversized items, keyboard access and actual touch hardware. Do not hide content between snap points or trap page scrolling.

Columns preserve source reading order

Multi-column text flows down a column before continuing at the next column. Column-width is a preferred width, not an inviolable minimum; a narrow container may produce narrower columns. Count and width together constrain the maximum number.

Avoiding breaks is a request, not a guarantee that oversized content will never split. The preview does not use a fixed clipping height. Inspect long words, heading spans and narrow screens, and retain complete escaped HTML rather than copying a partial visual fragment.

Data provenance

Sources