Loading mode…
Use Inspect on a specimen to compare winning reset declarations with final resolved results.
core.css
*, ::before, ::after
The pseudo-element should fit inside the fixed-width box only when border-box is active.
Default paragraph spacing
Default blockquote spacing
::-webkit-date-and-time-value, ::-webkit-datetime-edit-*
These cases expose WebKit differences in empty values, alignment and shadow-tree spacing, plus the Chromium regression caused by changing the value wrapper display. Compare both panes here for live shadow-style diagnostics.
Choose or clear the first date and watch whether its height changes.
The violet rule marks the expected inline end.
Only the input participation in the outer layout changes.
Text and date receive exactly the same external declarations.
input, button, textarea, select, ::placeholder
Core makes controls inherit surrounding typography. Base gives placeholders consistent theme-relative contrast, while native control presentation remains neutralized for the design system.
input:disabled, textarea:disabled
Core keeps disabled inputs and textareas opaque so component styles, rather than the iOS WebKit UA stylesheet, control their contrast.
input types
Core removes native control presentation and neutralizes browser-specific search, picker, spinner, color and range surfaces. Small fields use a playground-only 16px floor on coarse pointers to prevent focus zoom while testing.
a, button
::file-selector-button
The standardized button surface inherits typography while its native presentation is neutralized.
audio, canvas, img, picture, svg, video
The narrow container exposes max-inline-size behavior; every specimen also leaves inline layout and loses its baseline gap.
embed, iframe, object
Each element requests a 360 × 120 viewport for the same fixed 720 × 240 HTML document. Both start with a 3:1 ratio. The reset caps only the outer width: its height stays 120px and the inner document becomes scrollable instead of transferring an aspect ratio.
input, select, textarea
The playground gives each control a 24rem inline size inside the 12rem dashed boundary. The reset caps them at the container width without changing their height.
table, caption, th, fieldset, iframe
| Heading A | Heading B |
|---|---|
| Cell A | Cell B |
h1–h6, ul, ol, menu
Lists use an empty marker string instead of
list-style: none
so Safari keeps their accessibility semantics.
summary, progress, meter
Core removes the disclosure marker. Progress and meter retain their values and states, but remain neutralized for the design system.
Details content remains controlled by the native open state.
dialog, dialog::backdrop
Open the dialog in both panes, then toggle its dynamic content. Core removes the popup and backdrop presentation without changing native placement, so dynamic content does not recenter the dialog.
[hidden], [hidden="until-found"], embed, hr
Regular hidden content is forced off.
until-found
remains searchable; a hidden
embed
remains rendered as a zero-sized inline box.
base.css
:root, body
System typography, line height and text rendering inherit from the root.
if (ready) {
run();
}code, kbd, samp, pre
The reset prefers the platform UI monospace font and falls back to the browser's configured monospace. The two-family list also keeps inline code at the surrounding text size.
const answer = 42;
Ctrl
Process completed
Preformatted output
code, time, table
Code uses fixed-width numerals and a slashed zero when available. Fixed-width numerals also keep changing time values stable and make numerical table columns easier to scan.
int LOOP_010 = 200;
| Period | Value |
|---|---|
| 2025 | 1,111.00 |
| 2026 | 8,888.00 |
*, ::before, ::after { background-repeat: no-repeat }
Without the reset, the gradient tile repeats across the surface. The reset leaves one tile at the start corner.
*, ::before, ::after { min-inline-size: 0 }
Each flexible item contains a 24rem-wide descendant. Its automatic minimum pushes the aside beyond
the fixed container unless the reset sets
min-inline-size: 0
on the item.
grid-template-columns: 1fr auto
flex: 1 1 0%
pre
The long line paints beyond the dashed boundary in the native pane. In the reset pane it stays inside and can be scrolled horizontally.
2026-07-19T12:30:00Z request_id=019f871c256e7eb0bd908d76ff8f68d9 path=/exports/quarterly-report.css
The playground contains native overflow within this specimen. The reset makes the
pre
element itself the local scroll container.
button, input, select, textarea, option, optgroup
command-like and clickable elements
Try selecting the labels and command text, then inspect the values.
label, summary, enabled native controls and common interactive roles
:root, small, sub, sup
Root provides emergency wrapping to every text context. Small print uses an explicit 80% scale; subscripts and superscripts use fixed logical offsets with a minimal line-height contribution.
Pretty wrapping applies to paragraphs, including a long token: verylongunbrokencontentsegmentthatneedstobreakbeforeoverflowingthecontainer.
An ordinary line of text above.
Water is H
2
O and 2
10
equals 1024.
An ordinary line of text below.
Regular text, small print and nested small print .
textarea, textarea:not([rows])
:target, :focus-visible
Activate the link to target this card. Use Tab to inspect the high-contrast focus outline.
reduced-motion.css
*, ::before, ::after, ::marker, ::backdrop
Effects are shortened only when the stylesheet is loaded and the OS requests reduced motion.
background-attachment, scroll-behavior
Scroll the frame to observe the fixed background. Use the button inside the container to test nested smooth scrolling.
Native surface
These specimens retain native presentation or have no dedicated rule. Universal spacing, box-sizing and min-inline-size rules still apply.
inline text semantics
blockquote, q, dl
A native blockquote containinga native inline quotation.
::selection, caret, scrollbar
Select this text, place the caret here, and scroll the box.