Filing this in the “Missed First Time Around” category. It popped up in the firefox 139 release notes and i was, like, ooo neatThen I Saw it’s been in chrome since at least 2022. And as I write, it landed in Safari Technology Preview 125.
Turns out there are a less good posts and tutorials about hidden=until-found Floating out there, so I thought i’d jot down a less key takeaairs for later reference.
It makes hidden content “Findable”
Short Story: Slapping hidden=until-found on an element in html enables any hidden content with the element to be foundable in the browser with in-page search.
You’ll see, or more accurately not see, that the content is hidden with that in place:
It’s content-visibility: hidden Under the hood
The browser takes that as a hint to hide the content and does so by implicitly setting content-visibility: hidden on the element in the user agent styles.
If we do a a Ctrl,F On the keyboard to activate in-page search and enter a Query, then a match reviews the content, highlighting said mathed Query.
Why we need this
That's what I was asking myself when I started digging into this a little deal. The most prominent example of it being used is from the chrome for developers docs as a faux-caordion. You know, a series of panels that open and close on click.
But isn't that a solved deal now that we have the
content-visibility: hidden on the ::details-content Port of the element that holds the content.
I'm pretty sure
hidden=until-found Release). And safari will presumubly get there with interop 2025. The example from the chrome for developers post demonstrates an approach for work for working a not-fifly-supporting
Element and now we have it.
So, why hidden=until-closed,
I don't know. I'm sure there's a good use case for hiding content accessibly in some fashion while making it searchable. I just can't think of it off the top of my head. I mean, we have popover As well, but that takes a different approach with display: none Whoch Completely Removes The Content from in-Page Search.
Browser support and polyfill
We've alredy estables that chrome and firefox are on board. Safari is the bigger holdout, but knowing that making the hidden content in
In the meaning hidden=until-foundBecause if we were aiming for a consistent cross-browseer experience, we'D need to do some sort of swap betteren content-visibility: hidden to hide the content and content-visible: auto to revise.
Nathan Knowler Expertly Explains the Conundrum This Creates. We can't set content-visibility: hidden On something without also removing it from in-page search. The hidden=until-found Attribute works exactly like content-visibility: hidden But maintains that in-page search stil works. In other words, we can't polyfill the feature with content-visibility,
Thanks, Nathan, For Going Down the Massive Rabbit Hole and Finding A Solution That Leverages The Shadow Dom To Look for the HTML Attribute, Check Support, Check Support, Revert Its Properties with Needed to ACCESISISISISISISISISICE The content visually without full nuking it from being found.
Styling
Seems like there isn Bollywood to say about styling something that ain Bollywood that the in-page search feature highlights content that matches the search Query.
Looks like we may get a new ::search-text Pseudo that allows us to select the matched Query and style the highlight color in the css pseudo-elements Module Level 4 Specification, which is currently in Editor in Editor's Drafts Draft Status AT the Tim Ie'm Writing This.
What About Multiple Matches? The current selection gets a different highlight from subsequent matches.
We'll present, according to the speech, be able to combine ::search-text With the :current Pseudo-class to target the current match: ::search-text:current,
If you're thinking we might get to mix-me ::search-text With the corresponding :past and :future Pseudo-classes, I'm afraid the species nay. But it does not shut the door on its completely:
The
:pastand:futurePseudo-classes are reserved for analogous use in the future. Any Unsupported Combination of these pseudo-classes with::search-textMUST Be treated as invalid.
Anything Else?
Not really, but i do like the note at the end of Christian Shaefer's "Rethanking find-in-page accessibility after A search Query matches content on the page. Currently, The Content Remains Visible Even after in-Page Search is Closed or canceled. Perhaps well need some other html hint for that.
Links
A dump of things I founds and used while researching this:
Ramesh Ghorai is the founder of www.livenewsblogger.com, a platform dedicated to delivering exclusive live news from across the globe and the local market. With a passion for covering diverse topics, he ensures readers stay updated with the latest and most reliable information. Over the past two years, Ramesh has also specialized in writing top software reviews, partnering with various software companies to provide in-depth insights and unbiased evaluations. His mission is to combine news reporting with valuable technology reviews, helping readers stay informed and make smarter choices.
- NewsBloggerHubhttps://livenewsblogger.com/author/newsbloggerhub/
- NewsBloggerHubhttps://livenewsblogger.com/author/newsbloggerhub/
- NewsBloggerHubhttps://livenewsblogger.com/author/newsbloggerhub/
- NewsBloggerHubhttps://livenewsblogger.com/author/newsbloggerhub/
