CSS styles in mail body in Gmail
Question
Does anyone know or can confirm if Gmail strips out style blocks from the mail body? They claim to allow style tags in the HTML body. However, in my tests style tags in the body were removed from Gmail. I tested with this HTML, only the head style got applied.
<html> <head> <style> h1{color:red;} </style> </head> <body> <h2>Hi from H2-1</h2> <style>h2{color:green;}</style> <h1>Hi from H1</h1> <h2>Hi from H2-2</h2> </body> </html>
3 answers
solution1
2 2017-03-06 14:33:12
You have to do all inline styles for almost all major email providers.
<h2 style="color: #ff00ff;">H2 Title</h2>
<p style="color: #fff; padding: 10px 0; text-align: center;">This is a paragraph section.</p>
solution2
0 2017-03-06 14:45:34
Generally, working with html email is a massive pain. All I can recommend you is to just run your html through some premailer, like: http://premailer.dialect.ca/ . It should take care of inlining all styles. There are no easy answers in the email land, it's still year 2000 there.
solution3
0 2022-06-20 19:10:39
From my simple test, if you use No-Comma Color Functions in CSS in your inline styles the whole style attribute will get stripped from that element.
This HTML
<span style="background-color:rgb(239 68 68 / 1);color:rgb(255 255 255 / 1 );font-weight:700;margin-left:1rem;margin-right:1rem;padding:1rem;"> with slash without comma </span>
<span style="background-color:rgb(239 68 68 );color:rgb(255 255 255 );font-weight:700;margin-left:1rem;margin-right:1rem;padding:1rem;"> without slash without comma </span>
<span style="background-color:rgb(239, 68, 68);color:rgb(255, 255, 255 );font-weight:700;margin-left:1rem;margin-right:1rem;padding:1rem;"> with commas </span>
Looks like this in Thunderbird:
And like this in gmail (webmail):
If using postcss, postcss-preset-env should help.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.