CSS: Container Queries

container-queries.css

.widget-name {
  container: inline-size / widget-name;
  /* Shorthand for: */
  /* container-type: inline-size; */
  /* container-name: widget-name; */

  /* For quick testing, do this to get a resize handle on desktop: */
  /* resize: both; */
  /* overflow: hidden; */
}

.widget-name_container {
  display: flex;
}
@container widget-name size(max-width: 700px) {
  .widget-name_container {
    flex-direction: column;
  }
}

polyfill.js

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

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