monks/content_visibility
The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. It enables the user agent to skip an element’s rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.
The {{domxref(“element/contentvisibilityautostatechange_event”, “contentvisibilityautostatechange”)}} event fires on any element with
content-visibility: autoset on it when its rendering work starts or stops being skipped. This provides a convenient way for an app’s code to start or stop rendering processes (e.g., drawing on a {{htmlelement(“canvas”)}}) when they are not needed, thereby conserving processing power.
Values
pub const auto_: #(String, String)- : The element turns on layout containment, style containment, and paint containment. If the element is not relevant to the user, it also skips its contents. Unlike hidden, the skipped contents must still be available as normal to user-agent features such as find-in-page, tab order navigation, etc., and must be focusable and selectable as normal.
pub const hidden: #(String, String)- : The element skips its contents. The skipped contents must not be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable. This is similar to giving the contents
display: none.
pub fn raw(value: String) -> #(String, String)Enter a raw string value for content-visibility
pub const revert_layer: #(String, String)pub fn var(variable: String) -> #(String, String)Enter a variable name to be used for content-visibility.
It will be wrapped in var() and have -- prepended.