Сегодня - небольшая интерактивная статья про
range syntax для CSS media query. Подход был введен еще в 2023 году, поэтому проблем с поддержкой можно не опасаться. Возможно именно эта статья побудит вас перейти на современный синтаксис:Проблема: Традиционные
min-width и max-width с одинаковыми значениями создают конфликты на границах брейкпоинтов.Решение: Range Queries (Media Queries Level 4) позволяют использовать операторы сравнения
(<=, >) напрямую, например: @media (width <= 300px).Плюсы: Код становится понятнее, проще задавать диапазоны
(300px <= width <= 500px), синтаксис работает и для контейнерных запросов.Поддержка: Доступен во всех современных браузерах с марта 2023 года.
Статья - https://ishadeed.com/article/range-syntax/
