How can I disable the color defined in an previously defined CSS class.

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

You could try

.yshortcuts { color: auto !important }

I don't know what this will fall back to, though - the browser's default colour, or the next colour definition in the cascade. It will depend on the other CSS rules present.

If that doesn't work, I think you'll have to override it with a defined, new colour.

Answer 2

You can override color by more specific selector in CSS

body #content .yshortcuts{color:inherit;}

Answer 3

To work cross browser, you could add some definitions to your css to keep the color your definition. For example, let's say you have this in your css:

p {color: black}
a {color: blue}

Now, I'm not sure if your .yshortcuts is wrapping the a tags or is positioned inside the a tags, but for purposes of my illustration, I'm going to assume they wrap around the a, so a solution would be to change your css to:

p, p .yshortcuts {color: black}
a, .yshortcuts a {color: blue}

Basically, you would have to do this everywhere that color is defined in your css (assuming that Yahoo! could do this to any text). This is not as elegant as the other solutions given, but should work for IE6.

Answer 4

Unfortunately, I have found that to get reliable styling across most email clients, inline styles are the only way to go. Some strip any styles declared in the head, some add their own classes, some add random extra elements - but by giving every element its own inline style - along with some just wonderful tables - I've gotten it to render consistently in every major client - Gmail, Outlook, Hotmail, Yahoo, etc.

This article is pretty useful for seeing who supports what and where: http://www.campaignmonitor.com/css/

Answer 5

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