Hidden = until found CSS tricks

August 15, 2025August 15, 2025

4 minutes, 24 seconds Read

This in the category “Missed first time around”. It appeared in the Firefox 139 Release Notes And I was, like, ooo neat. Then I saw It has been in Chrome since at least 2022. And as I wrote this, It landed in Safari Technology Preview 125. So there you have it.

It appears that there are a few good messages and tutorials about it hidden=until-found Floating there, so I thought I would write down a few important collection restaurants for later reference.

It makes hidden content “Findable”

Short story: Save hidden=until-found On an element in HTML it makes it possible for hidden content to be found within the element in the browser with searches on pages.

You’ll see, or more accurately not see, that the content is hidden with that in place:

CodePen Embed Fallback

`It’s content-visibility: hidden under the hood`

The browser takes that as a hint to hide the content and does this by implicitly content-visibility: hidden On the element in the user agent styles.

If we one Ctrl+F On the keyboard to activate on-page search and entering a query, a competition reveals the content, in which the matched query is emphasized.

Showing a marked term on the page for a matched search.

`Why we need this`

That is what I asked myself when I started digging a little deeper into this. The most prominent example of it is used is of the Chrome for developers Documents As a faux accorium. You know, a series of panels that open and close at the click.

Codpen Incase Fallback

But isn't that a dissolved deal now that we are the

 Element in the attack? Might as well use a semantic disclosure widget to, you know, Reveal. Indeed, browsers are also set content-visibility: hidden on the ::details-content part of the element that holds the content.
I'm pretty sure of it 

 Was not as broad supported in 2022 as today. It is actually part of Interop 2025 And note that one of the aforementioned functionalities is the option for search on pages. Chrome already supports it. Firefox has recently sent it (apparently as part of the hidden=until-found edition). And Safari will probably come with Interop 2025. The example of the Chrome for developers Post shows an approach to working around a non-supported supported supported 
 Element and now we have it.
So why hidden=until-closed?
Don't know. I am sure there is a good use case to hide content in one way or another, while making it searchable. I just can't think of it from my head. I mean, we have popover also, but that takes a different approach with display: none who completely removes the content from on page.
    Browser support and polyfill
We have already established that Chrome and Firefox are on board. Safari is the larger holdout, but knowing that making the hidden content in it 

 Findable is part of Interop 2025 (and Firefox's corresponding support for this as part of that effort) reminds me that it is around the corner. (It appears that inspiration was correct because It landed in Safari Technology Preview 125 After writing this.)
In the meantime, however, it is worth the use hidden=until-found? Because if we strive for a consistent cross-browser experience, we have to do a kind of exchange in between content-visibility: hidden To hide the content and content-visible: auto To reveal it.
Nathan Knowler explains The mystery that creates this. We can't set content-visibility: hidden On something without removing it from searches on pages. The hidden=until-found Attribute works exactly like content-visibility: hidden But keeps a search on pages still works. In other words, we cannot polyfill the function content-visibility.
Thank you, Nathan, for taking the enormous rabbit hole and finding a solution that the Shadow Dom uses to search for the HTML characteristic, to check the support and to return the properties when needed to visually hide the content without completely diluting it.
Styling
It seems that there is not much to say about styling something that is not visible, but note that the on-page search function emphasizes content that corresponds to the search.
It seems that we can get a new one ::search-text pseudo with which we can select the matched query and the peak in the peak in the CSS Pseudo-elements Module Level 4 SpecificationThat is currently in the design status of the editors when I write this.
What about multiple competitions? The current selection gets a different highlight than subsequent competitions.
According to the specification, we can probably combine ::search-text with the :current Pseudo-class to focus the current match: ::search-text:current.
If you think we might mix and match ::search-text with the corresponding :past And :future Pseudo-class, I'm afraid the specification says no. But it does not completely close the door:
The :past And :future Pseudo-classes are reserved for analogue use in the future. Any non-supported combination of these pseudo classes with ::search-text must are treated as invalid.
Is there anything else?
Not really, but I like the note at the end of Christian Shaefer's "Reconsidering findability" Post that says that attention must be paid to what is happening after A search matches content on the page. Currently the content remains visible even after searching pages has been closed or canceled. Perhaps we need another HTML hint for that.
Left
A landfill of things I found and used while investigating this: