How can I check for browser support for a specific value of an HTML attribute?

I am specifically trying to detect whether or not the browser supports the "until-found" value of the global HTML hidden attribute, i.e. hidden="until-found".

This is marked as an experimental feature at the time of writing, but I'd like to already start implementing a solution with it, just conditionally based on browser support. (Firefox being the slower one to implement.)

I tried searching for solutions to this but only found ones that detect whether or not the attribute is present on a newly created element at all. I believe this won't work in this case, because the hidden attribute has been around for a long time, but this new value for the attribute will add new behavior to the browser.

Making matters worse, any value for the hidden attribute is valid (even empty or invalid ones) to make the element hidden, except in browsers that support the "until-found" value, where that value has a slightly different meaning/behavior.

Any help is appreciated, even ones who claim this isn't possible, or pointing me to duplicate questions. 🙏

Let me know if the question is unclear and I'll try to clarify!

Solution

This now works in Firefox >= 139 (May 2025) It will show "not supported" in older versions of Firefox < 139

const untilFound = document.querySelector("#until-found-box");
const supported = 'onbeforematch' in untilFound;
if (supported) {
  untilFound.addEventListener(
    "beforematch",
    () => (untilFound.textContent = "I've been revealed!"),
  );
} else console.log("not supported");

div.hiddentest div {
  height: 40px;
  width: 300px;
  border: 5px dashed black;
  margin: 1rem 0;
  padding: 1rem;
  font-size: 2rem;
}

div#until-found-box {
  color: red;
  border: 5px dotted red;
  background-color: lightgray;
}

<a href="#until-found-box">Go to hidden content</a>

<div class="hiddentest">
  <div>I'm not hidden</div>
  <div id="until-found-box" hidden="until-found">Hidden until found</div>
  <div>I'm not hidden</div>
</div>