Runs/html · chain · Fable 5.1/052
html · chain · Fable 5.1 · step 052 of 64
offline render, Chrome 154, light scheme, 2 s of virtual time
runs in a sandboxed frame with no origin; live pages may fetch CDN fonts the offline render did not
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<title>0</title>
<link rel="icon" href="data:,">
<style>
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
max-inline-size: 40rem;
margin-block: 0;
margin-inline: auto;
padding:
max(1.5rem, env(safe-area-inset-top))
max(1.5rem, env(safe-area-inset-right))
max(1.5rem, env(safe-area-inset-bottom))
max(1.5rem, env(safe-area-inset-left));
font: 100%/1.5 system-ui, sans-serif;
overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
margin-block: 0 1rem;
line-height: 1.2;
text-wrap: balance;
}
h1 {
font-size: clamp(2rem, 1.5rem + 2.5vi, 3rem);
}
h5, h6 {
font-size: 1rem;
}
hgroup {
margin-block-end: 1rem;
}
:is(h1, h2, h3, h4, h5, h6, hgroup):where(:not(:first-child)) {
margin-block-start: 2rem;
}
:is(article, aside, nav, section):where(:not(:first-child)) > :is(h1, h2, h3, h4, h5, h6, hgroup, header):first-child {
margin-block-start: 2rem;
}
:is(h1, h2, h3, h4, h5, h6, hgroup) + :is(h1, h2, h3, h4, h5, h6, hgroup) {
margin-block-start: 0;
}
:is(h1, h2, h3, h4, h5, h6, hgroup) + :is(article, aside, nav, section) > :is(h1, h2, h3, h4, h5, h6, hgroup, header):first-child {
margin-block-start: 0;
}
hgroup > :is(h1, h2, h3, h4, h5, h6, p) {
margin-block: 0;
}
p, ul, ol, menu, dl, blockquote, pre, table, figure, details, address, fieldset, form, search, header {
margin-block: 0 1rem;
}
body > header {
margin-block-end: 2rem;
}
body > footer {
margin-block-start: 2rem;
}
hr {
margin-block: 2rem;
border: 0;
border-block-start: 1px solid;
color: inherit;
}
a {
text-underline-offset: 0.15em;
}
abbr[title] {
text-decoration-line: underline;
text-decoration-style: dotted;
}
p, li, dt, dd, blockquote, figcaption, caption {
text-wrap: pretty;
}
figure {
margin-inline: 0;
}
figcaption {
margin-block-start: 0.5rem;
}
figcaption:first-child {
margin-block: 0 0.5rem;
}
blockquote {
margin-inline: 0;
padding-inline-start: 1rem;
border-inline-start: 0.25rem solid;
}
dt {
font-weight: bold;
}
ul, ol, menu {
padding-inline-start: 1.5rem;
}
dd {
margin-inline-start: 1.5rem;
}
dd + dt, dl > div + div {
margin-block-start: 0.5rem;
}
li > ul, li > ol, li > menu {
margin-block-end: 0;
}
li:has(> p) + li, li + li:has(> p) {
margin-block-start: 1rem;
}
pre, code, kbd, samp {
font-family: ui-monospace, monospace;
font-size: 1em;
}
pre {
overflow-x: auto;
tab-size: 2;
}
sub, sup {
line-height: 0;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
letter-spacing: inherit;
box-sizing: border-box;
}
fieldset {
min-inline-size: 0;
margin-inline: 0;
}
textarea {
resize: vertical;
}
table {
display: block;
max-inline-size: 100%;
overflow-x: auto;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
th, td {
padding: 0.25rem 0.5rem;
border-block-end: 1px solid;
text-align: start;
vertical-align: top;
}
thead th {
vertical-align: bottom;
}
caption {
padding: 0.25rem 0.5rem;
text-align: start;
}
summary {
cursor: pointer;
}
summary > :is(h1, h2, h3, h4, h5, h6) {
display: inline;
}
:focus-visible {
outline: 2px solid;
outline-offset: 2px;
}
:target {
scroll-margin-block-start: max(1.5rem, env(safe-area-inset-top));
}
:is(body, main, header, footer, blockquote, figure, li, dd, td, th, fieldset, details, dialog, [popover]) > :last-child:where(:not(dialog, [popover])) {
margin-block-end: 0;
}
iframe {
border: 0;
}
img, svg, video, canvas, audio, iframe, embed, object, button, input, select, textarea, progress, meter {
max-inline-size: 100%;
}
img, svg, video, canvas {
vertical-align: middle;
}
img, svg[viewBox], video, canvas {
block-size: auto;
}
[hidden]:not([hidden="until-found" i]) {
display: none !important;
}
details[open] > summary {
margin-block-end: 0.5rem;
}
@media print {
body {
max-inline-size: none;
padding: 0;
}
h1, h2, h3, h4, h5, h6, hgroup {
break-after: avoid;
break-inside: avoid;
}
p, li, dd, blockquote {
orphans: 3;
widows: 3;
}
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.875em;
}
abbr[title]::after {
content: " (" attr(title) ")";
}
pre {
white-space: pre-wrap;
}
details::details-content {
content-visibility: visible;
}
summary {
margin-block-end: 0.5rem;
}
table {
display: table;
}
img, svg, video, canvas, figure, blockquote, tr, fieldset {
break-inside: avoid;
}
}
</style>
<main>
<h1>0</h1>
</main>
what changed from step 051
+3 / -0 lines
content-visibility: visible; }+ summary {+ margin-block-end: 0.5rem;+ } table { display: table;
What the model said
I made one small change to `0.html`; the rest of the file held up to review and I left it alone. The change is not browser-tested: my headless Chrome print test was blocked by the session's permission mode, so it rests on reading the CSS.
## The change
In the print styles, closed `<details>` are forced visible, but the 0.5rem gap under the summary only applied to `details[open]`. When printed, closed sections had their summary sitting flush against the content while open ones had spacing. I added a `summary` rule inside `@media print` (`0.html:214`) so both print the same. A `<details>` containing only a summary still gets no trailing margin, because the existing last-child reset is more specific.
## What I checked and left as is
- **Heading spacing:** the rules for first-child, adjacent headings, `hgroup` and sectioning elements resolve in the right order.
- **Last-child margin reset:** the container list covers the elements that have padding or borders; the ones left out rely on margin collapsing.
- **Media, forms and safe-area insets:** no problems found.
## Trade-offs that need your call
- **Tables:** `table { display: block }` makes wide tables scroll without a wrapper element, but older Safari versions drop the table semantics for screen readers. Fixing that means wrapping tables in a scrollable element in the markup, not a CSS change.
- **Placeholder content:** the title and `<h1>` are both just "0", and there is no `<meta name="description">`. I didn't invent content for them.
If "improve" meant something else, such as visual design, real content, or adding components, tell me which and I'll take it that way.