-
Notifications
You must be signed in to change notification settings - Fork 2.7k
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.
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
Add hidden=until-found HTML attribute and beforematch event #7475
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This isn't the right structure. It's not a new attribute; it's a new value for an existing attribute.
So, you need to modify the https://html.spec.whatwg.org/#the-hidden-attribute section.
Importantly, you need to modify the definition of the attribute from being a boolean attribute to an enumerated attribute, as discussed in #6040.
Also, please make sure the spec builds correctly before sending the PR for review.
Ok, I tried putting it within the attr-hidden section.
I removed the sentence that says its a boolean attribute, and I didn't notice any other text that seemed contradictory to having 3 states. How does it look?
My bad, I was having trouble with the definitions. It now builds locally on my machine, but on github it's saying that I'm doing something wrong with nested |
Because "hidden" attribute at present is boolean attribute, "hidden" attribute can have a value of empty or "hidden". |
Yes, this is no longer a boolean attribute. It will become an enumerated attribute with three states, per #6040 (comment). ("hidden" is not a valid value, though the empty string is.) |
source
Outdated
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. <span w-nodev>User agents should not render | ||
elements that have the <code data-x="attr-hidden">hidden</code> attribute specified. This | ||
requirement may be implemented indirectly through the style layer. For example, an HTML+CSS user | ||
agent could implement these requirements <a href="#hiddenCSS">using the rules suggested in the | ||
Rendering section</a>.</span></p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You need to specify that the element is an enumerated attribute, per the comment in #6040 (comment). See other examples of enumerated attribute, and how they specify keywords and states, by searching for "enumerated attribute" in https://html.spec.whatwg.org/ .
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This doesn't seem like an enumerated attribute because instead of having a bunch of different relevant string values, it has these relevant states:
- the attribute is not set
- the attribute is set to "until-found"
- the attribute is set to anything else
Should I still say that it's an enumerated attribute anyway?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Enumerated attributes are exactly attributes with multiple states. "not set" = missing valid default state. anything else = invalid value default state.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see, thanks!
I made it an enumerated attribute with a table like the other enumerated attributes.
How does it look?
source
Outdated
noframes, param, rp, script, style, template, title { | ||
display: none; | ||
} | ||
|
||
<span id="hiddenCSS" data-x="">[hidden]:not([hidden=until-found])</span> { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like this will change the specificity of the selector. I wonder if that will have bad consequences for pages that use selectors like [hidden] { ... }
or el[hidden] { ... }
in their stylesheets?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In chromium, this is implemented as a presentational style, which means it doesn't have a CSS selector and is no problem in chromium. I believe that presentational styles have ultra low specificity/precedence. I'm not sure how hidden is implemented in other browsers.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, hmm. Is that true for [hidden]
as well? I.e. Chrome doesn't respect the current spec which uses the user-agent stylesheet, instead it uses a presentational style? Looking at html.css
I see that might be the case.
Maybe we should try to straighten that out before building a new feature on top of it... Is there a way to distinguish presentational style vs. UA stylesheet for the selector [hidden]
? I'm not sure I understand the differences enough to write a test... Is the answer any different for [hidden]:not([hidden=until-found])
?
Looking at https://drafts.csswg.org/css-cascade-4/#cascade-origin I can't really tell in which situations it would matter whether something is a presentational hint vs. in the UA stylesheet... Maybe @zcorpan or @tabatkins could help out here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rune implied in this comment that we can't put attribute selectors in html.css due to performance concerns. What I'm calling a "presentational style" based on the code is actually called an "Attribute style" in DevTools when you look at a hidden
element.
I guess there isn't a perfect way to represent this in html.css, but I think this is the closest we can get. Isn't this CSS just a suggestion anyway? The current spec text says that "This requirement may be implemented indirectly through the style layer"...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Well, the distinction is potentially important. If there are testable differences between using presentational hints (spec concept)/presentation styles (Chromium concept) vs. the user agent stylesheet (spec concept)/html.css (Chromium concept), then that could lead to interop issues, where other browsers implement the spec, but Chromium does not, and then developers get different results in different browsers.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Firefox also implements hidden
as a presentational attribute in Firefox, see: https://searchfox.org/mozilla-central/rev/b0c5c3b9821c2f22193fd6e1e9f66032639da1a1/layout/style/res/html.css#711-712
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@josepharhar it does exist in the spec, click the definition of "presentational hint" to see all uses of it:
https://html.spec.whatwg.org/multipage/rendering.html#presentational-hints
Changing hidden
to a preshint in the spec can be changed separately. Whether that is with a selector or with prose is entirely editorial.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, awesome! I think we should definitely change hidden
to a presentational hint in a separate PR.
After looking at the text right above the hidden CSS, it says "Some rules are intended for the author-level zero-specificity presentational hints part of the CSS cascade; these are explicitly called out as presentational hints."
Does this mean that we can just add a sentence above the hidden CSS that says the hidden CSS is a presentational hint?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes. See examples linked in #7475 (comment)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Filed #7650
That would make currently conforming documents using edit: from the spec
https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes |
source
Outdated
[hidden=until-found] { | ||
content-visibility: hidden; | ||
} | ||
|
||
embed[hidden] { display: inline; height: 0; width: 0; } <!-- because for legacy reasons it still needs to instantiate the plugin --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does this need changes for until-found
?
Also see the Tables section in the rendering section for more special styling for hidden
(uses visibility: collapse;
instead of display: none
)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Interesting, it looks like chromium's implementation doesn't do display:inline
but does to height:0; width:0
: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/html_embed_element.cc;l=81-90;drc=efb59b0cefb13faf55cce3066809f11f99ab9ab8
The only reason I'd want to change this embed[hidden]
rule is because display:inline
doesn't work well with content-visibility:hidden
, but I really don't think anyone is going to be using hidden=until-found
directly on an embed element anyway. I'm ok keeping this as is.
Looking at the tables section, it's similar: the hidden attribute there sets display
to things other than none
, which is also the goal of the fancy selector I have here. I'm ok leaving it as is.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should <embed hidden="until-found">
be disallowed (for web content)? Or would display: inline-block
work better?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok, I added a :not(hidden=until-found)
to embed here.
Tables still looks ok to me
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see now that I should have done :not(embed)
on [hidden=until-found]
instead: #7475 (comment)
My goal is to keep all of the same behavior with regards to the hidden attribute and |
Then the value "hidden" should be a valid keyword, in addition to the empty string, both mapping to the hidden state. (See https://html.spec.whatwg.org/multipage/interaction.html#attr-autocapitalize for an example of an enumerated attribute with multiple values mapping to the same state.) Maybe the prose could be something like this:
|
Thanks, missed that it was already nullable. And including a numeric type is (almost) like adjusting the order of steps 14 and 17 of union conversion - makes sense. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM with nits. Will merge tomorrow-ish unless @zcorpan spots something about the embed case which I misunderstood.
@@ -10405,7 +10407,7 @@ interface <dfn interface>HTMLElement</dfn> : <span>Element</span> { | |||
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-dir">dir</span>; | |||
|
|||
// <span>user interaction</span> | |||
[<span>CEReactions</span>] attribute boolean <span data-x="dom-hidden">hidden</span>; | |||
[<span>CEReactions</span>] attribute (boolean or unrestricted double or DOMString?) <span data-x="dom-hidden">hidden</span>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I guess this would be slightly cleaner as (boolean or unrestricted double or DOMString)?
, i.e. move the ?
outside. It shouldn't have any normative impact.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tried making this change to the IDL in chromium, but it actually ended up removing the null/undefined type from the type union... do you think the IDL really should be the same either way? Is there something wrong in chrome's IDL implementation?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I guess that is a bug in Chromium! Nullable unions are definitely supported in IDL... we should change the spec, IMO, and file a low-priority Chromium bug. In the meantime we can keep using the DOMString?
version in the implementation since it won't be observably different.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
crbug filed: https://bugs.chromium.org/p/chromium/issues/detail?id=1307051
And I just pushed a commit to this PR which moves the question mark outside the parenthesis
content-visibility: hidden; | ||
} | ||
|
||
embed[hidden]:not([hidden=until-found i]) { display: inline; height: 0; width: 0; } <!-- because for legacy reasons it still needs to instantiate the plugin --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good! We should be sure this is tested. I'd also appreciate if @zcorpan had time to weigh in since I believe he was discussing hidden embeds earlier in the PR, but we don't need to block on that if he's busy.
We should be sure there are tests for the UA stylesheet. web-platform-tests/wpt#5625 discusses the general issue but we could instead do targeted tests. Basically:
|
I started a test here: https://chromium-review.googlesource.com/c/chromium/src/+/3529819 Unfortunately, I think I found some issues with hidden attributes on embeds and tables. For embeds, it looks like the For tables, I tried the first element in the user agent stylesheet from the spec, the colgroup element. I found that instead of applying |
|
Are you aware that normalize.css has declarations for [hidden] already: I have seen similar declarations in many projects and I wonder if this will not result in an unconscious opt-out? |
Yes, that will result in an opt-out. Auto-expanding details has a similar issue where sites make |
Maybe you can identify the most common sources (like normalize.css) and file issues suggesting to replace with
This would not hide elements with |
whatwg/html#7475 (comment) Bug: 1307051 Change-Id: I458f0c74ac24a663a6504746e7bac15218a9a8ac Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3529820 Auto-Submit: Joey Arhar <jarhar@chromium.org> Reviewed-by: Domenic Denicola <domenic@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#982876}
Most event handlers like this should be in GlobalEventHandlers: whatwg/html#7475 (comment) R=vmpstr@chromium.org Bug: 1055002 Change-Id: I30fbf99b17db3703d8fb133bb3c581de2fa02141 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3530434 Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#983452}
Wouldn't this be better? [hidden]:not([hidden=until-found]) {
display:none;
} Then again, I just realized that now that we made "until-found" case insensitive, this selector wouldn't catch hidden=UNTIL-FOUND... is there a selector I can make that would capture all cases? Should we change this feature to be only lowercase "until-found" to address this? |
Could "hidden" be safely added to the list of HTML attributes whose values CSS selectors must match case-insensitively? It seems like this list is meant for stuff like this, though I’m only inferring that and don’t know that for sure. (It’s possible that web content could exist that’s relying on its sensitivity today, but this seems pretty unlikely given it was boolean before + the same could be said about other aspects of this change anyway.) |
We're already using |
No, that list is not intended to have full coverage of attributes that are case-insensitive in HTML, it's intended to be web compatible. So new case-insensitive attributes should not be added. Also, |
If we were to ever extend the As for case-insensitive value, the |
I didn't know about this, thanks!
I see... it doesn't seem like there is a perfect option to update normalize.css with.
Thanks for the info! It sounds like this PR doesn't need any updates. @domenic can we merge this? |
We're waiting on tests for the UA stylesheet, per #7475 (comment), before we can merge. |
Tests for the UA stylesheet have been merged here: web-platform-tests/wpt#33221 |
Awesome! I've merged the spec. Please file Gecko and WebKit bugs, and edit the original post with links to them. |
Yeah. I think my proposal in #7475 (comment) strikes the right balance, as almost all cases will either use minimized syntax ( |
Done: |
This error seems to have been introduced in f5def65, whatwg#7475 — so it’s unclear why CI didn’t catch it there.
This error seems to have been introduced in f5def65, whatwg#7475 — so it’s unclear why CI didn’t catch it there.
This error seems to have been introduced in f5def65, whatwg#7475 — so it’s unclear why CI didn’t catch it there.
whatwg/html#7475 (comment) Bug: 1307051 Change-Id: I458f0c74ac24a663a6504746e7bac15218a9a8ac Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3529820 Auto-Submit: Joey Arhar <jarhar@chromium.org> Reviewed-by: Domenic Denicola <domenic@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#982876} NOKEYCHECK=True GitOrigin-RevId: b7c96593694b8bef1d1da3bed54d377b60a47a53
Most event handlers like this should be in GlobalEventHandlers: whatwg/html#7475 (comment) R=vmpstr@chromium.org Bug: 1055002 Change-Id: I30fbf99b17db3703d8fb133bb3c581de2fa02141 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3530434 Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#983452} NOKEYCHECK=True GitOrigin-RevId: 695d94e6e2196d7fa86678a9a388fd679ef30fd4
This addresses #6040
This is very similar to auto-expanding details elements: #6466
However, this is a more generic version to provide the same functionality without the use of details elements.
Explainer here: https://github.com/WICG/display-locking/blob/main/explainers/hidden-content-explainer.md
/browsing-the-web.html ( diff )
/dom.html ( diff )
/index.html ( diff )
/indices.html ( diff )
/infrastructure.html ( diff )
/interaction.html ( diff )
/rendering.html ( diff )
/webappapis.html ( diff )