Nesting cleared: delete a build step

CSS rules can nest inside other rules, natively.

Delete: the build step that exists only to expand nesting. The source stays as written.

One seam. 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.

#a, b {
  & c { color: blue; } /* & is [1,0,0] for both, so [1,0,1] */
}

/* Your build step expanded that to: */
#a c { } /* [1,0,1], same */
b c  { } /* [0,0,2], weaker than the native version */

The two agree until a parent selector list mixes specificity levels. Before switching, search your source for comma-separated parent selectors containing an ID.

loading="lazy" defers offscreen images and iframes until the user scrolls near them.

Delete: the lazy-loading script and its data-src markup.

−<img data-src="chart.png" class="lazyload">
−<script>/* a script you no longer need */</script>

+<img src="chart.png" loading="lazy">

The core image and iframe cases pass their tests in every browser. What still fails anywhere is edge cases: an image whose URL is changed repeatedly from script, base-URL changes mid-load, lazy iframes during unusual navigations. Keep the image at the top of the page eager; deferring what is already on screen only delays it.

The parent selector: style an element by what it contains. It appears on about one in two hundred page loads.

Delete: the JavaScript that watches children and toggles state classes on their parents.

−/* a script adds .has-error to the form */
−form.has-error { border-color: firebrick; }

+form:has(input:invalid) { border-color: firebrick; }

One boundary, from Safari’s current test run. Parent, ancestor, adjacent and sibling positions all match Chrome exactly: 211 of 211, 337 of 337, 295 of 295, 295 of 295. The gap is re-matching while a script inserts and removes siblings: 14 of 28. If a :has() rule watches a sibling list under live mutation, keep the class for that one case.

field-sizing: content makes inputs and textareas grow and shrink with what is typed. June’s only new arrival, completed by Firefox 152.

Delete: the textarea autosize script, on new work.

textarea {
  field-sizing: content;
  min-height: 4rem;
  max-height: 16rem;
}

Textarea sizing and resizing pass in every current browser run. The one failure anywhere is Firefox re-fitting a number input after a script changes its value; textareas are unaffected. A month of Baseline means some of your users are still catching up, and for them the failure is the one you already ship: a fixed-size box with a scrollbar.

CSS masks crossed 30 months of support on 7 June, and appear on about 0.4% of page loads. The label says delete your fallbacks. The tests say not yet.

In Safari 26.5.2’s current run, masks repeat correctly from a raster image and fail the same three tests when the mask source is an SVG: mask-repeat-1-svg, -2-svg and -3-svg. Chrome passes all six. An SVG source is the common case, and a mask that fails to apply does not degrade: it reveals or hides the wrong thing. Keep whatever fallback you have until Safari’s SVG path catches up.