@custom-media replacement in 2025

I've been using @custom-media declarations in my app for a while now that PostCSS translates to regular media queries. Example:
@custom-media --larger-than-mobile (min-width: 431px);
@custom-media --larger-than-phablet (min-width: 550px);
@custom-media --larger-than-mobile (min-width: 431px);
@custom-media --larger-than-phablet (min-width: 550px);
Now that @container style queries are available and they can be named, is there a native way to implement the @custom-media queries using named @container style queries instead? I feel like I came across a video or an article that described this as a possibility, but that was before widespread browser support for named container style queries - although it seems that there's still no support in Firefox at all. https://caniuse.com/css-container-queries-style
1 Reply
Zampa
ZampaOP7mo ago
Or is there some other new mechanism to use --larger-than-phablet to represent min-width: 550px and plug it into a @media query that would work?

Did you find this page helpful?