YH
0
Maximum number of characters of inline <style> css for Gmail app?
Is there a maximum number of characters allowed to use inside the <style></style>. My mobile media queries weren't respected by Gmail app. Stripped down my media queries started working. I know Gmail is strict, so I removed everything and started to build up my css again bit by bit. At a certain point my Gmail media query broke. I tried to pinpont to attribute that was causing it. But there was no mistake. I reached the limit. Changing my first suspect with an other attribute didn't make it work. Deleting a couple of attributes and placing one back that went wrong at first, made it work again.
Breaking occured around 1000 lines of css code
Yeah Gmail sets a limit of about 16kb on embedded CSS. There are a few things you can do to help with that.
Minify - remove unnecessary whitespace from around your styles. You can do this manually or use some tool, but be sure you use something built for email rather than web to avoid any issues.
Uglify - change class names to shorter potentially unreliable names, so
.two column layout{}could become.col2{}or even.a{}. Again you can do this manually or with some email specific tooling.Use multiple style blocks - If you have multiple
<style>blocks Gmail will only start removing when the total size is over 16kb.So for something like this
The first 2 blocks add up to 15kb so those will be kept, then the third one and any after it will be removed as that pushed is over the limit. It's good to group the styles so if one block is removed it still looks good.
If you looking for a tool to help with minify and uglify i think https://emailcomb.com is pretty good
Spot on, Mark. That is it!
My stylesheet is 24 kB and is full of line breaks and returns. It contains the styling I'm using inline too for developing reasons. I have one big HTML file containing all partials and one css containing all styling used inline and all media queries with overriders for the inline styling. That way I keep everything together.
However. During testing in Litmus I just drop the big css contents between my <style></style> tags until I get things going. I noticed Gmail app was not picking up any of the non inline styling. When I kicked out the chunk with "regular" styling that was already covered, I noticed it worked. At first I thought I had an error in that part, but now I learned it was just too big. Thanks, Mark.
Hello. Started researching CSS limits last week. Trying to be proactive as our Global Header resets and responsive styles are quite beefy. We minimize everything and then compartmentalize into snippets that get compiled into the full email at send time. Currently, all included styles are at 16.33 KB and it still renders in Gmail with no issue, in Litmus and on live devices. All morning I have been testing by adding another 127 bytes (separate style blocks that override a previous responsive declaration) and testing again and again in Litmus and live devices to see if I can break it. I have reached a combined total of 19.124 KB spread across those 22 additional style blocks before Gmail ignored new styles. So we are about 22 declarations away from Gmail cutting us off. Time to audit and optimize! Thanks for the post. It provided a great place to start testing our own limit.