Target AOL/Yahoo
Closed this issue · 2 comments
AOL/Yahoo have a bug where classes with CSS comments preceding them are ignored.
This can be used to set an aol/yahoo specific style, provided reset styles are used for all other clients.
Example:
<style type="text/css">
.class { color: red; }
/*yahoo ignores this next class, but works for all others*/
.class { color: black; }
</style>Yahoo will ignore the second instance of the class due to the css comment, so will be red.
All other email clients will use the styles from the second instance of the class, and so will be black.
A different selector method could be used on the second instance as well to further denote the main style, and to prevent any possible issues with clients/devices seeing any errors.
To be more explicit, Yahoo does not ignore it. It replaces the CSS comment with the ID of the email message container (which is also added before all selectors).
#yahooid .class { color: red; }
#yahooid
#yahooid .class { color: black; }The selector #yahooid #yahooid .class will never match any element. This is documented in hteumeuleu/email-bugs#25 (comment)
So this can probably make your CSS invalid in other ways too. e.g. it may break at-rules assuming the below
/* some comment */
@media { }turns into:
#yahooid
@media { }A very similar bug is seen on Orange (at least with media queries), but I don't know whether it behaves the same with selectors:
hteumeuleu/email-bugs#35
Yahoo have since fixed this bug, so I'm closing this issue