DEV Community

Yann
Yann

Posted on • Originally published at cleared.page

How to keep up with browser support of new HTML/CSS features?

#css #html #browser #webdev

For an easy and thorough intro to Baseline, check out this talk by Rachel Andrew, but if you want the short version… Combining those 4 resources, you can get a definitive verdict on whether a browser feature is ready to go your client's site:

  • webstatus.dev: for Baseline status and dates, per-browser versions and ship dates, test summary scores, Chrome usage, and developer signals. The spine of every issue.
  • wpt.fyi: for the test data underneath those scores, and for when each browser was actually tested.
  • caniuse: when a verdict is close, because Baseline says “safe in the core browser set” and caniuse says “safe for 97.3% of real traffic.” That gap is exactly where a catastrophic-failure Hold lives.
  • MDN browser compat data: for the partial-implementation flags and per-subfeature notes that Baseline flattens away.
  • Interop: for whether a gap is being actively worked on.

Combining all those, here's what you get…

Browser support for June 2026

1. Nesting

Verdict: Cleared · Safe everywhere as of June 11, 2026

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 */
Enter fullscreen mode Exit fullscreen mode

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

2. Lazy-loading images and iframes

Verdict: Cleared · Safe everywhere as of June 19, 2026

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

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

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

<!-- After -->
<img src="chart.png" loading="lazy">
Enter fullscreen mode Exit fullscreen mode

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.

3. :has()

Verdict: Cleared · Safe everywhere as of June 19, 2026

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.

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

/* After */
form:has(input:invalid) { border-color: firebrick; }
Enter fullscreen mode Exit fullscreen mode

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.

4. field-sizing

Verdict: Cleared · New this month, June 16, 2026

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

5. Masks

Verdict: Hold · Not yet

CSS masks crossed 30 months of support on June 7, 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.

Top comments (0)