Styling anchors in Office 365 (OWA). What a pain in the @$$!

readme.md

================================== Anchor styling in Office 365 (OWA)

You'd think that anchor styling is something very simple that even the most egotistical email clients on a power trip will honour right?

WRONG! Office 365 (OWA) couldn't care less. Thanks Microsoft.

Find out the crazy behaviour of the Office 365 pre-processor and how makes anchor styling nearly impossible with some sarcastic code examples!

:(

office-365-owa-anchors.html

<!-- 
    A standard anchor in your email campaign 
    
    How Office 365 (OWA) renders it:
    
    ** Anchor colour isn't applied and uses default colour state of the browser the email is viewed in
    ** Link underline is present and is the same colour as the default colour state of the browser viewed in
-->
<a href="http://github.com" style="color:#ff0000; text-decoration:none;">Awesome Sauce</a>


<!--
    Now try putting a span within the anchor with the same color property applied
    
    How Office 365 (OWA) renders it:
    
    ** Anchor colour is set correctly
    ** Link underline is present and is the same colour as the default colour state of the browser the email is viewed in
-->

<a href="http://github.com" style="color:#ff0000; text-decoration:none;">
    <span style="color:#ff0000;">Awesome Sauce</span>
</a>


<!--
    OK, what about text-decoration:underline on the span?
    
    How Office 365 (OWA) renders it:
    
    ** Anchor colour is set correctly
    ** Link underline colour now matches the anchor colour set
    
    BINGO! Well not quite...
-->

<a href="http://github.com" style="color:#ff0000; text-decoration:none;">
    <span style="color:#ff0000; text-decoration:underline;">Awesome Sauce</span>
</a>


<!-- 
    Q. What about my call to action buttons that don't need the link underline?
    A. HA! Office 365 won't let you have that luxury!
    
    Office 365 (OWA) lacks any support for text-decoration:none;
    This means its impossible to actually remove the underline.
    
    What's interesting is OWA detects text-decoration:none; and modifies the original code.
    It strips it but turns out some interesting retro code like <u> tags afterwards.
    BUT only when text-decoration:none; is applied on an anchor, if it isn't, the original code is left alone.
    
    This means you can only control the colour of the underline but not remove it :(
    
    HOW TO FIX THIS BULL****:
    
    A simple five step guide to venting your frustration.
    
    Step 1: Locate Feedback form for Office 365 (oh look the Office 365 team provided exactly that!)
    https://twitter.com/Office365/status/509819361537060864
    http://t.co/RL4jR0XW9D
    
    Step 2: Set the two required fields as the following:
    
    ** What would you like to provide feedback about?: Email
    ** How would you rate this area?: Very Dissatisfied
    
    Step 3: Use the pre-written template below (be sure to change [YOUR NAME], to something humorous or legit, your call)
    
    Step 4: Send the message template to their suggestion box and repeat for the amount of times Office 365 has frustrated you
    
    Step 5: Dream of the days where anchor styling will be made easy in Office 365
    --------------
    
    Dear Office 365 Engineering team,
    
    Support for the text-decoration CSS property in OWA would be awesome.
    
    kthxbai
    
    [YOUR NAME]
    - On behalf of email campaign developers everywhere
-->