Nested Media Queries

I can’t seem to find any mention of this in the Media Queries Module specification, but apparently it’s allowed to nest media queries, as shared by Šime Vidas:

Apparently, nested media queries are a thing https://t.co/2L2pEWy2JW

— Šime Vidas (@simevidas) January 10, 2021

That’s … awesome! 🤯

Fiddling with it a bit more, turns out this snippet also works as expected:

@media not print {
	@media (min-width: 350px) {
		p {
			font-weight: bold;
		}
		@media (max-width: 1200px) {
			p {
				text-decoration: underline;
			}
		}
	}
	@media (max-width: 750px) {
		p {
			background: yellow;
		}
	}
}

You can play with this CodePen demo to try it yourself.

See the Pen
Nested Media Queries by Bramus (@bramus)
on CodePen.