Delete your form's 'touched' classes

Validity pseudo-classes that wait for the user. They match like :valid and :invalid, but only once the field has been altered, so a pristine required field stays quiet. A submit attempt counts as interaction too.

Delete: the script that listens for blur and input events just to add a “touched” class, so error styles don’t fire before the user has typed anything.

−/* a script marks fields the user has visited */
−input.touched:invalid { border-color: firebrick; }

+/* the browser tracks interaction itself */
+input:user-invalid { border-color: firebrick; }

The core suite passes in every current stable run. One edge is unsettled: when these flip mid-edit inside multi-part fields like date inputs is covered only by a test still marked tentative, and Chrome is currently the only engine passing it. If your validation styling leans on the exact timing inside date or time inputs, keep the class for those. In a browser too old to have these, the rule never matches: no inline highlighting, not a broken form.

One line-height, as a unit: 3lh is three lines tall. It crossed 30 months of support on 21 May, and the deletion it promises is every magic number that hard-codes a line-height multiple.

/* The deletion waiting here: */
.toast { min-height: calc(3 * 1.4em); } /* hoping 1.4 still matches */

/* Blocked by Safari, for now: */
.toast { min-height: 3lh; }

The blocker is specific. Safari 26.5.2’s current run fails the suite’s inherited-line-height test: an element whose line-height arrives from its parent, which is how line-height usually arrives, resolves 1lh against the wrong value. The other eight tests pass there, and Chrome, Edge and Firefox pass everything. Until that fix ships, the magic number is more predictable than the unit that replaces it. Its root-relative sibling rlh cleared the same day and appears on about one page load in three million.

Style queries let a component ask what a custom property is set to on its container. Firefox 151 shipped the last piece on 19 May, so the label now says Baseline. The label covers more than the browsers agree on.

@container style(--density: compact) { } /* passes everywhere */

@container style(--columns > 2) { } /* full marks only in Firefox */

The equality form passes its tests in the current Chrome, Edge, Firefox and Safari runs. The range form is another story: the dynamic range suite passes 7 of 7 in Firefox, 2 of 7 in Chrome, 1 of 7 in Safari and Edge. Tests for attribute-driven values fail in all four. If you treat the equality form as a progressive enhancement, nothing stops you today. The Hold is for the feature as labelled, because the label does not tell you where the seam is.