The following term is defined in CSS Containment:
+The following terms are defined in CSS Containment:
onauxclickonbeforematchonblur*oncanceloncanplayAll HTML elements may have the hidden content attribute set. The hidden attribute is a boolean attribute. When specified
- on an element, it indicates that the element is not yet, or is no longer, directly relevant to the
- page's current state, or that it is being used to declare content to be reused by other parts of
- the page as opposed to being directly accessed by the user. User agents should not
- render elements that have the hidden attribute specified. This
- requirement may be implemented indirectly through the style layer. For example, an HTML+CSS user
- agent could implement these requirements using the rules suggested in the
- Rendering section.
Because this attribute is typically implemented using CSS, it's also possible to
- override it using CSS. For instance, a rule that applies 'display: block' to all elements will
- cancel the effects of the hidden attribute. Authors therefore
- have to take care when writing their style sheets to make sure that the attribute is still styled
- as expected.
| State + | Keywords + | |
|---|---|---|
| Until found state + | until-found
+ | + |
| Hidden state + | The empty string + | |
hidden
+ |
The attribute may be omitted. The invalid value default + is the hidden state. The missing value default is the not + hidden state.
+ +When an element has the hidden attribute in the hidden state, it indicates that the element is not yet, or
+ is no longer, directly relevant to the page's current state, or that it is being used to declare
+ content to be reused by other parts of the page as opposed to being directly accessed by the user.
+ User agents should not render elements that are in the hidden state. This requirement may be implemented
+ indirectly through the style layer. For example, a web browser could implement these requirements
+ using the rules suggested in the Rendering section.
When an element has the hidden attribute in the hidden until found state, it indicates that the
+ element is hidden like the hidden state but the
+ content inside the element will be accessible to find-in-page and fragment navigation. When these features attempt to scroll to a
+ target which is in the element's subtree, the user agent will remove the hidden attribute in order to reveal the content before scrolling to
+ it. In addition to removing the hidden attribute, an event named
+ beforematch is also fired on the element before the hidden attribute is removed.
Web browsers will use 'content-visibility: hidden' instead of 'display: none' when the hidden attribute is in the hidden until found state, as specified in the Rendering section.
Because this attribute is typically implemented using CSS, it's also possible to override it + using CSS. For instance, a rule that applies 'display: block' to all elements will cancel the + effects of the hidden state. Authors therefore + have to take care when writing their style sheets to make sure that the attribute is still styled + as expected. In addition, legacy user agents which don't support the hidden until found state will have 'display: none' + instead of 'content-visibility: hidden', so authors are encouraged to make sure that their style + sheets don't change the 'display' or 'content-visibility' properties of hidden until found elements.
+ +Since elements with the hidden attribute in the hidden until found state use 'content-visibility:
+ hidden' instead of 'display: none', there are two caveats of the hidden until found state that make it different
+ from the hidden state:
The element needs to be affected by layout containment in order to be + revealed by find-in-page. This means that if the element in the hidden until found state has a 'display' value of + 'none', 'contents', or 'inline', then the element will not be revealed by find-in-page.
The element will still have a generated box when in + the hidden until found state, which means + that borders, margin, and padding will still be rendered around the element.
The hidden IDL
- attribute must reflect the content attribute of the same name.
The hidden getter steps
+ are:
If the hidden attribute is in the until-found state, then return "until-found".
If the hidden attribute is set, then return
+ true.
Return false.
The hidden setter steps are:
If the given value is a string that is an ASCII case-insensitive match for
+ "until-found", then set the hidden attribute to "until-found".
Otherwise, if the given value is false, then remove the hidden attribute.
Otherwise, if the given value is the empty string, then remove the hidden attribute.
Otherwise, if the given value is null, then remove the hidden attribute.
Otherwise, if the given value is 0, then remove the hidden attribute.
Otherwise, if the given value is NaN, then remove the hidden attribute.
Otherwise, set the hidden attribute to the empty
+ string.
The ancestor hidden-until-found revealing algorithm is to run the following steps on + currentNode:
+ +While currentNode has a parent node within the flat tree:
+ +If currentNode has the hidden attribute in the
+ hidden until found state, then:
Fire an event named beforematch at currentNode.
Remove the hidden attribute from
+ currentNode.
Set currentNode to the parent node of currentNode within the + flat tree.
window.find() API.
- detailsdetails and hidden=until-foundWhen find-in-page begins searching for matches, all details elements in the page
- which do not have their open attribute set should have
- the skipped contents of their second slot become
- accessible, without modifying the open attribute, in
- order to make find-in-page able to search through it. After find-in-page finishes searching for
- matches, those details elements should have their contents become skipped again.
- This entire process must happen synchronously (and so is not observable to users or to author
- code).
open attribute set should have the
+ skipped contents of their second slot become accessible,
+ without modifying the open attribute, in order to make
+ find-in-page able to search through it. Similarly, all HTML elements with the hidden attribute in the hidden until found state should have their skipped contents become accessible without modifying the hidden attribute in order to make find-in-page able to search through
+ them. After find-in-page finishes searching for matches, the details elements and the
+ elements with the hidden attribute in the hidden until found state should have their contents
+ become skipped again. This entire process must happen synchronously (and so is not observable to
+ users or to author code).
When find-in-page chooses a new active match, perform the following steps:
@@ -78132,8 +78272,15 @@ body { display:none } match.Queue a global task on the user interaction task source given - node's relevant global object to run the ancestor details - revealing algorithm on node.
Run the ancestor details revealing algorithm on node.
Run the ancestor hidden-until-found revealing algorithm on + node.
@@ -89626,6 +89773,9 @@ new PaymentRequest(…); // Allowed to use
Run the ancestor details revealing algorithm on target.
Run the ancestor hidden-until-found revealing algorithm on + target.
Scroll target into view, with behavior set to "auto", block set to "start", and inline set to "nearest".
onabort abort
onauxclick auxclick
+ onbeforematch beforematch
oncancel cancel
oncanplay canplay
oncanplaythrough canplaythrough
@@ -96702,6 +96853,7 @@ typedef OnBeforeUnloadEventHandlerNonNull? OnBeforeUnl
interface mixin GlobalEventHandlers {
attribute EventHandler onabort;
attribute EventHandler onauxclick;
+ attribute EventHandler onbeforematch;
attribute EventHandler onblur;
attribute EventHandler oncancel;
attribute EventHandler oncanplay;
@@ -116747,11 +116899,19 @@ console.assert(container.firstChild instanceof SuperP);
@namespace url(http://www.w3.org/1999/xhtml);
-, area, base, basefont, datalist, head, link, meta, noembed,
+area, base, basefont, datalist, head, link, meta, noembed,
noframes, param, rp, script, style, template, title {
display: none;
}
+ {
+ display: none;
+}
+
+[hidden=until-found i]:not(embed) {
+ content-visibility: hidden;
+}
+
embed[hidden] { display: inline; height: 0; width: 0; }
input[type=hidden i] { display: none !important; }
@@ -124911,6 +125071,12 @@ interface External {
afterprint event handler for Window object
Event handler content attribute
+
+ onbeforematch
+ HTML elements
+ beforematch event handler
+ Event handler content attribute
+
onbeforeprint
body
@@ -125899,6 +126065,14 @@ INSERT INTERFACES HERE
Window
Fired at the Window before printing
+
+ beforematch
+ Event
+ Elements
+ Fired on elements with the hidden=until-found attribute before they are
+ revealed.
+
beforeunload
BeforeUnloadEvent