Gmail Android: nested media queries aren't supported

[cossssmin]

Android 13
Gmail v2024.11.03.695901069.Release

Just tried this today and it doesn't work, the rectangle stays blue.

<style>
  .sm-bg-red {
    @media (max-width: 600px) {
      background-color: red !important;
    }
  }
</style>

<div class="sm-bg-red" style="background-color: blue; padding: 32px; color: white; display: inline-block">
	test
</div>

Sent to Gmail address, it's not GANGA.

Reproduction: https://parcel.io/e/4df3c04b-9b9f-4091-9323-437931fa38a4?wrap=true

[cossssmin]

But wait, there's more! 😂

The nested @media query works fine in Thunderbird/Windows (desktop), while the regular one doesn't. Send yourself a test from the reproduction URL to see.

[hteumeuleu]

Thanks for reporting this. What is meant by "Does not support nested media queries." on the media query page is the ability to nest a media query within another media query, like so:

  @media (max-width: 1024px) {
   .foobar { … }
  }
}

This feature has been available since the early age of media queries. But for the longest time, Gmail did not support this and it provoked a complete style removal.

What you're testing for in your case is part of the CSS nesting feature and is tested here: https://www.caniemail.com/features/css-nesting/

---

I'm not seeing your test work in Thunderbird 128.5.0esr on macOS 14.6.1.

[cossssmin]

What you're testing for in your case is part of the CSS nesting feature and is tested here: caniemail.com/features/css-nesting

Correct.

I'm not seeing your test work in Thunderbird 128.5.0esr on macOS 14.6.1.

That window looks like it's wider than 600px though? It does turn to a red bg (but not uppercase text) for me in Thunderbird 128.4.3esr / Windows 11 23H2.

[hteumeuleu]

Oh, you're right, I see this too in Thunderbird! Nice!