Question

Recently when coding and HTML email, I noticed that Yahoo! started hijacking certain links and keywords, adding a <span class='yshortcuts'> which changes the colors of the text and links, which can cause some pretty bad rendering problems.

The ‘fix’ that Yahoo! suggested is pretty ugly (adding a span within all of the links and keywords that are affected) – far from an easy universal solution, especially when they apply the style to seemingly arbitrary text.

I am wondering if it is possible to simply over ride their class, and some how, with css, remove the color attribute. (While <style> blocks aren’t supported in all major email platforms, Yahoo! does…and the ones that don’t support it, gracefully ignore it.)

Something like
<style>
.yshortcuts{color:none;}
</style>

I know that color:none; isn’t valid, and doesn’t work universally.

Any Ideas?

Answer 1

After digging and slogging it seems this is the best way to handle the problem (to my mind).

1. At top of the email, add this style block. This will fix most of the problems in most browsers.

   <style>
   .yshortcuts{color:inherit;}
   </style>
   

2. Since we want IE people to be happy too, insert a span, with a color style, inside each <a> that is causing problems. E.g.:

   <a href="http://google.com" style="#c912dc"><span style="#c912dc">Google</span></a>
   

This should, fix it in almost all situations.

Since this can be a pain to do by hand if you have a file already coded, you can do a regex find/replace and it should help speed things up (but your mileage may vary…works in Textmate):

Find:

(<a[^>]*style=".*color:#(\w{6}).*".*>)(.+)(</a>)

Replace:

$1<span style="color:#$2;">$3</span>$4