Connect HTML spec up to new CSS interactivity property
#10956
Conversation
I was a bit unsure about a few parts of this PR, so help would be
appreciated from the editors. The idea is:
1. Remove duplication - allow the CSS spec to define the *concept*
of "inert".
2. Make the `inert` HTML attribute set `interactivity:inert` via
a new UA stylesheet rule.
3. Make modal dialogs non-inert via an `interactivity:auto` UA
stylesheet rule.
{eventual step 4} A rule likely needs to be added for fullscreen
elements also, setting `interactivity:auto`.
|
I think |
I added a |
Another issue is that no one's been able to come up with UA styles that actually works with shadow DOM. |
| @@ -79283,56 +79287,87 @@ interface <dfn interface>VisibilityStateEntry</dfn> : <span>PerformanceEntry</sp | |||
| <p class="note">See also <code data-x="attr-inert">inert</code> for an explanation of the | |||
| attribute of the same name.</p> | |||
|
|
|||
| <p>A node (in particular elements and text nodes) can be <dfn>inert</dfn>. When a node is | |||
| <span>inert</span>:</p> | |||
| <p>A node (in particular elements and text nodes) can be <dfn>inert</dfn>.</p> | |||
There was a problem hiding this comment.
It feels like there are now three concepts:
- A node is "marked as inert": done by specific APIs like dialog modal blocking
- A node "is inert": true if either interactivity or "marked as inert"
- An element or text node "behaves inertly": defined by CSS
- But in a somewhat confusing way, since find-in-page and editability are defined by HTML, and some aspects of text selection (like the JS methods that cause it) are as well?
- But I guess this was a preexisting problem; the paragraph you're deleting was already an action-at-a-distance part of the spec
I'm unsure whether it's worth separating these three concepts explicitly, but I wanted to call this out as potentially tricky.
I'm particularly confused what it means for non-element/text nodes to be inert now.
There was a problem hiding this comment.
Thanks for raising this. I did have some trouble with this PR trying to decide what all of this should be called, or where it should live.
One nit: a node that "is inert" always "behaves inertly" so that's kind of one concept, right?
Anyway, happy to modify this however you see fit. Pointers appreciated. In particular the find-in-page, text selection, etc. are all (now) defined in CSS, so I at least wanted to have just one place where that's done.
There was a problem hiding this comment.
One nit: a node that "is inert" always "behaves inertly" so that's kind of one concept, right?
Right, except that "behaves inertly" only applies to text and element nodes, and the definition lives in a different document from "is inert".
My suggestion, although I don't feel too strongly:
- Have only one definition of "inert", the one in CSS. I guess it only applies to elements and text nodes.
- Define "marked as inert" or maybe "marked as explicitly inert" in HTML, as a boolean which all nodes have. Update that boolean when blocked by a modal dialog.
- Have a sentence like "An element or text node must be considered [inert] if it is marked as inert or...".
- This links to the CSS definition instead of having its own.
- This mechanism of having CSS define the concept and HTML say when it applies is similar to what we do for https://html.spec.whatwg.org/#pseudo-classes
There was a problem hiding this comment.
So initially I liked the "marked as explicitly inert" suggestion, but I got a bit stuck. A few things:
- The current definition of "blocked by a modal dialog" is a bit weird, because the definition describes when it is so blocked (when there's a dialog element in the top layer), but then "show a modal dialog" step 15 says to essentially "set it to blocked" explicitly. I think maybe that last thing is unnecessary.
- The existing definition of "blocked by a modal dialog" handles a few concepts easily:
a. the fact that being blocked gets inherited through the entire tree
b. the fact that it stops at the topmost dialog
If I add a "marked as explicitly inert" on Node, then I also need to handle both 2a and 2b above. Perhaps that could just be done in words? E.g. an element is inert if ... one of its flat tree ancestors is "marked as explicitly inert", and the topmost dialog element isn't a flat tree ancestor? I don't know if that ends up making it more or less clean. I got started on this path, and stopped before I completely finished. Hopefully you can take a look and see if I'm on the right track?
There was a problem hiding this comment.
Hmm yeah, I see what you mean. It doesn't seem worth it to transform this into an explicit boolean on every node, as maintaining it would be a lot of work.
A middle path that stays close to the current spec while also clarifying the interaction between CSS and blocked-by-a-modal would be something like:
-
Modify the current "blocked by a modal dialog" to something like:
A Document document is blocked by a modal dialog subject if subject is the topmost dialog element in document's top layer. While document is so blocked, every
nodeelement or text node that is connected to document, with the exception of the subject element and its flat tree descendants,must become inertis considered inert via dialog blockage.(or maybe "explicitly inert" or something like that.)
-
Remove the explicit "Let subject's node document be blocked by the modal dialog subject." As you say, that seems redundant and broken. Probably we forgot to remove it when we improved top layer + dialog interactions in the past.
We can relocate the note about "This will cause the..." to the next step about top layer.
-
Now we can go with something like my suggestion above, of having "An element or text node must be considered [inert] if it is [inert via dialog blockage] or (the CSS stuff)".
But I kind of like the direction you're currently going as well, as it's quite explicit.
I wonder if there's any inspiration we can take from implementations here? How is it implemented in Chromium? (And in particular, how is the interaction between the CSS interactivity and the blocked-by-a-modal-dialog interactivity handled.)
The reason I ask about how the implementation works is that I'm worried about leading us toward a spec that seems explicit and rigorous, but isn't actually easy to implement / close to existing implementations.
| @@ -79283,56 +79287,87 @@ interface <dfn interface>VisibilityStateEntry</dfn> : <span>PerformanceEntry</sp | |||
| <p class="note">See also <code data-x="attr-inert">inert</code> for an explanation of the | |||
| attribute of the same name.</p> | |||
|
|
|||
| <p>A node (in particular elements and text nodes) can be <dfn>inert</dfn>. When a node is | |||
| <span>inert</span>:</p> | |||
| <p>A node (in particular elements and text nodes) can be <dfn>inert</dfn>.</p> | |||
There was a problem hiding this comment.
Thanks for raising this. I did have some trouble with this PR trying to decide what all of this should be called, or where it should live.
One nit: a node that "is inert" always "behaves inertly" so that's kind of one concept, right?
Anyway, happy to modify this however you see fit. Pointers appreciated. In particular the find-in-page, text selection, etc. are all (now) defined in CSS, so I at least wanted to have just one place where that's done.
| @@ -79283,56 +79287,87 @@ interface <dfn interface>VisibilityStateEntry</dfn> : <span>PerformanceEntry</sp | |||
| <p class="note">See also <code data-x="attr-inert">inert</code> for an explanation of the | |||
| attribute of the same name.</p> | |||
|
|
|||
| <p>A node (in particular elements and text nodes) can be <dfn>inert</dfn>. When a node is | |||
| <span>inert</span>:</p> | |||
| <p>A node (in particular elements and text nodes) can be <dfn>inert</dfn>.</p> | |||
There was a problem hiding this comment.
One nit: a node that "is inert" always "behaves inertly" so that's kind of one concept, right?
Right, except that "behaves inertly" only applies to text and element nodes, and the definition lives in a different document from "is inert".
My suggestion, although I don't feel too strongly:
- Have only one definition of "inert", the one in CSS. I guess it only applies to elements and text nodes.
- Define "marked as inert" or maybe "marked as explicitly inert" in HTML, as a boolean which all nodes have. Update that boolean when blocked by a modal dialog.
- Have a sentence like "An element or text node must be considered [inert] if it is marked as inert or...".
- This links to the CSS definition instead of having its own.
- This mechanism of having CSS define the concept and HTML say when it applies is similar to what we do for https://html.spec.whatwg.org/#pseudo-classes
I was a bit unsure about a few parts of this PR, so help would be appreciated from the editors. The idea is:
inertHTML attribute setinteractivity:inertvia a new UA stylesheet rule.interactivity:autoUA stylesheet rule.:fullscreen {interactivity: auto}.Side-note: at this time the CSS spec isn't being published. Bot problems. But this CSS spec PR landed and should eventually contain the references added in this PR.
(See WHATWG Working Mode: Changes for more details.)
/indices.html ( diff )
/infrastructure.html ( diff )
/interaction.html ( diff )
/interactive-elements.html ( diff )
/introduction.html ( diff )
/rendering.html ( diff )