Layouts
Render (Content-Visibility)
Utilities for sets skip rendering if element is off-screen to improve overall page rendering speed.
Variant
Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited
API
| class | css |
|---|---|
| render-auto | 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.
<div class="render-auto-widest">
...
</div>
HTML
.dummy {
@extend
.render-auto-widest;
}
SCSS