Outlook.com and Office 365 targeting stopped working
Recently techniques I've used to target Outlook.com and Office365 have stopped working, namely using [owa] and -webkit-min-device-pixel-ratio to selectively deliver CSS and <!--[if !mso]><!-- --> to block content from Outlook. Has anyone else experience this issue or have a fix?
<html>
<head>
<style type="text/css">
[owa] .fallback {
color: #004991;
font-size: 100px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.fallback {
display:none !important;
}
.interactive {
display: inline!important;
color: #B60000;
font-size: 100px;
}
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="fallback">I am NOT Webkit</td>
</tr>
<!--[if !mso]><!-- -->
<tr>
<td style="display:none;" class="interactive">I am Webkit</td>
</tr>
<!--<![endif]-->
</table>
</body>
</html>
| Browser | Works? |
|--|--|
| Office 365 Chrome Win | No |
| Office 365 Firefox Win | No |
| Office 365 IE11 Win | Yes |
| Outlook.com Chrome OSX | No |
| Outlook.com Chrome Win | No |
| Outlook.com Firefox OSX | No |
| Outlook.com Firefox Win | No |
| Outlook.com IE11 | Yes |
| Outlook.com Safari OSX | No |
Hi Jun,
This has changed indeed in the past two months. A new way to target Outlook.com is to use an attribute selector with a
classprefixed byx_. Example :The reason this works is that now Outlook.com supports attribute selectors and keep their values intact. But it will still prefix class names by
x_(and it's the only webmail to use this exact prefix). So<td class="fallback">will become<td class="x_fallback">only in Outlook.com and thus the styles will match.Thank you for sharing this solution Rémi! It worked perfectly - thank you for the help!
Thanks for the solution Rémi and Mrugesh! I had the hardest time trying to figure this out on my own.
Now I have to figure out Markdown. ;)
Thanks Remi, it has worked perfectly :)
Hey Jun,
As I can see Outlook has recently updated their platform and hence it has stopped supporting [OWA].
But I have found the fix to that as well on outlook mail, using ID you can have that fixed.
Here is the example to it:
Test this at your end, hope this works.
Thanks,
Email Monks