Layouts
Render v1.0.9
Utilities for sets skip rendering if element is off-screen to improve overall page rendering speed.
Class
class | css |
---|---|
render-auto v1.1.0 | content-visibility: auto |
render-auto-widest | content-visibility: auto; contain-intrinsic-size: 1000px |
render-auto-wide | content-visibility: auto; contain-intrinsic-size: 800px |
render-auto-normal | content-visibility: auto; contain-intrinsic-size: 600px |
render-auto-tight | content-visibility: auto; contain-intrinsic-size: 400px |
render-auto-tigher | content-visibility: auto; contain-intrinsic-size: 200px |
render-hidden-widest | content-visibility: hidden; contain-intrinsic-size: 1000px |
render-hidden-wide | content-visibility: hidden; contain-intrinsic-size: 800px |
render-hidden-normal | content-visibility: hidden; contain-intrinsic-size: 600px |
render-hidden-tight | content-visibility: hidden; contain-intrinsic-size: 400px |
render-hidden-tigher | content-visibility: hidden; contain-intrinsic-size: 200px |
Usage
Set maximum height and width for the browser to start to render an element.
<y class="render-auto-widest">
...
</y>
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |