Skip to content

[css-contain] What is the migration path for Container Queries? #6175

Closed
@mirisuzanne

Description

@mirisuzanne

While at-rules provide their own test for positive support, there is currently no way to test for lack of at-rule support.

With the introduction of media-queries it became common practice to start with a reasonable fallback outside the query, and add progressive enhancement inside the query. That progressive approach also works with some container-queries (see Andy Bell's example), but it falls apart if an author wants to use media-queries as the fallback. Ideally, authors would be able to test for the lack of container-query support, and only apply media-queries when CQ is unsupported (see @eeeps codepen attempt).

If all browsers release 1D containment (or any other new property/value syntax) at the same time as container queries, Eric's approach should work:

@container {
  /* progressive enhancements */
}

/* query negative support for the related new property/value */
@supports not (contain: inline-size) {
  @media (...) { /* fallback media-queries */ }
}

It's not likely that any browser would release @container before releasing inline-size containment, but it is possible a browser would release 1d containment first. If that is the only new syntax to test, it could result in some false negatives: browsers that support both inline-size & @media, but not @container, would miss out on the fallback media-queries. That's not ideal.

I think the only way to ensure this migration path works smoothly is to include container-query-specific syntax that can be tested by @supports. The inline-size value might work for that, but only if browsers are careful to implement both features together.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions