定位Yahoo Mail浏览器CSS [英] Targeting Yahoo Mail browser CSS

问题描述

我想知道是否有人想出了一个针对浏览器上的Yahoo Mail CSS的黑客攻击。
具体来说，不是内联CSS，而是Yahoo在电子邮件标签中创建的类。

I was wondering if anyone came up with a hack for targeting the Yahoo Mail CSS on browsers. Specifically, not the inline CSS but the Yahoo-created classes within a tag in an email.

我面临的问题是：我为广告活动编写了一个响应式模板，虽然一切都在iOS和每个主要邮件客户端上都能正常工作，但雅虎我没有找到任何其他地方的奇怪：它读取标签，因为它会阅读一个常规的，完全跳过媒体查询（实际上，它改变了所有被认为是样式的代码）。我的意思是这样的：它会从底部到顶部读取样式，因此，即使在大型设备（如计算机屏幕）上阅读，也会将较小的屏幕样式应用于电子邮件。

The problem that I am facing is this: I coded a responsive template for a campaign, and while everything works as it should on iOS and every major mail clients, Yahoo has a quirk that I have not found anywhere else: It reads the tag as it would read a regular one, completely skipping over media queries (Actually, it changes the code of everything considered as styling). What I mean by that is this: It'll read the styles from the bottom to the top, therefore applying the smaller screen styles to the email even if it is read on a big device, like a computer screen.

以下是Yahoo Mail处理后的样子：

Here is what it looks like after being processed by Yahoo Mail :

<style type="text/css">

_filtered #yiv6637726198 {
text-align:left;}
#yiv6637726198 .yiv6637726198row-center {display:table-row;text-align:center;vertical-    align:middle !important;height:20px !important;}
#yiv6637726198 

_filtered #yiv6637726198 {
}
#yiv6637726198 .yiv6637726198main {width:100%;}
#yiv6637726198 .yiv6637726198header {width:100%;}
#yiv6637726198 .yiv6637726198header-img {width:100%;height:auto;}
#yiv6637726198 .yiv6637726198logo-img {width:75px;height:30px;}
#yiv6637726198 .yiv6637726198icon-img {width:19px;height:18px;}
#yiv6637726198 .yiv6637726198icon-wrap {width:19px;}
#yiv6637726198 .yiv6637726198button {width:100%;height:auto;}
#yiv6637726198 .yiv6637726198footer {display:none;}
#yiv6637726198 .yiv6637726198footer-size {width:100%;}
#yiv6637726198 .yiv6637726198btn {width:100px !important;height:auto !important;}
#yiv6637726198 .yiv6637726198text {font-size:9px !important;text-align:center;}
#yiv6637726198 .yiv6637726198smaller {width:5px !important;height:5px !important;}
#yiv6637726198 .yiv6637726198show {display:block;}
#yiv6637726198 .yiv6637726198title {font-size:12px !important;}
#yiv6637726198 .yiv6637726198date {font-size:9px !important;line-height:14px !important;}
#yiv6637726198 .yiv6637726198smaller {width:10px !important;}
#yiv6637726198 .yiv6637726198small-hide {display:none;}
#yiv6637726198 .yiv6637726198row {display:table-row;text-align:left;}
#yiv6637726198 .yiv6637726198row-center {display:table-row;text-align:center;vertical-   align:middle !important;height:20px !important;}
#yiv6637726198 

</style> 

这里是我的代码，写在我的HTML和其他响应启用邮件客户端理解：

And here is my code, as written in my HTML and understood by other responsive-enabled mail clients :

<style type="text/css">

@media (max-width:321px) {
    .row { display:table-row !important; text-align:left !important;  }
    .row-center { display:table-row !important; text-align:center !important; vertical-align:middle !important; height:20px !important;  }
    }

    @media (max-width:241px) {
    .hide { display:none !important; }
    .main { width:100% }
    .header { width:100%; }
    .header-img { width:100%; height:auto; }
    .logo-img { width:75px; height:30px; }
    .icon-img { width:19px; height:18px; }
    .icon-wrap { width:19px; }
    .button { width:100%; height:auto; }
    .footer { display:none !important; }
    .footer-size { width:100% } 
    .btn { width:100px !important; height:auto !important }
    .text { font-size:9px !important; text-align:center !important; }
    .smaller { width:5px !important; height:5px !important; }
    .show { display:block; }
    .title { font-size:12px !important; }
    .date { font-size:9px !important; line-height:14px !important; }
    .smaller { width:10px !important }
    .small-hide { display:none !important; } 
    .row { display:table-row !important; text-align:left !important;  }
    .row-center { display:table-row !important; text-align:center !important; vertical-align:middle !important; height:20px !important;  }
    }

    </style>

（你会明白这是整个事情的一小部分，

(You'll understand this is some small part of the whole thing, as showing the full code would take too much place).

此外，我的内联CSS根据html电子邮件的需要正确完成。

Also, my inline CSS is done properly as needed for html-emails.

所以，你们有什么想法的一点黑客？
这里有一个小问题，内联！重要的是优先于媒体查询激活！重要？

So, do you guys have any idea for a little hack? And a small question here, would an inline !important have priority over a media query activated !important ?

感谢您的帮助。

// UPDATE 1 //

// UPDATE 1 //

通过一些测试，我发现通过指定 媒体查询（max-width：900px）或类似的东西，并通过样式的每个元素相同的内联样式与！important，AND通过颠倒我的媒体查询的顺序（添加一个最小宽度，订单是颠倒的），雅虎邮件会选择底部一个风格的整个电子邮件。它消除了每一个响应，但至少它不打破整个布局或伸展到月球和回来...

With some testing, I found out that by specifying a "full width" media query (max-width:900px) or something like that, and by styling every element the same as their inline styles with !important, AND by inverting the order off my media queries (Adding a min-width to those now that the order is inverted), Yahoo Mail would pick that bottom one to style the whole email. It removes every responsiveness, but at least it doesn't break the whole layout or stretch it to the moon and back...

推荐答案

这是一个已知的问题，虽然有混合报告，它已经由雅虎解决。我想不是...

This is a known issue, although there had been mixed reports that it had been resolved by Yahoo. I guess not...

这里有一些技巧来解决 Yahoo媒体查询错误

Here are some techniques to work around the Yahoo media queries bug

以下是具有操作修复的自适应模板

这篇关于定位Yahoo Mail浏览器CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！