Media Queries Level 4 may sound like possibly the worst D&D character class but offer a huge simplification on how to specify page-size responsive CSS.
It introduces the ability to write media queries using the "<=>" operators.
The previous way of writing conditions was based on min-width and max-width. And the thing I found confusing about it is that the max option meant "up to this width" and the min option meant "from this width".
This may not be too hard to understand when you have one size that triggers a change but typically you have a few ranges where different layouts and configurations of viewable elements apply. Writing these as a set of max widths and making it maintainable amongst multiple people felt like an art.
With the new standard though you can now write selectors in the following form: @media (400px <= width <= 700px) { … }. I think this is very easy to understand and is closer to what you would intuitively expect to be writing. It also closes the gap between pixel pushing designs and the code you're writing to implement it.
Top comments (0)