Runs/html · chain · Fable 5.1/017
html · chain · Fable 5.1 · step 017 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 {
margin-block: 0 1rem;
font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
line-height: 1.2;
text-wrap: balance;
}
p {
margin-block: 0 1rem;
text-wrap: pretty;
}
main > :last-child {
margin-block-end: 0;
}
img, svg, video, canvas, iframe {
max-inline-size: 100%;
}
img, svg, video, canvas {
block-size: auto;
}
</style>
<main>
<h1>0</h1>
</main>
what changed from step 016
+6 / -1 lines
text-wrap: pretty; }- img, svg, video {+ main > :last-child {+ margin-block-end: 0;+ }+ img, svg, video, canvas, iframe { max-inline-size: 100%;+ }+ img, svg, video, canvas { block-size: auto; }
What the model said
`0.html` was already in good shape, so I only made two small CSS changes. I haven't opened it in a browser. ## What I changed - **Trailing margin:** the last element in `<main>` no longer adds its 1rem bottom margin on top of the body padding, so the spacing at the bottom of the page matches the top. - **Embedded media:** `canvas` and `iframe` are now also capped at the container width, so they can't cause horizontal scrolling on narrow screens. `iframe` is left out of the `block-size: auto` rule, because that would collapse it to the default 150px height. ## What I left alone - **Missing `<head>` and `<body>` tags:** these are optional in HTML and the omission looks deliberate. - **Viewport, safe-area padding, colour scheme, fluid heading size and text wrapping:** all fine as they are. ## What depends on your content - **Title and heading:** both are the placeholder `0`. A descriptive `<title>` is the biggest remaining gain for accessibility and search. - **Meta description:** there isn't one. I didn't add one because I'd be inventing the text.