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

Gmail removes <style> tags or style attributes that contains an uppercase !IMPORTANT #13

Open
hteumeuleu opened this issue Feb 22, 2016 · 3 comments
Open

Gmail removes <style> tags or style attributes that contains an uppercase !IMPORTANT #13

hteumeuleu opened this issue Feb 22, 2016 · 3 comments
Labels
Gmail Webmail, iOS and Android apps

Comments

@hteumeuleu
Copy link
Owner

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.
@hteumeuleu hteumeuleu added the bug label Feb 22, 2016
@hteumeuleu
Copy link
Owner Author

This bug is still present in Gmail as of today.

@hteumeuleu hteumeuleu added Gmail Webmail, iOS and Android apps and removed bug labels Jul 10, 2019
@hteumeuleu hteumeuleu mentioned this issue Nov 29, 2021
Closed
@hteumeuleu
Copy link
Owner Author

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.)

@JayOram
Copy link

JayOram commented Dec 2, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Gmail Webmail, iOS and Android apps
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hteumeuleu @JayOram