Gmail ignores @media query blocks that contain class names with ":" or "@"

dcpedit commented 5 years ago

Google made a change fairly recently that affects at least the web client, and Android/iOS clients. The following example will not bold or color text until font:b and font@b are removed:

<html>
  <head>
    <style>
      @media (max-width: 500px) {
        .font:b,
        .font@b,
        .font-b {
          font-weight: bold;
        }
        .colored {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <span class="colored font-b">Hello</span> world.
  </body>
</html>

As a result, all the responsive styles get ignore since some of the utility classes contain : and @ in the suffix. I propose removing these classes completely, and only use - in the suffix.

alenvuletic commented 5 years ago

Hi @dcpedit, we are already aware of this issue and we will remove classes with "@" and ":" suffixes in v5.0.0. Right now we need to leave them available because of backward compatibility issues that might occur if we remove them.

That is already noted in our documentation, for example: https://take.ms/mGj6T

Thanks!

alenvuletic commented 3 years ago

This will be released in v5 soon.

Slicejack / bojler

Gmail ignores @media query blocks that contain class names with ":" or "@" #132