CSS Media Query: «максимальная ширина» и «ширина <=»
Я имел:
@media only screen and (max-width: 480px)
в моей кодовой базе веб-сайта, который я разрабатываю и недавно представил Stylelint. Он изменил запрос на:
@media only screen and (width <= 480px)
Соавтор рассмотрел мой запрос на включение и заинтересовался некоторыми внесенными изменениями. Я пошел дальше и сделал самую простую/ленивую вещь: спросил
Интересно, в чем разница и действительно ли это изменение. Любое объяснение приветствуется! Спасибо. :)
См. caniuse.com/?search=%3C%3D для получения информации о том, когда синтаксис диапазона поддерживался различными браузерами.
Ответы 1
CSS3 был назван последним CSS, поскольку CSS3 выпускается не как целый пакет, а как модульная коллекция. Таким образом, все, что у вас есть в CSS3, является модульным и может динамически обновляться WHATWG и W3C, не влияя на другие модули.
Сам Media Query был представлен W3C в июне 2012 года. В то время он не поддерживал функцию диапазона. Вот откуда взялись min-width и max-width. По иронии судьбы, позже даже был добавлен or.
Использование диапазонов и операторов, таких как <=, является частью модуля Медиа-запросы уровня 4, который был опубликован 9 мая 2017 года в разделе 2.4.3. Однако он прошел через процесс разработки только 25 декабря 2021 года.
Вот мы и подошли к поддержке браузера. Вы не можете ожидать, что пользователи будут обновлять свои браузеры каждый день. Многие пользователи вообще никогда не обновляют свою систему. Так что обычно проходит пара лет, прежде чем вы сможете использовать «новинки» в продуктивном использовании.
Разница в том, что этот диапазон довольно новый и теоретически имеет меньшую поддержку браузеров. На данный момент это, вероятно, уже не имеет никакого значения.
Основное отличие состоит в том, что
max-widthподдерживается старыми браузерами, в т.ч. старый ИЕ.<=был представлен позже и будет поддерживаться только браузерами, которые были обновлены после этого.