Layouts
Render (Content-Visibility)
Utilities for sets skip rendering if element is off-screen to improve overall page rendering speed.
Variant
Responsive Dark Mode Light Mode Reduce-Motion Selection-Hover Expand First-Last-Selection Child-Selection Portrait Landscape Fullscreen Hover Group-Hover Focus Group-Focus Focus-Visible Focus-Within Active Visited Checked Disabled
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