Container Query Browser Support and Fallback Strategies

Browser Support and Fallbacks

CSS container queries have strong modern browser support, but you may need fallbacks for older browsers or enterprise environments.

Current Browser Support

Browser	Version	Date
Chrome	105+	Aug 2022
Edge	105+	Aug 2022
Firefox	110+	Feb 2023
Safari	16+	Sep 2022
Opera	91+	Aug 2022

Feature Detection with @supports

/* Base styles (all browsers) */
.card {
  display: block;
}

/* Enhanced styles (supporting browsers) */
@supports (container-type: inline-size) {
  .card-wrapper {
    container-type: inline-size;
    container-name: card;
  }

  @container card (min-width: 400px) {
    .card {
      display: grid;
      grid-template-columns: 200px 1fr;
    }
  }
}

Progressive Enhancement Strategy

1. Write mobile-first base styles that work without container queries.
2. Wrap container setup and queries in @supports.
3. Older browsers get the base (mobile) layout everywhere.
4. Modern browsers get adaptive component layouts.

Media Query Fallback

/* Fallback for older browsers */
@media (min-width: 768px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

/* Override with container query for modern browsers */
@supports (container-type: inline-size) {
  @media (min-width: 768px) {
    .card {
      display: block; /* Reset the media query */
    }
  }

  .card-wrapper {
    container-type: inline-size;
  }

  @container (min-width: 400px) {
    .card {
      display: grid;
      grid-template-columns: 200px 1fr;
    }
  }
}

JavaScript Feature Detection

const supportsContainerQueries =
  CSS.supports('container-type', 'inline-size');

if (!supportsContainerQueries) {
  // Load polyfill or apply fallback classes
}

Polyfill Option

The Google Chrome Labs container query polyfill can be used for legacy browser support, though it adds JavaScript overhead.