@custom-media intersections

[argyleink]

Discussed in #275

^{Originally posted by WebMechanic September 13, 2022}
Hello,

we use @custom-media with the PostCSS plugin for or .scss files (Vite), and I was wondering about the reasoning behind intersecting values of the various *-only, *-n-below and *-n-above due to the use of <= and >=

@custom-media --lg-n-above (width >= 1024px);
@custom-media --lg-n-below (width <= 1024px);

transpiles into

@media (min-width: 1024px) ...
@media (max-width: 1024px) ...

Rulesets would then overlap at 1024px letting the cascade win which isn't always possible to control (not using @layer).

Maybe I'm missing the logic here, but wouldn't this be more accurate?

@custom-media --lg-n-above    (width >= 1024px);
@custom-media --lg-n-below    (width <  1024px);  // == (max-width: 1023px)

So, just curious.

---

In our copy we eventuall replaced all <= with < and also used more accurate/modern screensizes based on our analytics and matching our content's needs, not the (outdated) "iDevice" values even Apple no longer maintains.