Outlook.com and Outlook on iOS and Android remove styles after two closing accolades
hteumeuleu opened this issue · comments
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!