Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editorial: tidy up hidden enumerated attribute #9985

Merged
merged 9 commits into from
Jan 9, 2024
Merged

Editorial: tidy up hidden enumerated attribute #9985

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ce18785
Editorial: tidy up hidden enumerated attribute
keithamus Dec 8, 2023
9ceb082
s/Keywords/Keyword
keithamus Dec 8, 2023
af803ae
drop `-keyword` suffix
keithamus Dec 8, 2023
0e21a7d
drop state suffix
keithamus Dec 11, 2023
2423ee8
move state word outside of state links
keithamus Dec 11, 2023
a8b2835
use correct state name, remove hyphen
keithamus Dec 11, 2023
164ce84
fixup hidden state definitions, move dfn to table
keithamus Dec 11, 2023
611d199
move "state" out of more "hidden until found state" links
keithamus Dec 11, 2023
1de7fd5
move state out of span
keithamus Jan 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 34 additions & 30 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77527,42 +77527,46 @@ END:VCARD</pre>

<p>All <span>HTML elements</span> may have the <dfn element-attr for="html-global"><code
data-x="attr-hidden">hidden</code></dfn> content attribute set. The <code
data-x="attr-hidden">hidden</code> attribute is an <span>enumerated attribute</span>. The
following table lists the states for this attribute:</p>
data-x="attr-hidden">hidden</code> attribute is an <span>enumerated attribute</span> with the
following keywords and states:</p>

<table>
<thead>
<tr>
<th>Keyword
keithamus marked this conversation as resolved.
Show resolved Hide resolved
<th>State
<th>Keywords
<th>Brief description
<tbody>
<tr>
<td><span data-x="attr-hidden-until-found-state">Until found state</span>
<td><dfn attr-value for="html-global/hidden"><code data-x="attr-hidden-until-found-keyword">until-found</code></dfn>
<td><dfn attr-value for="html-global/hidden"><code data-x="attr-hidden-until-found">until-found</code></dfn>
<td><dfn data-x="attr-hidden-until-found-state">hidden until found</dfn>
keithamus marked this conversation as resolved.
Show resolved Hide resolved
<td>Will not be rendered but content inside will be accessible to <span>find-in-page</span> and
<span data-x="navigate-fragid">fragment navigation</span>
<tr>
<td rowspan=2><span data-x="attr-hidden-hidden-state">Hidden state</span>
<td>The empty string
<td rowspan=2><dfn data-x="attr-hidden-hidden-state">hidden</dfn>
<td rowspan=2>Will not be rendered.
<tr>
<td><dfn attr-value for="html-global/hidden"><code data-x="attr-hidden-hidden-keyword">hidden</code></dfn>
<td><dfn attr-value for="html-global/hidden"><code data-x="attr-hidden-hidden">hidden</code></dfn>
</table>

<p>The attribute's <i data-x="missing value default">missing value default</i> is the <dfn
keithamus marked this conversation as resolved.
Show resolved Hide resolved
data-x="attr-hidden-not-hidden-state">not hidden state</dfn>, and its <i data-x="invalid value
default">invalid value default</i> is the <span data-x="attr-hidden-hidden-state">hidden
state</span>.</p>
data-x="attr-hidden-not-hidden-state">not hidden</dfn> state, and its <i data-x="invalid value
default">invalid value default</i> is the <span data-x="attr-hidden-hidden-state">hidden</span>
state.</p>
keithamus marked this conversation as resolved.
Show resolved Hide resolved

<p>When an element has the <code data-x="attr-hidden">hidden</code> attribute in the <dfn
data-x="attr-hidden-hidden-state">hidden state</dfn>, it indicates that the element is not yet, or
<p>When an element has the <code data-x="attr-hidden">hidden</code> attribute in the <span
data-x="attr-hidden-hidden-state">hidden</span> 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 <span
data-x="attr-hidden-hidden-state">hidden state</span>. This requirement may be implemented
data-x="attr-hidden-hidden-state">hidden</span> state. This requirement may be implemented
indirectly through the style layer. For example, a web browser could implement these requirements
<a href="#hiddenCSS">using the rules suggested in the Rendering section</a>.</p>

<p>When an element has the <code data-x="attr-hidden">hidden</code> attribute in the <dfn
data-x="attr-hidden-until-found-state">hidden until found state</dfn>, it indicates that the
element is hidden like the <span data-x="attr-hidden-hidden-state">hidden state</span> but the
<p>When an element has the <code data-x="attr-hidden">hidden</code> attribute in the <span
data-x="attr-hidden-until-found-state">hidden until found</span> state, it indicates that the
element is hidden like the <span data-x="attr-hidden-hidden-state">hidden</span> state but the
content inside the element will be accessible to <span>find-in-page</span> and <span
data-x="navigate-fragid">fragment navigation</span>. When these features attempt to scroll to a
target which is in the element's subtree, the user agent will remove the <code
Expand All @@ -77573,7 +77577,7 @@ END:VCARD</pre>

