search

WICG / inert

Polyfill for the inert attribute and property.
Other
924 stars 81 forks source link

Relation to content-visibility: hidden #166

Open chrishtr opened 3 years ago

chrishtr commented 3 years ago

One of the use cases listed in the explainer is Temporarily offscreen/hidden content. Is this use case already handled by content-visibility: hidden? content-visibility: hidden disables hit testing, focus, tab order, etc and also likely has better performance than any existing mechanism, or the proposed inert attribute.

alice commented 3 years ago

Doesn't that cause the layout objects to be destroyed?

chrishtr commented 3 years ago

No. content-visibility: hidden preserves the layout objects (or more precisely, defines the elements to still have layout boxes. It's technically up to the UA whether to cache the layout objects). In this respect it's like visibility: hidden.

For this reason, content-visibility: hidden is my recommended best practice for hiding DOM that is not part of the current view but might be in the future, for use cases such as caching SPA navigation routes and temporarily hidden drawer widgets. I also recommend it for layout measurement of offscreen content.

alice commented 3 years ago

Ok, what does this mean for inert?

chrishtr commented 3 years ago

I think the other use case - On-screen but non-interactive content is still unmet, and would be a use case of the inert keyword.

bkardell commented 3 years ago

For this reason, content-visibility: hidden is my recommended best practice for hiding DOM that is not part of the current view but might be in the future, for use cases such as caching SPA navigation routes and temporarily hidden drawer widgets

I'm having trouble imagining solving some of the desires in the explainer like this, but that's probably just failure of imagination on my part since you specifically even mention drawers here... Any chance you could share implementations of some of these so that we could look/compare?

chrishtr commented 3 years ago

Any chance you could share implementations of some of these so that we could look/compare?

I don't have a specific implementation fo a drawer using content-visibility:hidden on hand to point to. But the implementation would be something like:

drawer[closed] {
  width: 0;
  height: 0;
  content-visibility: hidden;
}
<drawer closed>
 contents
</drawer>