search

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.79k stars 193 forks source link

Media query conflict at "only" breakpoints #486

Closed mobalti closed 7 months ago

mobalti commented 8 months ago

There is a potential conflict in the media queries "only" breakpoints. For example:

@media (768px <= width <= 1024px);
@media (width >= 1024px);

To resolve this conflict, we can use the "<" operator instead of "<=" for the range's upper limit. This ensures screens with a width exactly at this point are not included.

@media (768px <= width < 1024px);
@media (width >= 1024px);
argyleink commented 7 months ago

nice, yes, let's fix this!

a similar issue happened with the --n-below queries, and they got switched to not including =:

@custom-media --xxl-only      (1440px <= width <= 1920px);
@custom-media --xxl-n-above   (width >= 1920px);
@custom-media --xxl-n-below   (width < 1920px); ⬅️

Let's align these, like you propose:

@custom-media --xxl-only      (1440px <= width < 1920px);
@custom-media --xxl-n-above   (width >= 1920px);
@custom-media --xxl-n-below   (width < 1920px);

TODO: