- Open the email in both clients and pull out the rendered code using dev tools.
- Do a find a replace on the CSS prefix (replace
yiv2295535647withyiv) - Paste both bits of code into https://www.diffchecker.com/diff
- And differences in the code should be highlighted.
Minify - remove unnecessary whitespace from around your styles. You can do this manually or use some tool, but be sure you use something built for email rather than web to avoid any issues.
Uglify - change class names to shorter potentially unreliable names, so
.two column layout{}could become.col2{}or even.a{}. Again you can do this manually or with some email specific tooling.Use multiple style blocks - If you have multiple
<style>blocks Gmail will only start removing when the total size is over 16kb.
Short answer is yes they should work, see here https://www.caniemail.com/features/css-at-media/
As to why they are not working, that's a more complicated question. There are a number of possibilities have a look over this list of known issues and see if anything matches https://github.com/hteumeuleu/email-bugs/issues?q=is%3Aissue+is%3Aopen+outlook+app
T-Online will render code that is in conditional comments.
One solution is to add a hidden attribute to the MSO content, this will be read by T-Online but ignored by Outlook.
I think this probably needs to go on the <center> tag, so would look a bit like this <center class="dm-white" style="color: #ffffff;font-family: 'Noto Sans', Arial,Helvetica, sans-serif;font-size: 24px;font-weight: bold;" hidden>
There is a new bug in Outlook iOS listed here that might explain the issues you are seeing https://github.com/hteumeuleu/email-bugs/issues/112
You need to make sure you apply the x_ class as an attribute selector.
<style>
[class~="x_foo"]{display:none}
</style>
<div class="foo">hide in outlook webmail</div>
Also this website is very good at staying up to date on the latest email client targeting https://howtotarget.email/
Interesting, from what I've seen Yahoo and AOL are almost exactly the same.
Even the CSS prefix structure is the same yiv[number]class{}
What I would do is
One other possibility is it could be some default styles from the email client inherited into your code, for example Yahoo adds word-break: break-word; word-wrap: break-word; to the message wrapper but AOL doesn't. Not sure what other differences there are but might cause an issue somewhere.
Also if you are able to share you code here, I could maybe take a quick look.
It could be worth running an A/A split test.
So set it up exactly like you would a normal A/B split test but both versions are exactly the same.
This will give you an idea of the natural fluctuation in the results, then use that as a baseline to compare your tests against.
It could be that the change you are making isn't having much impact and the conflicting results you are seeing is just this natural fluctuation.
Yeah Gmail sets a limit of about 16kb on embedded CSS. There are a few things you can do to help with that.
So for something like this
<head>
<style>
/* 5kb basic layout styles */
</style>
<style>
/* 10kb make it look cool */
</style>
<style>
/* 10kb elaborate fancy stuff */
</style>
</head>
The first 2 blocks add up to 15kb so those will be kept, then the third one and any after it will be removed as that pushed is over the limit. It's good to group the styles so if one block is removed it still looks good.
If you looking for a tool to help with minify and uglify i think https://emailcomb.com is pretty good
Thanks for checking that @Elin Pedersen
There appears to have been another change between version 4.2124.0 and 4.2142.0
So now you need 2 id’s to make it work and these need to be on separate elements.
<div id="id1">
<div id="id2">
Phone number: 0123456789
</div>
</div>
#id1 #id2 a[x-apple-data-detectors]{
color: inherit !important;
text-decoration: inherit !important;
}