Comments on: The New CSS Media Query Range Syntax https://css-tricks.com/the-new-css-media-query-range-syntax/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Tue, 13 Dec 2022 08:47:26 +0000 hourly 1 https://wordpress.org/?v=6.1.1 By: Mike https://css-tricks.com/the-new-css-media-query-range-syntax/#comment-1798017 Tue, 13 Dec 2022 08:47:26 +0000 https://css-tricks.com/?p=374670#comment-1798017 What is the point? Once you set up your mixins you do not need it anymore. Again, trying to fix something that is not broken.

]]> By: Kishan https://css-tricks.com/the-new-css-media-query-range-syntax/#comment-1797961 Wed, 07 Dec 2022 04:10:02 +0000 https://css-tricks.com/?p=374670#comment-1797961 In reply to Glenn.

I love your all logical tricks
.
.
.
.
.
.
.
…Amazing ❤

]]> By: AndreaM https://css-tricks.com/the-new-css-media-query-range-syntax/#comment-1797945 Mon, 05 Dec 2022 16:14:22 +0000 https://css-tricks.com/?p=374670#comment-1797945 Seems like the feature got shipped for Safari aswell (https://bugs.webkit.org/show_bug.cgi?id=180234#c4), good stuff!

]]> By: naomi https://css-tricks.com/the-new-css-media-query-range-syntax/#comment-1797655 Sat, 05 Nov 2022 17:02:34 +0000 https://css-tricks.com/?p=374670#comment-1797655 Its just that … JS doesn’t “support” a <= b <= c (in the way python or this new range query are parsing this).
So a bit confusing.
But surely much much better than min/max thing…

]]> By: Vadim Makeev https://css-tricks.com/the-new-css-media-query-range-syntax/#comment-1797617 Tue, 01 Nov 2022 13:17:00 +0000 https://css-tricks.com/?p=374670#comment-1797617 Thank you for sharing! This new syntax makes it so much easier to understand MQ. Though, there’s no need to write screen and in MQ unless you’re explicitly writing styles for screen only. It’s almost never the case. I’d suggest updating the code snippets, so this won’t be spread further.

]]> By: Glenn https://css-tricks.com/the-new-css-media-query-range-syntax/#comment-1797611 Tue, 01 Nov 2022 00:00:39 +0000 https://css-tricks.com/?p=374670#comment-1797611 In reply to Glenn.

Answering my own question, people are reporting they’re unable to replicate this bug any more https://bugs.webkit.org/show_bug.cgi?id=178261

]]> By: Glenn https://css-tricks.com/the-new-css-media-query-range-syntax/#comment-1797610 Mon, 31 Oct 2022 22:17:02 +0000 https://css-tricks.com/?p=374670#comment-1797610 This seems like a nice shorthand but it makes me think of a Safari bug from awhile back where media queries needed to be off by 0.2px. As a result, frameworks like bootstrap generated media queries like @media (max-width: 767.98px). Do we know if we need to keep doing this? Because if we do, we might not be able to get away with this shorthand yet.

]]> By: Noam https://css-tricks.com/the-new-css-media-query-range-syntax/#comment-1797609 Mon, 31 Oct 2022 22:15:58 +0000 https://css-tricks.com/?p=374670#comment-1797609 In reply to Mark Root-Wiley.

Well, there is no new functionality regarding this, so any potential jokes could be already made with the combination of min-width and max-width

]]> By: Jeremy https://css-tricks.com/the-new-css-media-query-range-syntax/#comment-1797608 Mon, 31 Oct 2022 16:14:29 +0000 https://css-tricks.com/?p=374670#comment-1797608 In reply to Mark Root-Wiley.

I’d imagine the functionality for handling = was just a necessity for handling >= and <= and so it became its own operator without a larger practical use for designers and developers.

But you are absolutely correct in expecting people to use this to make fun experiences on the quirky feature.

]]> By: Geoff Graham https://css-tricks.com/the-new-css-media-query-range-syntax/#comment-1797607 Mon, 31 Oct 2022 16:02:11 +0000 https://css-tricks.com/?p=374670#comment-1797607 In reply to Mark Root-Wiley.

Ha! So true, right?! I can already imagine all kinds of fun Easter eggs at a specific/exact breakpoint.

I can see folks mistakenly reaching for it to make device-specific layouts like we did in the 320px/768px days. But I’m also curious if others have practical use cases in mind!

]]> By: Mark Root-Wiley https://css-tricks.com/the-new-css-media-query-range-syntax/#comment-1797606 Mon, 31 Oct 2022 15:54:49 +0000 https://css-tricks.com/?p=374670#comment-1797606 Great roundup! I’m very curious about what the practical use cases will be for the = operator. I struggle to think of any outside of silly Easter eggs and inside jokes.

]]>