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

Note: Your browser does not currently support the utilities.

Set maximum height and width for the browser to start to render an element.

<y class="render-auto-widest">
  ...
</y>

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.