<p>Web browsers will use 'content-visibility: hidden' instead of 'display: none' when the <code
data-x="attr-hidden">hidden</code> attribute is in the <span
data-x="attr-hidden-until-found-state">hidden until found state</span>, as specified in the <a
data-x="attr-hidden-until-found-state">hidden until found</span> state, as specified in the <a
href="#hiddenCSS">Rendering section</a>.</p>


Expand All @@ -77583,25 +77587,25 @@ END:VCARD</pre>
effects of the <span data-x="attr-hidden-hidden-state">hidden</span> 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 <span
data-x="attr-hidden-until-found-state">hidden until found state</span> will have 'display: none'
data-x="attr-hidden-until-found-state">hidden until found</span> 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 <span
data-x="attr-hidden-until-found-state">hidden until found</span> elements.</p>

<p>Since elements with the <code data-x="attr-hidden">hidden</code> attribute in the <span
data-x="attr-hidden-until-found-state">hidden until found state</span> use 'content-visibility:
data-x="attr-hidden-until-found-state">hidden until found</span> state use 'content-visibility:
hidden' instead of 'display: none', there are two caveats of the <span
data-x="attr-hidden-until-found-state">hidden until found state</span> that make it different
from the <span data-x="attr-hidden-hidden-state">hidden state</span>:</p>
data-x="attr-hidden-until-found-state">hidden until found</span> state that make it different
from the <span data-x="attr-hidden-hidden-state">hidden</span> state:</p>

<ol>
<li><p>The element needs to be affected by <span>layout containment</span> in order to be
revealed by find-in-page. This means that if the element in the <span
data-x="attr-hidden-until-found-state">hidden until found state</span> has a 'display' value of
data-x="attr-hidden-until-found-state">hidden until found</span> state has a 'display' value of
'none', 'contents', or 'inline', then the element will not be revealed by find-in-page.</p></li>

<li><p>The element will still have a <span data-x="'visibility'">generated box</span> when in
the <span data-x="attr-hidden-until-found-state">hidden until found state</span>, which means
the <span data-x="attr-hidden-until-found-state">hidden until found</span> state, which means
that borders, margin, and padding will still be rendered around the element.</p></li>
</ol>
</div>
Expand Down Expand Up @@ -77684,8 +77688,8 @@ END:VCARD</pre>

<ol>
<li><p>If the <code data-x="attr-hidden">hidden</code> attribute is in the <span
data-x="attr-hidden-until-found-state">until-found</span> state, then return "<code
data-x="attr-hidden-until-found-keyword">until-found</code>".</p></li>
data-x="attr-hidden-until-found-state">hidden until found</span> state, then return "<code
keithamus marked this conversation as resolved.
Show resolved Hide resolved
data-x="attr-hidden-until-found">until-found</code>".</p></li>

<li><p>If the <code data-x="attr-hidden">hidden</code> attribute is set, then return
true.</p></li>
Expand All @@ -77697,9 +77701,9 @@ END:VCARD</pre>

<ol>
<li><p>If the given value is a string that is an <span>ASCII case-insensitive</span> match for
"<code data-x="attr-hidden-until-found-keyword">until-found</code>", then set the <code
"<code data-x="attr-hidden-until-found">until-found</code>", then set the <code
data-x="attr-hidden">hidden</code> attribute to "<code
data-x="attr-hidden-until-found-keyword">until-found</code>".</p></li>
data-x="attr-hidden-until-found">until-found</code>".</p></li>

<li><p>Otherwise, if the given value is false, then remove the <code
data-x="attr-hidden">hidden</code> attribute.</p></li>
Expand Down Expand Up @@ -81207,12 +81211,12 @@ body { display:none }
without modifying the <code data-x="attr-details-open">open</code> attribute, in order to make
find-in-page able to search through it. Similarly, all HTML elements with the <code
data-x="attr-hidden">hidden</code> attribute in the <span
data-x="attr-hidden-until-found-state">hidden until found state</span> should have their <span
data-x="attr-hidden-until-found-state">hidden until found</span> state should have their <span
data-x="skips its contents">skipped contents</span> become accessible without modifying the <code
data-x="attr-hidden">hidden</code> attribute in order to make find-in-page able to search through
them. After find-in-page finishes searching for matches, the <code>details</code> elements and the
elements with the <code data-x="attr-hidden">hidden</code> attribute in the <span
data-x="attr-hidden-until-found-state">hidden until found state</span> should have their contents
data-x="attr-hidden-until-found-state">hidden until found</span> 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). <ref>CSSCONTAIN</ref></p>

Expand Down Expand Up @@ -137772,7 +137776,7 @@ interface <dfn interface>External</dfn> {
<th> <code data-x="">hidden</code>
<td> <span data-x="attr-hidden">HTML elements</span>
<td> Whether the element is relevant
<td> "<code data-x="attr-hidden-until-found-keyword">until-found</code>";
<td> "<code data-x="attr-hidden-until-found">until-found</code>";
"<code data-x="attr-hidden">hidden</code>";
the empty string
<tr>
Expand Down