email-bugs
email-bugs copied to clipboard
hteumeuleu
Gmail removes <style> tags or style attributes that contains an uppercase !IMPORTANT
Gmail removes any <style> tags or inline style attribute that contains an uppercase !IMPORTANTdeclaration.
The following code…
<html>
<head>
<style>
div { background:#2ECC40; }
p { color:#fff !important; }
</style>
<style>
div { background:#FF4136; }
p { color:#fff !IMPORTANT; }
</style>
</head>
<body>
<p style="color:#fff !important; background:#2ECC40;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p style="color:#fff !IMPORTANT; background:#FF4136;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</body>
</html>
…is transformed by Gmail into the following :
<html>
<head>
<style>
div { background:#2ECC40; }
p { color:#fff !important; }
</style>
</head>
<body>
<p style="color:#fff !important; background:#2ECC40;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</body>
</html>
As per CSS 2 specification, "all CSS syntax is case-insensitive".
This was discovered and reported by Sam Lewis on the Litmus forums.
As noted by @m-j-robbins yesterday, this also happens when using any case other than lowercase. (So !iMpOrTaNt also triggers the <style> tag to be completely removed.)
Just wanted to look into this further - I looked up the CSS specification on how to 'consume a declaration' and it says:
If the last two non-whitespace-tokens in the declaration’s value are a delim-token with the value "!" followed by an ident-token with a value that is an ASCII case-insensitive match for "important", remove them from the declaration’s value and set the declaration’s important flag to true.
Reading the above !IMPORTANT is valid CSS. In the ASCII case-insensitive spec it states:
A string A is an ASCII case-insensitive match for a string B, if the ASCII lowercase of A is the ASCII lowercase of B.
