Comments (6)
Doesn't that cause the layout objects to be destroyed?
from inert.
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.
from inert.
Ok, what does this mean for inert
?
from inert.
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.
from inert.
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?
from inert.
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>
from inert.
Related Issues (20)
- Question: HTMLElement or Element HOT 1
- Injecting inline style violates strict style csp HOT 2
- Unknown Syntax error in IE HOT 4
- Is inert string or boolean? HOT 4
- module should not use src/index.js
- Transpile the module export HOT 1
- Specify exact browser support in MDN browser compat data
- How can I check if the polyfill is already loaded? HOT 3
- When inert library is imported more than once in a project, creates error HOT 2
- “So every modal dialog must be outside the inert container?” HOT 1
- License for NPM wicg/inert HOT 5
- should the _focusableElementsString include tabindex? HOT 3
- Video elements being focused HOT 1
- `Element is not defined` in deno
- Styles are too easily overridden
- Polyfill being applied in Chrome 102 HOT 3
- Tests should not run against browsers that have implemented inert
- Add new gh webhook?
- Status of incubation HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from inert.