diff options
Diffstat (limited to 'devdocs/html/global_attributes%2Fhidden.html')
| -rw-r--r-- | devdocs/html/global_attributes%2Fhidden.html | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/devdocs/html/global_attributes%2Fhidden.html b/devdocs/html/global_attributes%2Fhidden.html new file mode 100644 index 00000000..7ab5cf9a --- /dev/null +++ b/devdocs/html/global_attributes%2Fhidden.html @@ -0,0 +1,140 @@ +<header><h1>hidden</h1></header><div class="section-content"><p>The <code>hidden</code> <a href="../global_attributes">global attribute</a> is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute indicating that the browser should not render the contents of the element. For example, it can be used to hide elements of the page that can't be used until the login process has been completed.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"><iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/attribute-hidden.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="description">Description</h2> +<div class="section-content"> +<p>The <code>hidden</code> attribute is used to indicate that the content of an element should not be presented to the user. This attribute can take any one of the following values:</p> <ul> <li>an empty string</li> <li>the keyword <code>hidden</code> +</li> <li>the keyword <code>until-found</code> +</li> </ul> <p>There are two states associated with the <code>hidden</code> attribute: the <em>hidden</em> state and the <em>hidden until found</em> state.</p> <ul> <li>An empty string, or the keyword <code>hidden</code>, set the element to the <em>hidden</em> state. Additionally, invalid values set the element to the <em>hidden</em> state.</li> <li>The keyword <code>until-found</code> sets the element to the <em>hidden until found</em> state.</li> </ul> <p>Thus, all the following set the element to the <a href="#the_hidden_state"><em>hidden</em></a> state:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="F6QSeMMmMzhH/YQwuFZG+tGfuv+WJ96PBn5zxBy93zg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">hidden</span><span class="token punctuation">></span></span>I'm hidden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm also hidden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>something else<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm hidden too!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The following sets the element to the <a href="#the_hidden_until_found_state"><em>hidden until found</em></a> state:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="arjxHMT0xZ28pDKZEfA6hIwFAX5UgUgITFKUufM7IQQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>until-found<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm hidden until found<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The <code>hidden</code> attribute must not be used to hide content just from one presentation. If something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.</p> <p>Hidden elements shouldn't be linked from non-hidden elements. For example, it would be incorrect to use the <code>href</code> attribute to link to a section marked with the <code>hidden</code> attribute. If the content is not applicable or relevant, then there is no reason to link to it.</p> <p>It would be fine, however, to use the ARIA <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby"><code>aria-describedby</code></a> attribute to refer to descriptions that are themselves hidden. While hiding the descriptions implies that they are not useful on their own, they could be written in such a way that they are useful in the specific context of being referenced from the element that they describe.</p> <p>Similarly, a canvas element with the <code>hidden</code> attribute could be used by a scripted graphics engine as an off-screen buffer, and a form control could refer to a hidden form element using its form attribute.</p> <p>Elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit.</p> +</div> +<h3 id="the_hidden_state">The hidden state</h3> +<div class="section-content"> +<p>The <em>hidden</em> state indicates that the element is not currently relevant to the page, or that it is being used to declare content for reuse by other parts of the page and should not be directly presented to the user. The browser will not render elements that are in the <em>hidden</em> state.</p> <p>Web browsers may implement the <em>hidden</em> state using <code>display: none</code>, in which case the element will not participate in page layout. This also means that changing the value of the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a> property on an element in the <em>hidden</em> state will override the state. For instance, elements styled <code>display: block</code> will be displayed despite the <code>hidden</code> attribute's presence.</p> +</div> +<h3 id="the_hidden_until_found_state">The hidden until found state</h3> +<div class="section-content"> +<p>In the <em>hidden until found</em> state, the element is hidden but its content will be accessible to the browser's "find in page" feature or to fragment navigation. When these features cause a scroll to an element in a <em>hidden until found</em> subtree, the browser will:</p> <ul> <li>fire a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/beforematch_event"><code>beforematch</code></a> event on the hidden element</li> <li>remove the <code>hidden</code> attribute from the element</li> <li>scroll to the element</li> </ul> <p>This enables a developer to collapse a section of content, but make it searchable and accessible via fragment navigation.</p> <p>Note that browsers typically implement <em>hidden until found</em> using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility"><code>content-visibility: hidden</code></a>. This means that unlike elements in the <em>hidden</em> state, elements in the <em>hidden until found</em> state will have generated boxes, meaning that:</p> <ul> <li>the element will participate in page layout</li> <li>margin, borders, padding, and background for the element will be rendered.</li> </ul> <p>Also, the element needs to be affected by <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment">layout containment</a> in order to be revealed. This means that if the element in the <em>hidden until found</em> state has a <code>display</code> value of <code>none</code>, <code>contents</code>, or <code>inline</code>, then the element will not be revealed by find in page or fragment navigation.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="using_until-found">Using until-found</h3> +<div class="section-content"> +<p>In this example we have:</p> <ul> <li>Three <a href="../element/div"><code><div></code></a> elements. The first and the third are not hidden, while the second has <code>hidden="until-found"</code>and <code>id="until-found-box"</code> attributes.</li> <li>A link whose target is the <code>"until-found-box"</code> fragment.</li> </ul> <p>The hidden until found element has a dotted red border and a gray background.</p> <p>We also have some JavaScript that listens for the <code>beforematch</code> event firing on the hidden until found element. The event handler changes the text content of the box.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Nm2LZ7wqgBvDiABN7iDpXhwSzmpuHx+2TEPF5NlSgKU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#until-found-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to hidden content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>I'm not hidden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>until-found-box<span class="token punctuation">"</span></span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>until-found<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hidden until found<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>I'm not hidden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="QUGQfj/+IUu+NKbU0+1TXJuDk9Iae8xvJjdYm/RH7hs=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 5px dashed black<span class="token punctuation">;</span> + <span class="token property">margin</span><span class="token punctuation">:</span> 1rem 0<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">div#until-found-box</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 5px dotted red<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> lightgray<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="javascript">JavaScript</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="b8swrc4z2/GmaZzeCCtA+4mjq1wx9NfpkCElqlqR/9w=" data-language="js"><span class="token keyword">const</span> untilFound <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#until-found-box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +untilFound<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> + <span class="token string">"beforematch"</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>untilFound<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"I've been revealed!"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> +<span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <h4 id="result">Result</h4> <p>Note that although the content of the element is hidden, the element still has a generated box, occupying space in the layout and with background and borders rendered.</p> <p>Clicking the "Go to hidden content" button navigates to the hidden until found element. The <code>beforematch</code> event fires, the text content is updated, and the element content is displayed.</p> <p>To run the example again, click "Reset".</p> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Using until-found sample" id="frame_using_until-found" height="400" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Global_attributes/hidden/runner.html?id=using_until-found" loading="lazy"></iframe> +</div> +</div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute">HTML Standard <br><small># the-hidden-attribute</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody> +<tr> +<th><code>hidden</code></th> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.1</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>until-found_value</code></th> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">70</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">19.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden"><code>HTMLElement.hidden</code></a></li> <li>All <a href="../global_attributes">global attributes</a> +</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden"><code>aria-hidden</code></a> attribute</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/beforematch_event"><code>beforematch</code></a> event</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden</a> + </p> +</div> |