email-bugs
email-bugs copied to clipboard
hteumeuleu
Outlook.com and Outlook on iOS and Android remove styles after two closing accolades
The webmail Outlook.com and Outlook apps (on iOS and Android) remove styles after a double accolade. So if you've got minified styles with a media query, these clients will ignore anything after the }}. The following code…
<style>
@media screen {
div {
color: white;
}}
.foo {
background: green;
}
</style>
… is transformed into:
<style>
<!--
@media screen {
.rps_aacc div
{color:white}
}
-->
</style>
The solution is to have any valid character (space, line break, …) between the two closing accolades. For example:
<style>
@media screen {
div {
color: white;
} }
.bar {
background: green;
}
</style>
Here's a full test code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Double Accolade Bug</title>
<style>
@media screen {
div {
color: white;
}}
.foo {
background: green;
}
</style>
<style>
@media screen {
div {
color: white;
} }
.bar {
background: green;
}
</style>
</head>
<body>
<div style="background:red;">
<div style="height:100px;" class="foo">foo</div>
<div style="height:100px;" class="bar">bar</div>
</div>
</body>
</html>
Nice catch! I can do a fix on htmlcrush to avoid double curlies, currently minifier will produce @media screen{div{color:white;}}.foo{background:green;}
For the record, this was mentioned this week in the #emailgeeks Slack. (And I believe Mark Robbins mentioned it in the past as well.)
I think that'd be a good sensitive thing to do in htmlcrush!