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 |
