A New Container Query Polyfill That Just Works

A game-changing Container Query polyfill has arrived, offering seamless compatibility across browsers. This polyfill, developed by Chrome, ensures a straightforward implementation: conditionally load it for browsers lacking native support, write your CSS using standard Container Queries syntax, and enjoy flawless functionality.

This user-friendly polyfill simplifies development significantly, contrasting with earlier solutions like cqfill which required additional CSS and PostCSS processing.

Here's how to load the polyfill for lightweight integration:

// Support Test
const supportsContainerQueries = "container" in document.documentElement.style;

// Conditional Import
if (!supportsContainerQueries) {
  import("https://cdn.skypack.dev/container-query-polyfill");
}

NPM is another option, but this method keeps things streamlined.

Using Container Queries requires a wrapper element around the styled content. You cannot directly query the element you're styling. For example, consider a weather widget:

<div class="weather-wrap">
  <dl>
    <div>
      <dt>Sunday</dt>
      <dd>
<b>26°</b> 7°</dd>
    </div>
    <div>
      <dt>Monday</dt>
      <dd>
<b>34°</b> 11°</dd>
    </div>
  </dl>
</div>

The wrapper is defined as a container:

.weather-wrap {
  container: inline-size / weather-wrapper;
  /* or: */
  /* container-type: inline-size; */
  /* container-name: weather-wrapper; */

  /* Optional: resize handle for testing */
  /* resize: both; */
  /* overflow: hidden; */
}

Global and container-scoped styles are then applied:

.weather {
  display: flex;
}
@container weather-wrapper size(max-width: 700px) {
  .weather {
    flex-direction: column;
  }
}

A more comprehensive demo showcasing the polyfill with a weather widget is available (link to demo omitted as it's not provided in the input). Bramus' blog also features a useful card example.

Browser Support and Considerations:

The polyfill supports Chrome/Edge 88 , Firefox 78 , and Safari 14 due to its reliance on ResizeObserver, MutationObserver, and :is(). While the polyfill documentation details minor limitations, core use cases are fully covered.

With official spec draft status and behind-flag support in Chrome, widespread browser support is anticipated. However, the exact timeline remains uncertain.

The polyfill's small size (approximately 2.8kb) makes it a negligible performance overhead, potentially driving increased Container Query adoption.

Flash of Unstyled Content (FOUC):

The asynchronous nature of the polyfill introduces a potential FOUC. While mitigating this requires delaying rendering (generally undesirable), the brief FOUC is preferable to content delays. The issue will resolve itself once native browser support becomes ubiquitous.

Embrace the power of Container Queries today with this robust polyfill! Share your own demos and experiences.

The above is the detailed content of A New Container Query Polyfill That Just Works. For more information, please follow other related articles on the PHP Chinese website!