Container Queries Fallback Behavior

[kamyarkaviani]

It's great that we can use @container and @md, syntax now. But according to https://caniuse.com/css-container-queries container queries are still not 99%+ supported on all browsers. Most browsers just introduced it around 2023, so a good portion of users who are using older computers or public ones like library, are going to be stuck with older browsers that don't support this.

In my project, in order to support fallback behavior I did this:

@theme {
  --breakpoint-md: 768px;
}

@custom-variant content-md {
  @supports (container-type: inline-size) {
    @container content (min-width: 768px) {
      @slot;
    }
  }
  @supports not (container-type: inline-size) {
    @media (min-width: 768px) {
      @slot;
    }
  }
}

@custom-variant content-max-md {
  @supports (container-type: inline-size) {
    @container content (max-width: 767px) {
      @slot;
    }
  }
  @supports not (container-type: inline-size) {
    @media (max-width: 767px) {
      @slot;
    }
  }
}

And similar for other sizes. This way I can mark the container with @container/content and then use content-md:whatever, and if the browser doesn't support container queries, at least we use the backup viewport query. I know this isn't ideal, but the big reasons we needed this was to make the right section of an app with sidebar responsive to the size of the right section, not the size of the viewport. So the media query would be the next best try.

I'm wondering if you can build some native fallback behavior for browsers that don't yet support container queries? What is your take? Does tailwind already include polyfills for container queries, or will they just not work on older browsers?