Using container as custom media queries

[AlessioCoser]

Do you see any problem handling custom media queries without the need of postcss preprocessor?

I thought something like this could do:

:root {
    --is-below-xxs: false;
    --is-below-xs: false;
    --is-below-sm: false;
    --is-below-md: false;
    --is-below-lg: false;
    --is-below-xl: false;
    --is-below-xxl: false;

    @media screen and (max-width: 240px) {
        --is-below-xxs: true;
    }
    @media screen and (max-width: 360px) {
        --is-below-xs: true;
    }
    @media screen and (max-width: 480px) {
        --is-below-sm: true;
    }
    @media screen and (max-width: 768px) {
        --is-below-md: true;
    }
    @media screen and (max-width: 1024px) {
        --is-below-lg: true;
    }
    @media screen and (max-width: 1440px) {
        --is-below-xl: true;
    }
    @media screen and (max-width: 1920px) {
        --is-below-xxl: true;
    }
}

Usage:

@container style(--is-below-xxs: true) {
    /* ... */
}

I've checked the browser compatibility, and it seems fine: https://caniuse.com/?search=%40container

What do you think? I can try to make a pull request if you think it would be a good fit for the project.

[argyleink]

hi @AlessioCoser!

fun idea, reminds me of https://github.com/propjockey/css-media-vars except instead of using tricky dry switching you lean into style queries. worth noting here, that style queries, which do have different support than container queries, have less support atm. good news is, Open Props is interested in standards and doesnt focus on browser support, so this'll eventually be a non-issue.

tldr;
i think this is cool, and yeah, does have a good fit here and I'm down to help you land a PR into this repo so others can use your cool work 🙂

here's the media queries usable from Open Props today, they lean into the @Custom-Media draft standard (which needs a preprocessor like you mention), but does show a bunch of media queries that folks would likely want a variable for.

[felix-bohlin]

Neat idea @AlessioCoser!

Isn't it easier to work with and more common to use min-width (or width < xxxx) rather than max-width?
Perhaps you've thought it through and I'm missing something, or we could do both! :)

EDIT: just saw you addressed this in your PR. Nothing to see here!