Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Gmail now supports style element?

churchcommunitybuilder

Avatar
Newbie
Total Posts:  6
Posted: 06 February 2014 04:51 PM

Is anyone else seeing this?  In my last several tests, the Gmail web-client is honoring the css I declare in a style element in the head.  It’s wrapping my email in a div with “random” string as a class value and then including a style element in the page head that is essentially a duplicate of my style element with a “div.[class_string]” selector preppending all my declarations.  Is this for real?


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 06 February 2014 05:29 PM
[ # 1 ]

I just tested some very simple code (to make a paragraph blue via the “blue” class) and gmail didn’t honor my style. Not an exhaustive test, but seems like they are still ignoring the style block.

<html>
<head>
<style types=“text/css”>
.blue {color: blue;}
</style>
</head>
<body>
<p class=“blue”>This is a bit of text.</p>
</body>
</html>


 

churchcommunitybuilder

Avatar
Newbie
Total Posts:  6
Posted: 06 February 2014 05:48 PM
[ # 2 ]

Geoff, I’ve been testing ways to do lists reliably without using tables.  The code I just used is below.  The Email on Acid screenshots for Gmail are showing almost all that styling in all the browsers I tested (Mac Chrome, Win Chrome, Mac FF, Win FF, IE8, IE9).  The one declaration it is not applying is the one using a class selector, which happens to be the only type of declaration you tested!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html>
<
head>
<
style>
table {border-collapsecollapse;}
td {line
-height:100%; font-size:14pxfont-family:Arial;}
ol {margin
1em 0border:1px solid red;}
ol
.unordered {list-style-type:disc;}
li {line
-height:100%; margin0 0 3pxborder:1px solid green;}
</style>
</
head>
<
body>
<
table border="1" cellspacing="0" cellpadding="0">
<
tr>
<
td>
<
table border="1" cellspacing="0" cellpadding="0">
<
tr>
<
td>ol as Ordered List</td>
</
tr>
<
tr>
<
td>
<
ol>
<
li>List Item One</li>
<
li>List Item Two</li>
</
ol>
</
td>
</
tr>
<
tr>
<
td>ol as Unordered List</td>
</
tr>
<
tr>
<
td>
<
ol class="unordered">
<
li>List Item One</li>
<
li>List Item Two</li>
</
ol>
</
td>
</
tr>
</
table>
</
td>
<
td>
<
table border="1" cellspacing="0" cellpadding="0">
<
tr>
<
td>ol as Unordered List</td>
</
tr>
<
tr>
<
td>
<
ol class="unordered">
<
li>List Item One</li>
<
li>List Item Two</li>
</
ol>
</
td>
</
tr>
<
tr>
<
td>ol as Ordered List</td>
</
tr>
<
tr>
<
td>
<
ol>
<
li>List Item One</li>
<
li>List Item Two</li>
</
ol>
</
td>
</
tr>
</
table>
</
td>
</
tr>
</
table>
</
body>
</
html

 

churchcommunitybuilder

Avatar
Newbie
Total Posts:  6
Posted: 06 February 2014 05:58 PM
[ # 3 ]

Also doesn’t seem to support id selectors, so it’s not perfect, but it is there!  Wonder what else doesn’t work.


 

churchcommunitybuilder

Avatar
Newbie
Total Posts:  6
Posted: 06 February 2014 06:22 PM
[ # 4 ]

Here’s a little more info.  Gmail is leaving the class and id selectors in its copy of my style element but it is stripping out the class and id attributes on the target elements themselves.  I even tried using a pseudo-class, something like this:

<ol pclss="unordered"

with this in the style:

ol[pclss="unordered"] {list-style-type:disc;

and it kept the attribute selector in the style but stripped out the attribute on the target element


 

churchcommunitybuilder

Avatar
Newbie
Total Posts:  6
Posted: 06 February 2014 06:40 PM
[ # 5 ]

But at least some defined attributes other than class and id are not stripped out.  For example, this:

<ol type="i"

is not touched and with this in the style:

ol[type="i"] {list-style-type:disc;

it does work to display an ol as an unordered list…in Gmail!


 

churchcommunitybuilder

Avatar
Newbie
Total Posts:  6
Posted: 06 February 2014 08:24 PM
[ # 6 ]

Wait, Gmail supporting the style element isn’t new! RJ knew about this on Jan 24, 2014 (and how long before that?). How long has this been around and why is everyone still saying Gmail doesn’t support the style element?