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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3