search

hteumeuleu / email-bugs

Email quirks and bugs
528 stars 20 forks source link

Gmail strips !important from styles when images are turned off #70

Open stigmm opened 4 years ago

stigmm commented 4 years ago

Another Gmail-with-images-off issue:

If Gmail’s image settings are set to “Ask before displaying external images”, !important declarations are removed from the stylesheet.

Basic example:

<!DOCTYPE html>
<html>
  <head>
    <title>Gmail strips !important from styles when images are turned off</title>
    <style>
      .override { background-color: green !important; }
    </style>
  </head>
  <body>
    <div style="background-color: red;" class="override">
      !important override to green
    </div>
  </body>
</html>

With images off, you can see that the override style is still there, but it doesn’t take effect since the !important declaration is missing. stripped-important

If you click “Display images below”, the same is still true: still-stripped-important

However, the next time you open the email after turning on its images, the !important declaration is in place: next-open-important

hteumeuleu commented 4 years ago

Nice catch. I confirm I'm seeing this too. It kind of reminds me of this old bug. Another thing I noticed is that Gmail changes hexadecimals colors to rgb declarations. So in the following example…

<!DOCTYPE html>
<html>
<head>
    <title>Gmail "Display Images Below" Bug</title>
    <style>
        p { background:#c44230; display:block; padding:1em; font: 1em/1.5 Open sans, sans-serif; color:#fff; }
        .foo { background:#0f0 !important; }
    </style>
</head>
<div>
    <p class="foo" style="background:#f00;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus atque nisi iure, iusto fugit cumque odio eos ipsa, recusandae molestiae hic magnam vero suscipit velit unde voluptates eaque non qui.
    </p>
    <img src="http://i.imgur.com/HhAfOct.gif" alt="This image is blocked." style="display:block; width:200px; height:100px;" />
</div>
</html>

style="background:#f00;" becomes style="background:rgb(255, 0, 0) none repeat scroll 0% 0%" and .foo { background:#0f0 !important; } becomes .msg4941065753664733014 .m_4941065753664733014foo { background:rgb(0, 255, 0) none repeat scroll 0% 0% }.