Orange incorrectly prefixes CSS comments

[hteumeuleu]

The desktop webmail of Orange.fr incorrectly prefixes CSS comments in a <style> tag, making a following @media declaration invalid.

The following styles…

<style type="text/css">
	/* Hello world */
	@media {
		.foo { background:red; }
	}
</style>

… are transformed by Orange into the following:

<style type="text/css">
	#message 
	@media {
		.foo { background:red; }
	}
</style>

The media query is turned into #message @media, which doesn't make sense in CSS and is thus ignored.

In general, I think it's a good practice to avoid leaving CSS comments in an email. Yahoo has a very similar bug with CSS comments.

[dudeonthehorse]

I use .less in email projects. Comments deletes automatically on compile.

[dudeonthehorse]

@revelt just an advice ;) Reason: many bugs

[mygreg]

Hello,

Just to let you know that La Poste web app desktop version does it as well. I tried to remove the comments. No changes are detected.

Code written like this :

<style>
body, table, td, a {
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
}
table, td {
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}
</style>

renders like this

<style>
#message body, #message table, #message td, #message a{
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
}
#message table, #message td{
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}
</style>

[hteumeuleu]

@mygreg Are you sure this is related? Your code doesn't include CSS comments. Your example looks like standard CSS prefixing, not a bug per se.

[mygreg]

@hteumeuleu Even when you don't put CSS Comments, there's still this prefix

[husseinalhammad]

@mygreg This is intentionally done so your custom CSS is scoped to the HTML email message only and does not affect the webmail's own elements. So while the CSS shipped with the HTML email is modified, it still works as intended.

In comparison, the behaviour described in @hteumeuleu's original post can potentially break your CSS.

[mygreg]

@husseinalhammad my bad, perhaps a little misunderstanding from my side :)

[husseinalhammad]

@mygreg No problem at all!