#фишка будущего

Сложно найти человека, которого бы не бесили медиа-запросы. Эти вечные min-width, max-width, screen and min-width... да зачем так сложно-то? 😭

Но Media Queries Level 4 дарят нам столь долгожданное и столь математически очевидное решение: ranges!

Ну согласитесь, писать

 (240px <= width <= 360px)

намного приятнее, чем

 (min-width: 240px) and (max-width: 360px)

...слышу отдалённые крики гуманитариев, которым спешу напомнить про 1023px, ага.

Нативно поддерживается только в Firefox:
https://caniuse.com/mdn-css_at-rules_media_range_syntax, но есть PostCSS-плагин: https://github.com/postcss/postcss-media-minmax

Если вы желаете, чтобы и Chrome добавил поддержку диапазонов, ставьте звёздочку на заведённом фич-реквесте: https://bugs.chromium.org/p/chromium/issues/detail?id=1034465

Удобной вам разработки :)

#css #media #ranges