A new way to write media queries is coming to CSS: range syntax

🔗 Links


#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

For all those wondering, IPA is a type of beer 🍻

[facundocorradini]

I think this is one of those "it should have always been this way" kind of thing. Makes *a lot* more sense than min/max-width. Still, maybe I'd be better to just leave this for pre-processors to compile into the old way, otherwise it's introducing compatibility issues for a tiny, tiny improvement in developer experience

[zachjensz]

Loving these short to the point videos

[joeldcanfield_spinhead]

Your opening made me finally think of it as "use these rules, up to a max-width of" or "use this rule, starting at a min-width of" and I never ever remember how it works but maybe now I will. A month before it no longer matters . . .

[steveringwood]

That last example differently seems easier to read. When talking about width < 50em in one rule and width > 50em in another, one of the rules should be width <= 50em or width >= 50em, otherwise the case where width equals 50em is not covered by either media query

[itsmeshteve]

I've always felt that this was the way to go for media queries. It feels much more intuitive.

[KelseyThornton]

Width > xx is much clearer - nice addition to the standard!

I was thinking the 'and' constructs may be a little over the top, thinking it is only there to allow media queries in any order:
e.g.
@media (width > 50em) { styles 2 }
@media (35em > width >= 50em) { styles 1 }

but this is actually subtly different from:
@media (width > 35em) { styles 1 }

@media (width > 50em) { styles 2 }

...because in the first case, when the width is > 50 em, then *only* styles in "styles 2" will be applied, whereas in the second case, any styles in "styles 1" which are not superseded by styles in "styles 2" will also be applied.

[chrisdizzle]

This is amazing. I still get tripped up with min and max in media queries.

[chriskasatka]

This dude and CSS Tricks have massively improved my CSS.

[LKonstantina]

woah this is such a small change but very useful

[mps_unltd]

Great news. I have always had trouble with min/max in Media Queries

[charliesta.abc]

All browser vendors need to implement this ASAP

[definty]

It would be nice to have Switch Case staements and include a CSS in them for that resolution.

[coderxchris]

I love your channel! Thanks for all the info!!!

[YatheeshRaju]

finally the proper way is making its way

[autocosm]

I love this! I'm a designer who's starting to explore front end (your channel has been invaluable!). One thing I'm struggling with is one source using min-width:768px, another source using max-width:767px, then seeing the conflict when it's actually like 767.4. I know picking mix or max from the jump is ideal, but I didn't have that luxury plus I'm just starting out. This is just what I needed.

[thaivunguyen]

Should’ve always like this. Min, max-width are quite mind-bending back when i first know about it and still is sometimes.

[mcglk]

I'm looking forward to such a startlingly sensible change in CSS. Thanks, Kevin.

[olafkliemt]

width < 50em and width > 50em leaves out the case when width is 50em. you should use a <= or >= to cover all.

[jkmorbo]

Nice shirt dude! I gotta say, this new method is definitely long overdue. The current way of writing media queries has got to go!