Gmail stripping class / id / data-attribute - alternative way not working

问题

I'm currently creating a responsive email template, and i have got to the testing stage and found out that Google remove any classes you add to your tables.

I have tried using an ID as well, but they strip that as well as any data-attributes I tried.

I read up about this alittle and came across a little trick to bypass this. I managed to get this to work, but not it seems to be broken again. This trick is as follows

<table id="container" lang="x-container" title="container" class="container" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px;margin: 0 auto;">

and the CSS would be

[title~=container] {
    width: 100% !important;
}

but Google seems to strip that form my styling. Once i add * in front of the selector it stays in my css but my element doesnt seem to pick it up.

So my question is. What is the best way to target an element in gmail with media queries if you cant use ID or Class?

回答1:

You can use the following:

* [summary~='fakeclassname'] {
    styles: here;
}

"Summary" is one of the attributes that Gmail does not strip out. After it occurred to me what Gmail was actually doing to emails I found this article that breaks it down in detail:

http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/

There are helpful links on that page that get deeper into Gmail-specific targeting.

EDIT: it appears Exact Target strips out the "summary" attribute in ET Send Preview. The "title" attribute works fine if you want it to look correct in both Gmail and ET Preview.

回答2:

This approach seems to do the job for me currently:

Styles in <head> of your e-mail template (these are removed in Gmail, but do apply for other clients):

<style type="text/css">

    /* Styles below are applied on all clients except Gmail */


    /* Desktop */

    div[id=tablet],
    div[id=mobile]{
        display: none;
    }


    /* Tablet */

    @media only screen and (max-device-width: 1024px){
        div[id=desktop],
        div[id=mobile]{
            display: none !important;
        }

        div[id=tablet]{
            display: block !important;
            font-size: 15px !important;
            max-height: none !important;
            overflow: visible !important;
        }
    }


    /* Phone */

    @media only screen and (max-device-width: 736px){
        div[id=desktop],
        div[id=tablet]{
            display: none !important;
        }

        div[id=mobile]{
            display: block !important;
            font-size: 15px !important;
            max-height: none !important;
            overflow: visible !important;
        }
    }

</style>

HTML:

<body>

    <div id="desktop">
        [template for desktop]
    </div>

    <div id="tablet" style="font-size: 0; max-height: 0; overflow: hidden;">
        [template for tablet]
    </div>

    <div id="phone" style="font-size: 0; max-height: 0; overflow: hidden;">
        [template for phone]
    </div>

</body>

来源：https://stackoverflow.com/questions/29925325/gmail-stripping-class-id-data-attribute-alternative-way-not-working

标签

html

css

gmail