CSS content-visibility Boost Performance with Visibility Control

Introduction

The content-visibility CSS property is a powerful tool that lets you control whether an element’s content is rendered or not. It enforces strong containment rules, allowing browsers to skip rendering parts of the page until they are needed. This greatly improves initial page load times and overall performance.

Baseline 2024

As of September 2024, the content-visibility CSS property has become available across the latest devices and browser versions. While this feature is a significant improvement for modern web development, it may not work on older devices or browsers.

For detailed information on browser support, refer to the full compatibility table. If you have any feedback or issues regarding this feature, you can report it here.

Description

The content-visibility CSS property is a game-changer in web development and design. It allows you to control whether an element’s content is rendered or not, applying strong containment rules. This feature helps browsers skip rendering non-essential elements, significantly boosting initial page load speed and overall performance.

Values

The content-visibility property accepts several values that determine how an element’s content is rendered.

visible

• Effect: No change. The element’s content is laid out and rendered as normal.
• Usage: This is the default value and is typically used when you want an element to be rendered as usual.

hidden

• Effect: The element skips rendering its content. The skipped content is not accessible to user-agent features such as find-in-page or tab-order navigation. They are also not selectable or focusable.
• Usage: This value is similar to giving the content display: none. It is useful when you want to completely hide an element and its content.

auto

• Effect: The element turns on layout containment, style containment, and paint containment. If the element is not relevant to the user, it also skips rendering its content. Unlike hidden, the skipped content remains accessible to user-agent features and is still focusable and selectable.
• Usage: This value is ideal for elements that are not immediately needed but should still be accessible. It helps in improving performance without compromising accessibility.

Global Values

• inherit: The element inherits the content-visibility value from its parent.
• initial: The element uses the initial value for content-visibility, which is visible.
• revert: The element uses the value set by the user agent’s default stylesheet.
• revert-layer: The element uses the value set by the user agent’s default stylesheet, considering the cascade layers.
• unset: The element uses the inherited value if it inherits content-visibility, otherwise it uses the initial value.

visible

The visible value for the content-visibility property means that the element’s content is laid out and rendered as normal. This is the default behavior of elements without any content-visibility property applied.

hidden

The hidden value for the content-visibility property is used to completely skip the rendering of an element’s content. This means that the element’s content is not laid out, painted, or rendered, which can significantly improve performance by reducing the browser’s workload.

auto

The auto value for the content-visibility property is a powerful way to improve the rendering performance of web pages by skipping the rendering of elements that are not currently relevant to the user. This value activates layout containment, style containment, and paint containment, allowing the browser to defer the rendering of these elements until they are needed.

Animating and Transitioning content-visibility

The content-visibility property can also be animated and transitioned, allowing you to create smooth entry and exit animations for elements. Browsers that support this feature use a variation of the discrete animation type, which means the property will flip between two values either at the start or end of the animation duration.

Example Usage

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .content1 {
      content-visibility: visible;
      border: 2px solid black;
    }
    .content2 {
      content-visibility: hidden;
      border: 2px solid black;
    }
    .content3 {
      content-visibility: auto;
      border: 2px solid black;
    }
    .content3 {
      content-visibility: auto;
      border: 2px solid black;
      transition: content-visibility 1s;
      transition-behavior: allow-discrete;
    }
    .content {
      content-visibility: hidden;
      transition-behavior: allow-discrete;
      transition: content-visibility 0.5s ease-in-out;
      border: 2px solid black;
    }
    .hidden > p {
      content-visibility: hidden;
    }
    .visible > p {
      content-visibility: visible;
    }
  </style>
</head>
<body>
  <h1 style="color: green;">Website</h1>
  <h2>CSS content-visibility Property</h2>
  <p class="content1">Content 1</p>
  <p class="content2">Content 2</p>
  <p class="content3">Content 3</p>
  <div class="content">This content will be animated.</div>
  <button onclick="toggleVisibility()">Toggle Visibility</button>
  <div class="hidden">
    <button class="toggle">Show</button>
    <p>This content is initially hidden and can be shown by clicking the button.</p>
  </div>
  <div class="visible">
    <button class="toggle">Hide</button>
    <p>This content is initially visible and can be hidden by clicking the button.</p>
  </div>
  <p>
    Click anywhere on the screen or press any key to toggle the
    <code>&lt;div&gt;</code> content between hidden and showing.
  </p>
  <div>
    This is a <code>&lt;div&gt;</code> element that animates between
    <code>content-visibility: hidden;</code> and
    <code>content-visibility: visible;</code>. We've also animated the text color
    to create a smooth animation effect.
  </div>

  <script>
    function toggleVisibility() {
      const content = document.querySelector('.content');
      if (content.style.contentVisibility === 'visible') {
        content.style.contentVisibility = 'hidden';
      } else {
        content.style.contentVisibility = 'visible';
      }
    }
    const handleClick = (event) => {
      const button = event.target;
      const div = button.parentElement;
      button.textContent = div.classList.contains("visible") ? "Show" : "Hide";
      div.classList.toggle("hidden");
      div.classList.toggle("visible");
    };
    document.querySelectorAll("button.toggle").forEach((button) => {
      button.addEventListener("click", handleClick);
    });
    const divElem = document.querySelector("div");
    const htmlElem = document.querySelector(":root");
    htmlElem.addEventListener("click", showHide);
    document.addEventListener("keydown", showHide);
    function showHide() {
      if (divElem.classList[0] === "show") {
        divElem.classList.remove("show");
        divElem.classList.add("hide");
      } else {
        divElem.classList.remove("hide");
        divElem.classList.add("show");
      }
    }
  </script>
</body>
</html>

Formal Definition

The content-visibility CSS property controls whether an element’s contents are rendered or not. This can improve initial page load speed and overall performance.

Initial Value

• The initial value for content-visibility is visible.

Applies To

• This property applies to elements where size containment can be applied.

Inherited

• No, the content-visibility property is not inherited.

Computed Value

• The computed value is as specified.

Animation Type

• The animation type for content-visibility is discrete behavior.

Formal Syntax

content-visibility = visible | auto | hidden

Accessibility

The content-visibility property can enhance performance without compromising accessibility.

Off-screen Content

• content-visibility: auto: Off-screen content remains accessible to screen readers and other assistive technologies.

Hidden Content

• content-visibility: hidden: Elements are not rendered and are removed from the accessibility tree, making them inaccessible to assistive technologies.

Ensuring Accessibility

To ensure that hidden content remains accessible, use the aria-hidden="true" attribute.

Specifications

The content-visibility property is defined in the CSS Containment Module Level 2.

CSS Containment Module Level 2

• Specification: CSS Containment Module Level 2

Browser Compatibility

The content-visibility property is supported in the latest versions of popular browsers.

Supported Browsers

• Google Chrome: Version 85 and above
• Mozilla Firefox: Version 79 and above
• Microsoft Edge: Version 85 and above
• Safari: Version 14 and above

Compatibility Table

For detailed information on browser compatibility, refer to the Browser Compatibility Table.

See Also

• CSS Containment: CSS Containment
• contain-intrinsic-size: contain-intrinsic-size
• contentvisibilityautostatechange: contentvisibilityautostatechange
• Content-visibility: The New CSS Property That Boosts Your Rendering Performance: Content-visibility: The New CSS Property That Boosts Your Rendering Performance