Targeting the Outlook App is a hot topic these days and I think I've found an easy way to target it on both Android and iOS.

The Outlook App adds the following attribute to the body tag:

data-outlook-cycle

So I added body[data-outlook-cycle] before before the class names in the embedded stylesheet. Because Outloop App is the only email client/app which adds this attribute, I can target the Outlook App and change stuff in the Outlook App only, like in the example below:

<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<style>
body[data-outlook-cycle] .default {
display: none !important
}
body[data-outlook-cycle] .oa {
display: block !important;
background-color: red !important;
color: #ffffff !important;
}
</style>
</head>
<body>
<div style="background-color: blue; color: #ffffff" class="default">Other</div>
<div style="display: none" class="oa">Outlook App</div>
</body>
</html>

I've tested this in Outlook iOS (iOS 11.0) and Outlook (Android 6.0). I also tested this on an iPhone 6s with iOS 12 beta and a Samsung Galaxy S4 with Android 5.x with a @gmail.com, @outlook.com and an exchange account. All of them came back with positive results.

Test results in Litmus

Mark Robbins helped me with testing on more devices (Thanks for that!) and he noticed that [data-outlook-cycle*="INSERT_STYLES"] will target only Microsoft email addresses @hotmail, @live, @outlook etc. on iOS. And only non Microsoft addresses on Android.

I'm curious if there are any cases in which this doesn't work or if there are ways to target the Outlook App on a specific OS for example.