Cleared

field-sizing: content makes inputs and textareas grow and shrink with what is typed. The textarea autosize script you load on every form page is what it deletes, on new work.

A textarea that grows as you type works in every current browser run. The misses are at the edges: Firefox will not re-fit a number input after a script changes its value, and Safari draws a search input’s caret taller than its placeholder.

field-sizing: content makes inputs and textareas grow and shrink with what is typed. The textarea autosize script you load on every form page is what it deletes, on new work.

Hand it a background color and it returns white or black, whichever contrasts more. What it promises to delete is every hand-maintained pair of background and text custom properties.

Chrome, Edge and Firefox now pass the whole suite; Firefox’s two failures are fixed since April. Safari still fails to repaint a gradient whose color stop uses contrast-color(currentColor).

Hand it a background color and it returns white or black, whichever contrasts more. What it promises to delete is every hand-maintained pair of background and text custom properties.

.badge { background: var(--accent); color: contrast-color(var(--accent)); } Which of white or black wins on a mid-tone background is the browser’s call, not yours.

A clip-path drawn with path commands in CSS syntax: lines, curves, arcs, in any CSS unit. path(), which it improves on, takes one SVG string and allows only px. shape() takes percentages, em, var() and calc().

The scoreboard argues. webstatus.dev shows stable Safari passing a third of the suite. That reads like a Hold, and it is not: Safari fails seven subtests, all the same complaint. It keeps the default from start and from origin keywords when style is read back.

A clip-path drawn with path commands in CSS syntax: lines, curves, arcs, in any CSS unit. path(), which it improves on, takes one SVG string and allows only px. shape() takes percentages, em, var() and calc().

So a curved shape can finally follow the box it clips. clip-path: shape(from 0 0, line to 100% 0, line to 100% 85%, curve to 0 100% with 50% 80%);

Two new CSS functions. sibling-index() gives an element’s position among its siblings, starting at 1, and sibling-count() gives how many there are. Both return plain numbers you can use in calc().

The trouble starts when the index is read somewhere other than a plain declaration. Safari 26.6 passes 3 of the suite’s 22 tests whole: it fails the index inside a gradient, inside a container query, and inside a shadow tree.

Two new CSS functions. sibling-index() gives an element’s position among its siblings, starting at 1, and sibling-count() gives how many there are. Both return plain numbers you can use in calc().

If your images ship as a three-format stack, AVIF on top, WebP in the middle, JPEG at the floor, the middle is now dead weight. AVIF finished its 30 months of browser support on July 25.

Most sites never built this stack. Search your templates for type="image/webp": if nothing comes back, or the floor under your sources is itself a .webp, there is no middle to delete and nothing to do.

If your images ship as a three-format stack, AVIF on top, WebP in the middle, JPEG at the floor, the middle is now dead weight. AVIF finished its 30 months of browser support on July 25.

Before: <source srcset="chart.avif" type="image/avif"> <source srcset="chart.webp" type="image/webp"> <img src="chart.jpg" alt="Monthly revenue"> After: the same, minus the middle line.

A correction. In June I told you to hold your mask fallbacks because Safari failed three mask-repeat tests. I misread what those tests cover. Most of you can delete the fallback.

Keep it when you mask SVG content, when a mask stacks more than one layer, or when you use mask-clip, mask-origin, mask-composite or mask-mode. Safari 26.6 still fails every one of those.

A correction. In June I told you to hold your mask fallbacks because Safari failed three mask-repeat tests. I misread what those tests cover. Most of you can delete the fallback.

The tests are named mask-repeat-1-svg, -2-svg and -3-svg. I read the -svg as naming the mask source, the image doing the masking. It names the masked content, the element underneath the mask.

Style ranges of text from script without wrapping them in elements: register a Highlight, style it with ::highlight(). It has been newly available since March. One browser is still holding it back.

Safari’s failures are the visible kind: highlight painting over text sized with font-relative or container-relative units, vertical writing mode, and text shadows inside highlights.

Style ranges of text from script without wrapping them in elements: register a Highlight, style it with ::highlight(). It has been newly available since March. One browser is still holding it back.

::highlight(search-match) { background-color: Mark; } What that deletes is the span-wrapping your find-in-page or editor code does today, purely to get a background behind a range.

A web component keeps its markup and styles in a shadow root, and until recently the only way to make one was to call attachShadow() from JavaScript. You can write it in the HTML now, and delete the script that used to do it.

One thing to check first. These shadow roots are only created as the browser parses the page. Any innerHTML that inserts markup containing shadowrootmode creates none: the template stays a template. Switch those calls to setHTMLUnsafe().

A web component keeps its markup and styles in a shadow root, and until recently the only way to make one was to call attachShadow() from JavaScript. You can write it in the HTML now, and delete the script that used to do it.

Before, on every page: document.querySelectorAll('template[shadowrootmode]').forEach((t) => { const mode = t.getAttribute('shadowrootmode'); t.parentNode.attachShadow({ mode }).append(t.content); t.remove(); });

Seven CSS pseudo-classes match a video or audio element by what it is doing: :playing, :paused, :seeking, :buffering, :stalled, :muted and :volume-locked. Baseline says they are newly available. Chrome has not shipped them.

The label rests on one browser compatibility data entry saying Chrome 152 shipped these on August 25. Chrome’s own status tracker lists the feature as proposed, targeting Chrome 155. Every stable Chrome run since 152 fails all six checks in the suite, and Edge fails the same way.

Seven CSS pseudo-classes match a video or audio element by what it is doing: :playing, :paused, :seeking, :buffering, :stalled, :muted and :volume-locked. Baseline says they are newly available. Chrome has not shipped them.

Your CSS can nest itself now, natively. The build step that exists only to expand nesting can go, and your source stays exactly as written.

The two agree until a parent selector list mixes specificity levels. Search your source for comma-separated parent selectors containing an ID and check those. Everything else expands identically.

Your CSS can nest itself now, natively. The build step that exists only to expand nesting can go, and your source stays exactly as written.

One difference to know before you switch. A nested rule resolves the way :is() does: & takes the specificity of the most specific selector in the parent list. A preprocessor expands the same source into a plain selector list, where each branch keeps its own.

On August 28, Baseline said the media element pseudo-classes were newly available. Chrome hadn’t shipped them. Every stable run failed every test. Issue 08 said Hold and named the data as the reason. cleared.page/2026-08/