Symbols()-Marker Step List

A numbered 'how it works' step list whose markers are custom inline glyphs — a compass, a wrench, a rocket, a checkmark — defined with the brand-new CSS `symbols()` function directly inside `counter()`, with no separate `@counter-style` block needed and no `::marker`-replacement JS. `symbols()` builds an anonymous, one-off counter style from a list of strings (or images) right where it's used — here as `content: counter(sfl-step, symbols(cyclic "🧭" "🛠️" "🚀" "✅"))` on each list item's `::before`. **Real, current, genuinely fresh — shipped this month, cross-checked across multiple independent, version-numbered sources, not a single blog's guess:** the Chromium team's own 'Intent to Ship: CSS Symbols()' thread (blink-dev) states Blink shipped it in Chrome 155; Chrome's own Chrome 155 release notes (chromestatus.com/release-notes/155) list `symbols()` under CSS, described as making it easier to set custom list markers inline; web-standards.dev's 'What's new in Chrome 155' recap (dated 2026-10, the same week this run's own research happened) and a GIGAZINE report on the Chrome 155 stable rollout (dated 2026-10-07) both independently corroborate the same shipping milestone. **Cross-engine status, stated precisely rather than rounded up:** the same blink-dev thread notes Gecko (Firefox) has actually supported `symbols()` since 2015 — long before Chromium — while WebKit (Safari) still does not; MDN marks the feature 'Limited availability' for exactly this reason (two of three major engines, not Baseline). So this is simultaneously the newest shipped-this-month browser capability in this catalog and, by engine count, one of the better-supported entries here (Firefox has had it for over a decade; only Safari is the real gap), a nuance worth stating honestly rather than flattening into either 'brand new everywhere' or 'Chromium-only.' Checked for overlap first: no existing entry in this catalog touches `::marker`, `counter()`, or `@counter-style` at all — genuinely new, narrow ground. **Fit check — DIY $999 tier, real, strong fit:** zero WebGL, zero scroll-jacking, zero JavaScript, a numbered onboarding/process list is exactly the kind of small-business-site UI (service steps, pricing-tier comparisons, FAQ ordering) that tier sells; can't actually be added to `docs/diy-website-style-catalog.md` this run — still missing, see this run's log entry. **Honest fallback, verified this run, not assumed:** the base rule renders a plain numbered badge via `counter(sfl-step, decimal)` on a solid-color circle; the `symbols()` version only applies inside `@supports (content: counter(c, symbols(cyclic "a")))`, which real headless-Chromium testing this run confirmed evaluates to `false` in this sandbox's own pinned build — a genuinely new data point: this sandbox's Chromium is now **153.0.8010.12**, not the 141.0.7390.37 every prior day in this log through day 43 was pinned to (a real sandbox upgrade, noted here rather than silently assumed unchanged) — still one stable version short of the Chrome 155 threshold this entry's own feature needs, so the gap is honest and current, not stale. A real computed-style check (`getComputedStyle(el, '::before').content`, not just reading the CSS) confirmed the fallback actually renders — all four markers computed as the plain `counter(sfl-step) ". "` form, zero broken or empty badges — exactly the 'never broken, never half-done' bar this catalog holds every entry to. (Vanilla example: live iframe preview + HTML/CSS tabs, no JS tab at all.)

<ol class="sfl-list">
  <li class="sfl-item"><span class="sfl-title">Book a slot</span><span class="sfl-sub">Pick a time — no phone tag</span></li>
  <li class="sfl-item"><span class="sfl-title">We build it</span><span class="sfl-sub">Live in days, not weeks</span></li>
  <li class="sfl-item"><span class="sfl-title">Review &amp; tweak</span><span class="sfl-sub">Two rounds included</span></li>
  <li class="sfl-item"><span class="sfl-title">Launch</span><span class="sfl-sub">Domain connected, done</span></li>
</ol>