Skip-Spaces Underline Segments

A wide-tracked underlined heading ('DESIGN · BUILD · SHIP') compared side by side: the default browser behavior draws one unbroken underline straight through the big word-spacing gaps, while the new CSS `text-decoration-skip-spaces: all` property breaks the same line into separate segments under each word only, lifting the decoration cleanly off every space/word-separator in between — zero JS, zero extra markup, one property. **Real, current, genuinely new ground for this catalog, cross-checked across independent sources, with this run's own sourcing limits named rather than hidden:** this run hit the same standing `EGRESS_BLOCKED`-style failure prior entries have logged against `developer.chrome.com`, `developer.mozilla.org`, `mail-archive.com`, `groups.google.com`, and `issues.chromium.org` (every fetch attempt against all five returned a DNS-level `ENOTFOUND`, and this run's usual Firecrawl-based direct-fetch workaround for primary docs was also unavailable — the connected account is out of credits, a new, concrete finding worth carrying forward, not the same 'Firecrawl workaround unavailable' note as before for the same reason) — so this entry rests on WebSearch aggregation plus one GitHub issue actually reached by direct fetch, not a primary spec/blog page read in full, and is written to be precise about that gap rather than paper over it. **What the direct fetch actually confirmed:** `web-platform-dx/developer-signals` issue #956 (fetched in full this run) states plainly, as its own browser-support section: Chrome supports `text-decoration-skip-spaces` starting at **version 155**, dated **2026-10-06** — the same Chrome 155 stable date this catalog's own 'Margin-Trim Block List' entry already cross-checked via Chrome's release notes and a GIGAZINE report — while Chrome Android, Edge, Firefox, Firefox for Android, Safari, and Safari on iOS are all listed as **not supported**. **What WebSearch aggregation additionally surfaced, named as aggregated rather than primary-read:** a Chromium 'Intent to Ship: CSS4 text-decoration-skip-spaces' blink-dev thread, dated **2026-08-11** per its own subject-line date, in which API owner Chris Harrelson asked that the shipped initial value match the spec's own default of `start end` rather than `none` — i.e., out of the box, only line-edge (leading/trailing) whitespace is skipped, while interior word-separator gaps are still underlined unless `all` is explicitly set, which is exactly the contrast this demo stages; a linked Chromium tracking-bug comment (bug 40862777) places the corresponding implementation change as reviewed **2026-09-04**, consistent with landing ahead of the 155 stable cut. **A real discrepancy found and named, not resolved by assumption:** a German-language mirror of the Chrome **154** beta post (surfaced only as a search snippet, not fetched directly) appears to already list this same property, which would predate the 155 milestone the directly-fetched GitHub issue gives as the actual shipping version — this entry treats Chrome 155 (2026-10-06) as the authoritative, verified-supported milestone, consistent with the one source actually read in full, and flags the 154-beta mention as an unconfirmed, pre-stable sighting rather than folding it into the shipped-version claim. **Cross-engine status:** per the same directly-fetched GitHub issue, Firefox and Safari have not shipped any form of this property — correctly not Baseline, Chrome/Edge-only (and, per that issue's own browser list, not yet in Edge either, despite sharing Chromium's engine — an asymmetry stated as-is, not smoothed over). Checked for overlap first: distinct from this catalog's own 'Inset Underline Reveal' entry, which uses `text-decoration-inset` to shift *where a line's two ends sit* relative to the text run (a reveal/collapse animation on a single word or link); this entry uses `text-decoration-skip-spaces` to control *whether the line is drawn at all* under whitespace between separate words — a different axis of the same decoration-line system, not a recolor of the existing entry. **Fit check — DIY $999 tier, real, strong fit:** zero WebGL, zero scroll-jacking, zero JavaScript — a wide-tracked underlined nav strip, footer link row, or spaced-out section heading is exactly the small-business chrome that tier ships; not added to `docs/diy-website-style-catalog.md` this run — that file is still missing (see this run's repo-state check, now day 48 of the same standing gap). **Honest fallback, verified this run, not assumed:** the base rule (`text-decoration-line:underline`, generous `word-spacing`) always renders a real, visible underline under both columns — never a blank or broken heading, with or without the enhancement. The segmenting behavior, and its small explanatory caption, are both gated behind `@supports (text-decoration-skip-spaces: all)`, which a real headless-Chromium check this run confirmed evaluates to **`false`** on this sandbox's own pinned Chromium (**153.0.8010.12**, unchanged since day 44 — two stable versions short of the Chrome 155 threshold this feature needs; `npm install` was required again this run, fresh container, 594 packages, 0 vulnerabilities, matching day 46/47's exact count). A `getComputedStyle` check on both demo headings after render confirmed `text-decoration-line` computes to `"underline"` in both columns (the fallback genuinely renders a real decoration, not a blank/broken one) and that the `@supports`-gated caption computes `display: "none"` — correctly hidden rather than silently shown-but-wrong, the same 'never broken, never half-done' bar every entry here is held to. Because this sandbox's Chromium can't yet render the enhanced, segmented state, no screenshot of that specific state is claimed here — only the verified fallback and the verified `@supports` gate, honestly, rather than an invented 'what it would look like' image. (Vanilla example: live iframe preview + HTML/CSS tabs, no JS tab at all — compare the underline running through the gaps on the left against the segmented underline the right column will show once a Chrome/Edge 155+ engine renders it.)

<div class="sss-wrap">
  <div class="sss-col">
    <span class="sss-label">Default (no skip-spaces)</span>
    <p class="sss-line">DESIGN BUILD SHIP</p>
  </div>
  <div class="sss-col">
    <span class="sss-label">skip-spaces: all</span>
    <p class="sss-line sss-skip">DESIGN BUILD SHIP</p>
    <span class="sss-note">Needs Chrome/Edge 155+</span>
  </div>
</div>