The “contain-intrinsic-size” feature in CSS is a relatively new addition to the web developer’s toolkit, introduced to the broader web platform in 2020. This feature arose alongside the rise of more complex layout needs with increased focus on performance and optimization, especially in modern responsive design setups.

The “contain-intrinsic-size” property is primarily used in conjunction with “contain: size” to provide a performance optimization layer when dealing with container queries or dynamic content loading. Without any intrinsic size declaration, elements using “contain: size” might initially render with zero dimensions until their content is fully loaded, which can cause frustrating reflows. This is where “contain-intrinsic-size” proves advantageous—by providing a fallback width and height, it ensures that a predictable layout is maintained even if the contained content is not fully available yet.

Here is a basic example of how “contain-intrinsic-size” might be implemented:

.box {
  contain: size;
  contain-intrinsic-size: 200px 150px; /* width and height */
  background-color: lightgrey;
}

.content {
  width: 100%;
  height: 100%;
}

In this CSS snippet, the .box class includes “contain: size” to isolate its dimensions from affecting or being affected by other elements. The “contain-intrinsic-size: 200px 150px” provides a default width and height of 200 pixels by 150 pixels, allowing the initial space to be allocated in the layout even before the content within .content is fully rendered or available.

Today, “contain-intrinsic-size” is highly useful in developing responsive and modern web user interfaces. It is especially beneficial for components with dynamic content that can be loaded on demand, such as images, videos, or third-party data fetched asynchronously. By providing a form of predictive layout allocation, it substantially reduces the dreaded Content Layout Shift (CLS) metric within Google’s Core Web Vitals, leading to a more stable and visually consistent interface while improving performance and user experience.

However, while “contain-intrinsic-size” significantly enhances interactivity and performance in many use cases, developers must be aware of its current state of browser support. As of now, it features solid support in most modern browsers like Chrome, Edge, and Safari; however, cross-browser testing is advisable as some versions of browsers like Firefox have historically had partial support for intrinsic size operations.

Overall, “contain-intrinsic-size” is a vital part of a developer’s toolkit, facilitating smoother builds for responsive interfaces without undesirable layout flashes, especially in resource-heavy or content-dynamic environments. As it becomes more universally supported, its impact on performance metrics will become even more significant.

Updated: