Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Outlook.com and Outlook on iOS and Android remove styles after two closing accolades #92

Open
hteumeuleu opened this issue Jun 11, 2021 · 2 comments
Open

Outlook.com and Outlook on iOS and Android remove styles after two closing accolades #92

hteumeuleu opened this issue Jun 11, 2021 · 2 comments
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com

Comments

@hteumeuleu
Copy link
Owner

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>
@hteumeuleu hteumeuleu added the Outlook Windows, macOS, iOS, Android and Outlook.com label Jun 11, 2021
@revelt
Copy link

revelt commented Jun 11, 2021

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;}

@hteumeuleu
Copy link
Owner Author

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!

@revelt revelt mentioned this issue Jun 14, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hteumeuleu @revelt