MMOutlook IOS Blue Text Autoformatting for Dates, Days of the Week, and Times
I recently found that IOS Outlook started adding blue styling to text that could be used to create a calendar event [dates, days of the week, and times]. I discovered two HTML attributes that the commonly used IOS autoformatting fix did not cover [x-apple-data-detectors-type="calendar-event"] & [x-apple-data-detectors-type="link"].
The attribute that is autoformatting suspected calendar events is [x-apple-data-detectors-type="calendar-event"]. The CSS guilty for turning the calendar event text blue is using an attribute selector and !important so to override that styling you need to increase specificity even higher.
Below is the commonly used IOS autoformatting fix for reference. I also included the CSS added by Outlook IOS for calendar event styling and the solution to overriding the autoformat styling that occurs.
Commonly Used IOS Autoformatting Fix:
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
Guilty CSS Added by Outlook IOS for Calender Event Styling:
[x-apple-data-detectors-type="calendar-event"] {
color: #0072C6 !important;
-webkit-text-decoration-color: #0072C6 !important;
}
Solution to Override Calendar Event Styling:
[data-outlook-cycle] [x-apple-data-detectors-type="calendar-event"] {
color: inherit !important;
-webkit-text-decoration-color: inherit !important;
text-decoration: none !important;
}
Note: The Outlook specific selector I used to increase the CSS specificity that allows this solution to work can be found at the link below. (Thanks Wilbert!)
https://litmus.com/community/discussions/7660-targeting-outlook-app-on-android-and-ios
Hi there,
Not sure if this was an update in the app but I found that your solution was overwritten by an #root id, inserted in the <style> tag in Outlook iOS 12.
In order to overwrite the id #root selector, which his stronger and more specific, I had to put id's in my element
Hope this helps.
Thanks for the update!
Using the id fixed the issue for us that we just started to encounter as well - thank you!
Thank you, this also fixed the issue for us!
Has anyone seen the same issue with addresses and numbers? That's what I'm struggling with now. I was able to fix dates/times using the proposed solution (although referencing #body instead of an element id), which works fine. However, the issue is still there for addresses and numbers. Addresses only for Outlook iOS, numbers on both iOS and Android. Adding to the styles to fix addresses in the same way as done for calendar-event seems to work also - [x-apple-data-detectors-type="address"] - but not for the numbers. We've tried a million different things to stop numbers from going blue in the outlook app.. Meta names, a[href^ styles, important declarations all over the place, more detector types targeting, but the only thing that seems to work for numbers are invisible characters. However, I don't want to go down that route for various reasons. Also worth mentioning is that the address didn't turn out blue on the litmus test, but it did when sending to my device running iOS 14.7.1. So, if anyone out here has a catch-all solution that can be plugged into the styles, I would be very grateful!
We found using a similar code for telephone is working with Outlook iOS as well --
[x-apple-data-detectors-type="telephone"]
Would love to combine the address, date, and phone into one ID/class but haven't figured that out yet.
Thank you, Kelly! Adding the telephone code takes care of iOS, although Android is still formatting numbers blue according to Litmus (have not tested on a real device, though). I also just discovered this post where Mark Robbins proposed a catch-all solution that seems to fix it all on Outlook iOS (thank you, Mark!):
https://litmus.com/community/discussions/8748-outlook-for-ios-is-removing-padding-and-styling-from-our-e-mail
This worked for our email templates:
body [x-apple-data-detectors=true],
a[x-apple-data-detectors=true] {
color: inherit !important;
-webkit-text-decoration-color: inherit !important;
text-decoration: inherit !important;
}
That's a great find, Elin! It's working perfectly for us and definitely consolidates our code. Thank you for sharing it :)
Is this still working for anyone? It no longer works for me. Was there an update to Outlook for IOS?
Oh joy.. The solution I shared earlier has worked fine for us so far, but I just ran a test and can see that the blue links are back. It all looks fine in Litmus testing, but not when testing on a real device. Same result on iOS 14.8 and 15. Looks like there were several versions of the Outlook app released last week, and even one today, so I guess that's why my code doesn't work anymore. If anyone out there has a fix, please share!
Yep. My blue links started showing up about two weeks ago so I assumed there must have been some updates to the IOS app for Outlook. I'm having to hack for html emails to get rid of the blue until I find a real solution.
The hack I'm using for now is the zero-width non-joiner in between the first 2 characters of a date or address.
Example:
233 Peachtree Street then the html would be 233 Peachtree Street
iOS15, the bane of all email marketers existences. I am using the zero-width non-joiner for now, but it would be great to have an overall solution.
Any one come up with anything?
I cant reply to @Elin Pedersen comment but just to build on it. This fix worked for us for ages however this week it stopped working. After a little investigation, it now looks like if you use an ID of 'body' on your body tag, outlook will convert this to 'converted-body' however after a little bit of testing, it doesnt look to change if another ID name is used.
This still needs to be combined with @Mark Robbins fix for example
converted-body #id2 a[x-apple-data-detectors]{color: inherit !important; text-decoration: inherit !important;}
Thanks to @Mark Robbins, there is a fix! After the app update you now need to target two id's instead of just one. In our template we have a wrapping element in the body, so I referenced both the body id and the wrapper id, and now it works just fine. Here's what you need for the head style:
#id1 #id2 a[x-apple-data-detectors]{color: inherit !important;text-decoration: inherit !important;}