June was a deletion month. A single Firefox release produced exactly one new arrival, while sixteen features quietly finished their 30 months of support. The best of them is nesting: your CSS can nest itself now, and a build step can go.
\nVerdict: Cleared · Safe everywhere as of 11 June 2026
CSS rules can nest inside other rules, natively.
\nDelete: the build step that exists only to expand nesting. The source stays as written.
\nOne 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 {\n & c { color: blue; } /* & is [1,0,0] for both, so [1,0,1] */\n}\n\n/* Your build step expanded that to: */\n#a c { } /* [1,0,1], same */\nb 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.
\nVerdict: Cleared · Safe everywhere as of 19 June 2026
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\">\n−<script>/* a script you no longer need */</script>\n\n+<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.
\n:has()Verdict: Cleared · Safe everywhere as of 19 June 2026
The parent selector: style an element by what it contains. It appears on about one in two hundred page loads.
\nDelete: the JavaScript that watches children and toggles state classes on their parents.
\n−/* a script adds .has-error to the form */\n−form.has-error { border-color: firebrick; }\n\n+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-sizingVerdict: Cleared · New this month, 16 June 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.
\ntextarea {\n field-sizing: content;\n min-height: 4rem;\n max-height: 16rem;\n}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.
\nVerdict: Hold · Not yet
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.
\nIn 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.
Seven features became newly available in May, and five finished their 30 months of support. Four of the seven arrivals were old features that had been waiting on Chrome or Chrome Android; desktop Chrome has had shared workers since 2010, and Chrome Android shipped them this May. The thing worth deleting is in your forms.
\n:user-valid and :user-invalidVerdict: Cleared · Safe everywhere as of 2 May 2026
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.
\n−/* a script marks fields the user has visited */\n−input.touched:invalid { border-color: firebrick; }\n\n+/* the browser tracks interaction itself */\n+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.
\nlh unitVerdict: Hold · Not yet
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: */\n.toast { min-height: calc(3 * 1.4em); } /* hoping 1.4 still matches */\n\n/* Blocked by Safari, for now: */\n.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.
Verdict: Hold · Not yet
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.
\n@container style(--density: compact) { } /* passes everywhere */\n\n@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.
\nThat was May: one deletion, and two labels running ahead of their implementations.
", "date_published": "2026-06-08T00:00:00.000Z", "tags": [ "1 cleared", "2 hold" ] }, { "id": "https://cleared.page/2026-04/", "url": "https://cleared.page/2026-04/", "title": "Delete your role=\"search\" wrapper", "summary": "What became safe to use, and to delete, in April 2026.", "content_html": "A thin month, and a backwards one. Baseline’s rhythm is usually set by Safari, the browser that ships least often. April’s two arrivals were both waiting on the Chromium side: Firefox and Safari had shipped contrast-color() and Math.sumPrecise() months earlier, and Chrome 147 landed on 7 April with Edge two days behind. Four more features finished their 30 months of support. One of them is a deletion.
<search>Verdict: Cleared · Safe everywhere as of 13 April 2026
An HTML element for the region that holds your search box. It maps to the same search landmark the role attribute gave you, so screen reader users can jump straight to it without you writing any ARIA.
\nDelete: the role=\"search\" attribute, and usually the <div> it sits on.
−<!-- a div doing an element's job -->\n−<div role=\"search\">\n− <form action=\"/search\">…</form>\n−</div>\n\n+<search>\n+ <form action=\"/search\">…</form>\n+</search>One styling seam. Browsers that know the tag give it display: block in the user agent stylesheet. A browser too old to know it gives it nothing, and the initial value of display is inline. If old browsers matter to you, declare search { display: block } yourself: one line, inert wherever the browser already does it. Beyond that, failure is graceful. The contents render everywhere, and an old browser loses the landmark, not the page.
A note on the numbers: the summary scoreboard currently shows Safari at zero on this feature. The tests underneath disagree. In Safari’s current stable run, every test with the element’s name in its path passes, and the role-mapping suite passes whole. The zero is the scoreboard’s, not Safari’s.
\ncontrast-color()Verdict: Hold · Not yet
Hand it a background color and it returns white or black, whichever contrasts more. New this month, 10 April 2026. The deletion it promises is every hand-maintained pair of background and text custom properties.
\n.badge {\n background: var(--accent);\n color: contrast-color(var(--accent));\n}\n\n/* Which of white or black wins on a mid-tone\n background is the browser's call, not yours. */The label is running ahead of the paperwork. The function’s spec is an editor’s draft that still carries the banner “This spec is not yet ready for implementation”, and in the only form browsers ship, with no target contrast stated, the spec leaves the choice of contrast algorithm to the browser. Two engines can legitimately disagree about which of white or black a mid-tone background gets. The tests say the seams are real: Firefox’s current stable run fails the case where contrast-color() feeds a container style query, Safari’s fails to repaint a gradient whose color stop uses contrast-color(currentColor), and each of the four engines drops one of the seventeen valid-syntax parses. One more thing the name does not say: it maximizes contrast, it guarantees none. Against a mid-gray background the winner clears no bar, it just loses less. For now, picking the text color yourself is the only way to know what it will be.
That was April: one attribute to delete, and one new function whose own spec asks you to wait. The other four transitions gave you nothing to do, which is the honest truth about most features in most months.
", "date_published": "2026-05-04T00:00:00.000Z", "tags": [ "1 cleared", "1 hold" ] }, { "id": "https://cleared.page/2026-03/", "url": "https://cleared.page/2026-03/", "title": "Delete your equal-height card hack", "summary": "What became safe to use, and to delete, in March 2026.", "content_html": "Eight of March’s ten arrivals landed on a single day, 24 March, when Firefox 149 and Safari 26.4 both shipped. One was baseline-shift, a property Chrome has carried since 2008. But the month’s real business is in the eleven features that finished their 30 months of support, because three of them let you delete something. Start with your card grids.
\nVerdict: Cleared · Safe everywhere as of 15 March 2026
A nested grid can adopt its parent’s rows or columns instead of declaring its own: the track sizes come from the parent, and the subgrid’s items feed their sizes back up.
\nDelete: the script that measures card sections and equalises their heights, or the fixed row heights doing the same job with magic numbers.
\n−/* every card hard-codes the shared row plan */\n−.card { display: grid; grid-template-rows: 3rem 6rem 2rem; }\n\n+/* cards borrow their rows from the grid they sit in */\n+.cards { display: grid; grid-template-columns: repeat(3, 1fr);\n+ grid-template-rows: repeat(3, auto); }\n+.card { display: grid; grid-row: span 3;\n+ grid-template-rows: subgrid; }Track sizing, gaps and line names pass in all four current stable runs. The one seam is baseline alignment: Firefox still fails most of the suite’s baseline tests inside subgrids, so if your grid code contains align-items: baseline or align-self: baseline, check Firefox before deleting. That is the search. In a browser without subgrid the declaration drops and rows fall back to auto: misaligned cards, not broken ones.
Verdict: Cleared · Safe everywhere as of 18 March 2026
hyphens: auto breaks words at dictionary-approved points. Safari 17 completed the set in September 2023; the 30 months ran out on 18 March. It already appears on about one page load in a thousand.
Delete: the script or build step that sprays soft hyphens into your text.
\n−<!-- generated markup -->\n−Silben­trennung\n\n+<!-- requires lang=\"de\" (or whatever applies) on the markup -->\n+<style> article { hyphens: auto; } </style>The boundary is the language. The spec only requires hyphenation where the content language is known and the browser has a dictionary for it, so hyphens: auto without a lang attribute is a no-op by design. Coverage is also uneven: the suite’s eleven language-specific tests currently fail in all four stable runs, which names no single blocker but does say to spot-check the languages you actually publish. Failure is the gentle kind: no dictionary, no hyphens, a ragged edge.
image-set()Verdict: Cleared · Safe everywhere as of 18 March 2026
Resolution switching for CSS backgrounds, the srcset of background-image. Chromium dropped the prefix in May 2023; Safari 17 was the last piece.
Delete: the -webkit-image-set() line.
−background-image: url(hero.png);\n−background-image: -webkit-image-set(url(hero.png) 1x, url(hero@2x.png) 2x);\n−background-image: image-set(url(hero.png) 1x, url(hero@2x.png) 2x);\n\n+/* keep the plain url() line */\n+background-image: url(hero.png);\n+background-image: image-set(url(hero.png) 1x, url(hero@2x.png) 2x);Every rendering test passes in all four current stable runs; the only misses anywhere are a handful of parsing subtests, 140 to 142 of 144. Do keep the plain url() line: in a browser outside the core set that lacks image-set(), it is the difference between a low-resolution image and no image.
Verdict: Hold · Not yet
Style ranges of text from script without wrapping them in elements: register a Highlight, style it with ::highlight(). Firefox 149 shipped the last piece on 24 March.
::highlight(search-match) { background-color: Mark; }The browser that flipped the label is not the problem: Firefox passes 95% of the stable suite, Chrome and Edge 94%. Safari’s current stable run passes 66%, and the failures are the visible kind: highlight painting over text sized with font-relative or container-relative units, text shadows inside highlights, vertical writing mode. Safari has had the feature since late 2023, and its preview run now passes the full suite, so this Hold has an end in sight. Until that ships, the span-wrapping you already do is the more predictable renderer.
\ntext-indent: hangingVerdict: Cleared · New this month, 13 March 2026
One keyword inverts text-indent, so every line except the first is indented: the hanging indent of bibliographies and transcripts.
Delete: the two-declaration pair that fakes it.
\n−/* indent everything, pull the first line back */\n−.ref { padding-left: 2em; text-indent: -2em; }\n\n+.ref { text-indent: 2em hanging; }Chromium shipped it on 10 March, two weeks before the label; Safari has had it since 2021, Firefox since 2023. Every test passes in every current stable run, mobile included, which is rare enough this month to be worth saying. In an older browser the declaration is invalid and drops: lines sit flush, nothing breaks. Its sibling each-line went Baseline the same day.
That was March: four deletions and one wait, courtesy of a Safari run that says what the label does not.
", "date_published": "2026-04-06T00:00:00.000Z", "tags": [ "4 cleared", "1 hold" ] }, { "id": "https://cleared.page/2026-02/", "url": "https://cleared.page/2026-02/", "title": "Delete your RTL-detection script", "summary": "What became safe to use, and to delete, in February 2026.", "content_html": "Five features became newly available in February, and exactly one finished its 30 months of support. Four of the five arrivals live in JavaScript, WebAssembly, HTTP compression and a security API, outside this newsletter’s beat, so this is a thin month with two items: one CSS arrival worth starting now, and one deletion fourteen years in the making.
\ndirnameVerdict: Cleared · Safe everywhere as of 1 February 2026
An attribute for text fields. Add dirname and the browser submits a second field alongside the value: the direction the text was typed in, ltr or rtl. Chrome and Safari have shipped it since 2012. Firefox 116 completed the set in August 2023, and the 30-month clock ran out on 1 February.
Delete: the direction-guessing code. If your site stores user text that might be Arabic or Hebrew, something today inspects each comment to decide whether it needs dir=\"rtl\" when displayed again, a client script or a server-side heuristic. The browser already knows; let it tell you.
−<!-- a script sniffs the value, fills a hidden field -->\n−<input type=\"text\" name=\"comment\">\n\n+<!-- the browser reports direction at submission -->\n+<input type=\"text\" name=\"comment\" dirname=\"comment.dir\">\n+<!-- comment=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&comment.dir=rtl -->One seam at the edges. On input types where the spec says the attribute does not apply, current stable runs disagree: Firefox 153 and Safari 26.5.2 submit the direction pair for a month input anyway, while Chrome 151 and Edge 150 omit it. Keep dirname on plain text fields and textareas, where every current run passes, and treat the extra field as optional on the server. A browser too old to know the attribute never sends it: your default direction applies, and nothing breaks.
shape()Verdict: Cleared · New this month, 24 February 2026
A clip-path drawn with path commands in CSS syntax: lines, curves, arcs, in any CSS unit. The path() function it improves on takes one SVG string and, as the spec puts it, implicitly allows only the px unit. The spec defines shape() as a superset of path(): the same commands, but percentages, em, var() and calc() all work, so a curved shape can finally follow the box it clips.
The scoreboard argues. webstatus.dev shows stable Safari passing a third of the suite, which reads like a Hold. It is not. The current Safari 26.5.2 run fails seven subtests, and every one is the same complaint: when style is read back, Safari keeps the default from start and from origin keywords instead of dropping them from the serialization. Every parsing and computing subtest for the geometry itself passes, as it does in the current Chrome, Edge and Firefox runs. Nothing renders differently.
Firefox shipped it last, on 24 February, so declare a fallback on the line above; a browser without shape() drops the declaration it cannot parse and keeps the earlier one:
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); /* older browsers stop here */\nclip-path: shape(from 0 0, line to 100% 0,\n line to 100% 85%, curve to 0 100% with 50% 80%);Two footnotes. If your tests compare getComputedStyle strings for clip-path, Safari’s extra keywords will trip them; that is the entire defect. And Firefox Android has no current measurement: its newest test run predates the release that shipped the feature, so the low score there is a blank, not a fail. If it did turn out broken, the fallback line above is what those users would see.
That was February: a thin month for arrivals, and one deletion that waited fourteen years for its clock to run out.
", "date_published": "2026-03-09T00:00:00.000Z", "tags": [ "2 cleared" ] }, { "id": "https://cleared.page/2026-01/", "url": "https://cleared.page/2026-01/", "title": "Delete your 'is-transitioning' class", "summary": "What became safe to use, and to delete, in January 2026.", "content_html": "January was one release wide. Firefox 147, on 13 January, closed out all seven of the month’s arrivals by itself; nothing else moved. Four of the seven are the root-font versions of existing length units, full marks everywhere and nothing to do with them. The Navigation API reached Baseline the same day, but it is JavaScript, and this letter’s beat is CSS and HTML; it lives in the archive links below. The deletion this month belongs to everyone already running view transitions.
\n:active-view-transitionVerdict: Cleared · New this month, 13 January 2026
A pseudo-class that matches the root element while a view transition is running, and stops matching when it settles. Chromium has shipped it since May 2024; Firefox 147 was the last browser in.
\nDelete: the script that adds a marker class to the root before document.startViewTransition() and removes it when the transition finishes, just so your stylesheet can tell a transition is underway.
−/* a script toggles this class on <html> */\n−.is-transitioning .toolbar { pointer-events: none; }\n\n+/* the selector tracks the transition itself */\n+html:active-view-transition .toolbar { pointer-events: none; }One seam. In a browser too old to know this pseudo-class, the selectors spec makes any selector list containing an invalid selector invalid, whole. Appended to an existing comma-separated rule, :active-view-transition takes the other selectors down with it. Give it its own block, or wrap it in :where(), which parses forgivingly. Done that way, failure is graceful twice over: the rule never matches, and a browser without view transitions has no transition to style anyway.
The four desktop stable runs pass the feature’s tests without exception. Neither Android runner produces a number worth reading: Chrome Android fails the suite’s reftests wholesale at the same engine version that passes on desktop, a known harness fault, and Firefox Android has not been tested publicly since February, when this implementation was four weeks old and still failing its tests. If current Firefox on Android is broken here, the cost is transition styles not applying, the graceful end of wrong. Usage is early, about one page load in ninety thousand, which is also the audience: no view transitions, nothing to delete yet.
\nanimation-compositionVerdict: Skip · Safe everywhere as of 4 January 2026
Skip, unless you run two animations against the same property of the same element. Then this is for you: it decides whether the second animation replaces the first, the default, or adds to it, or accumulates with it.
\nIt finished its 30 months of support on 4 January with a perfect score in every current stable run, and Chrome’s developer site gave it a dedicated write-up, more promotion than a property this situational usually gets. Hence the printed verdict: in most stylesheets two animations never meet on one property, so there is nothing to delete and nothing to start. Where they do meet, it works everywhere today.
\nThat was January: one release, one deletion, and a clearing shelf with nothing on it that needs removing.
", "date_published": "2026-02-09T00:00:00.000Z", "tags": [ "1 cleared", "1 skip" ] } ] }