email-bugs icon indicating copy to clipboard operation
email-bugs copied to clipboard

Yahoo will ignore embedded css if it is directly preceded by a comment

Open lheise opened this issue 7 years ago • 3 comments

Example:

ul { padding: 0; } was ignored. Yahoo added its .undoreset ul { padding-left: 40px; }

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #333333;
    line-height: 16px;
  }
/*comment in code*/
  ul {
    padding: 0; 
    margin: 0 0 0 15px;
  }

  ul ul { margin: 0 0 5px 15px; }
  li { margin: 0 0 5px 0; }`

Corrected example:

Once the comment has been removed, the ul { padding: 0; } will be respected.

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #333333;
    line-height: 16px;
  }

  ul {
    padding: 0; 
    margin: 0 0 0 15px;
  }

  ul ul { margin: 0 0 5px 15px; }
  li { margin: 0 0 5px 0; }`

lheise avatar Feb 22 '17 00:02 lheise

Just tested to verify this still happens. It looks like Yahoo replaces CSS comments with its own div wrapper ID:

<div id="yiv4236027226">
  <title>Document</title>
  <style>
    #yiv4236027226 body {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 12px;
      color: #333333;
      line-height: 16px;
    }

    #yiv4236027226 
    #yiv4236027226 ul {
      padding: 0;
      margin: 0 0 0 15px;
    }

    #yiv4236027226 ul ul {
      margin: 0 0 5px 15px;
    }

    #yiv4236027226 li {
      margin: 0 0 5px 0;
    }
  </style>

  <div>
    <ul>
      <li>test</li>
    </ul>
  </div>
</div>

So the selector becomes #yiv4236027226 #yiv4236027226 ul { } which doesn't match anything.

husseinalhammad avatar Feb 25 '21 13:02 husseinalhammad

Yep, that's the bug. Thanks for clarifying that.

hteumeuleu avatar Feb 25 '21 15:02 hteumeuleu

Just tested this again with the above CSS - Yahoo Mail still replaces the comment with the unique email #ID. But if you need to use CSS comments, it doesn't strip this single line comment:

// comment in code {}

image

However the single line comment above is stripped by Gmail as it parses it as invalid CSS and removes the whole

JayOram avatar Oct 17 '21 09:10 JayOram

It looks like Yahoo Mail has fixed this bug. I tested using the CSS above and Yahoo removed the comment instead of replacing it with the message's wrapper ID. Can someone else confirm?

michael-westphal avatar Jan 20 '23 16:01 michael-westphal

Wow, I confirm. Finally.

hteumeuleu avatar Jan 20 '23 16:01 hteumeuleu

@hteumeuleu can this issue be set to closed now?

M-J-Robbins avatar Mar 08 '23 15:03 M-J-Robbins

Absolutely!

hteumeuleu avatar Mar 10 '23 09:03 hteumeuleu