@supports inside @media

I already knew that it is perfectly fine to place media queries inside @supports, but I wanted to know if it also works the other way around. All my search queries ended up in media query support territory, not what I needed. So instead I opened CodePen and just tried it myself. It works.

@media (min-width: 40em) {
	@supports (display: grid) {
		/* CSS declarations in here work just fine */
	}
}

Since I was already on CodePen, I turned this into a test page. I’ve only been looking at my small set of test cases in Chromium, Firefox, and Safari, but it is rather safe to conclude that everything works, and we have uniform behavior among modern browsers. It does not stop at nesting different at-rules, you may also nest the same rule, e.g. put another @media inside @media. Although in these cases and/or combinations are also an option. And you do not have to stop at two levels, you may go deeper.

As there are more at-rules in CSS, I will most likely revisit my test page and add more test cases.

So this is the nesting we have today, but proper native CSS nesting is on the horizon.