I had:
@media only screen and (max-width: 480px)
in my codebase for a website I'm designing and recently introduced Stylelint. It changed the query to:
@media only screen and (width <= 480px)
A collaborator went through my pull request and was curious about a few of the changes made. I went ahead and did the easiest / laziest thing: asked ChatGPT if the changes accomplished the same purpose. Everything was going smoothly, but it complained heavily about this change, noting that using a comparison "is not valid CSS" and that CSS "does not support relational operators." I'm in disbelief that Stylelint would introduce something that isn't valid.
Wondering what the difference is and whether or not this change is valid. Any explanation is appreciated! Thanks. :)
CSS3 was stated to be the last CSS because CSS3 is not released as a whole package but as a modular collection. As such everything you have in CSS3 is modular and can be updated by WHATWG and W3C dynamically without influencing the other modules.
Media Query itself was introduced by W3C in June 2012. At this time it did not support the range feature. That is where min-width and max-width came from. Ironically even or was added later on.
Using ranges and operators like <= are part of Media Queries Level 4 Module which was published on the 9th May 2017 in section 2.4.3. However, it only made it through the drafting process on the 25th December 2021
There we come down to the browser support. You can't expect users to update their browsers every day. Many users never update their system at all. So it normally takes a couple of years before you can use the "new stuff" in productive use.
So the difference is, that range is quite new and theoretically has less browser support. As of now it probably makes no real difference anymore.