{"id":144,"date":"2014-01-09T07:46:07","date_gmt":"2014-01-09T07:46:07","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=144"},"modified":"2015-04-10T09:41:26","modified_gmt":"2015-04-10T09:41:26","slug":"how-yahoo-mails-mangling-of-media-queries-affects-your-css","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/how-yahoo-mails-mangling-of-media-queries-affects-your-css\/","title":{"rendered":"How Yahoo! Mail&#8217;s Mangling of Media Queries Affects Your CSS"},"content":{"rendered":"<p><i><b>Update:<\/b> It looks like Yahoo! Mail <a href=\"https:\/\/freshinbox.com\/blog\/yahoo-mail-fixes-media-query-bug-yahoo\/\">fixed this issue<\/a>, so the advice in this post is no longer relevant! :)<\/i><BR><\/p>\n<p>The <a title=\"first part of this article\" href=\"https:\/\/freshinbox.com\/blog\/why-not-to-put-regular-css-under-media-query-blocks-the-yahoo-mail-edition-part-1\/\">first part of this article<\/a> talked about what you should be aware when creating email with Media Queries in relation to Yahoo! Mail.<\/p>\n<p>In this article we\u2019ll look at what happens when Yahoo! Mail mangles media queries. This article will be very technical in nature and may be of limited value if you&#8217;re just looking for tips. However, if you want to understand what appears to be going on &#8220;under the hood&#8221;, read on!<\/p>\n<p>Take the following code sample:<\/p>\n<pre class=\"lang:default decode:true\">&lt;style&gt;\r\n.div1, .div2, .div3 {\r\n  border: 1px solid black;\r\n  color: #dddddd;\r\n  width: 30px;\r\n  padding: 10px;\r\n  margin: 10px;\r\n  float: left;\r\n}\r\n\r\n\u00a0@media only screen and (max-device-width: 480px)  {\r\n  .random-rule {  height:50px;    }\r\n  .div3 {\r\n    background-color: green;\r\n  }\r\n}\r\n.div1 {\r\n  background-color: blue;\r\n}\r\n.div2 {\r\n  background-color: red;\r\n}\r\n&lt;\/style&gt;\r\n&lt;div class=\"div1\"&gt;div1&lt;\/div&gt;\r\n&lt;div class=\"div2\"&gt;div2&lt;\/div&gt;\r\n&lt;div class=\"div3\"&gt;div3&lt;\/div&gt;<\/pre>\n<p>When you load the above code in a regular web (non-mobile) browser, you&#8217;ll see three boxes:<\/p>\n<style><!--\n.div1, .div2, .div3 {\nborder: 1px solid black;\ncolor: #dddddd;\nwidth: 30px;\npadding: 10px;\nmargin: 10px;\nfloat: left;\n}\n@media only screen and (max-device-width: 480px)  {\n.random-rule {  height:50px;    }\n.div3 {\nbackground-color: green;\n}\n}\n.div1 {\nbackground-color: blue;\n}\n.div2 {\nbackground-color: red;\n}\n--><\/style>\n<div class=\"div1\">div1<\/div>\n<div class=\"div2\">div2<\/div>\n<div class=\"div3\">div3<\/div>\n<div style=\"clear: both;\">\n<p>&nbsp;<\/p>\n<p>The left box will be blue, the middle box will be red and the right box will be white (The media query will prevent the CSS rule that sets the third box green).<\/p>\n<p>However if the code was sent to an email and rendered in the regular web version of Yahoo! Mail, you&#8217;d see:<\/p>\n<div class=\"div1\" style=\"background-color: white;\">div1<\/div>\n<div class=\"div2\">div2<\/div>\n<div class=\"div3\" style=\"background-color: green;\">div3<\/div>\n<div style=\"clear: both;\">\n<p>&nbsp;<\/p>\n<p>Here Yahoo! Mail did two things that messed up the CSS as you intended.<br \/>\n1) It &#8220;activated&#8221; the CSS rule within the media query that was only intended to be visible on mobile devices (green box).<br \/>\n2) The first CSS rule after the media query was not activated (blue box)<\/p>\n<h4>Analysis of the Modified Media Query<\/h4>\n<p>Lets take a look at what Yahoo! Mail did to our CSS.<\/p>\n<pre class=\"lang:default decode:true \">&lt;style&gt;\r\n#yiv7320523903 .yiv7320523903div1, #yiv7320523903 .yiv7320523903div2, #yiv7320523903 .yiv7320523903div3 { \r\n  border:1px solid black;color:#dddddd;width:30px;padding:10px;margin:10px;float:left;\r\n} \r\n\r\n_filtered #yiv7320523903 { } \r\n#yiv7320523903 .yiv7320523903div3 { \r\n  background-color:green;\r\n} \r\n#yiv7320523903 \r\n\r\n#yiv7320523903 .yiv7320523903div1 { \r\n  background-color:blue;\r\n} \r\n\r\n#yiv7320523903 .yiv7320523903div2 { \r\n  background-color:red;\r\n}\r\n&lt;\/style&gt;\r\n&lt;div class=\"yiv7320523903div1\"&gt;div1&lt;\/div&gt;\r\n&lt;div class=\"yiv7320523903div2\"&gt;div2&lt;\/div&gt;\r\n&lt;div class=\"yiv7320523903div3\"&gt;div3&lt;\/div&gt;<\/pre>\n<p>We can tell Yahoo! Mail did the following things:<\/p>\n<p>1) It embedded the email in a div with the id #yiv7320523903 (not shown in the above markup and appears to be randomly generated).<br \/>\n2) It prepended the container div id to our CSS rules.<br \/>\n3) It modified the names of our CSS classes by prepending the id to it (from .div1 to .yiv7320523903div1).<\/p>\n<p>So far so good. This shouldn&#8217;t affect our CSS one bit!<\/p>\n<h4>The Bad News<\/h4>\n<p>Now the following changes mess up our intended CSS rules.<br \/>\nIt converted our media query from:<\/p>\n<pre class=\"lang:default decode:true \">@media only screen and (max-device-width: 480px)  {\r\n  .random-rule {  height:50px;    }\r\n  .div3 {\r\n    background-color: green;\r\n  }\r\n}<\/pre>\n<p>to<\/p>\n<pre class=\"lang:default decode:true \">_filtered #yiv7320523903 { } \r\n#yiv7320523903 .yiv7320523903div3 { \r\n  background-color:green;\r\n} \r\n#yiv7320523903<\/pre>\n<p>This has the following effect:<\/p>\n<p>1) The media query was replaced with a _filtered rule which as far as I know is an unsupported rule.<br \/>\n2) It moved the rule that set the third box green within the media query outside the _filtered block, effectively activating it since its no longer subject to a media query filter.<br \/>\n3) It added an incomplete rule at the bottom that just starts with #yiv7320523903<\/p>\n<p>The incomplete rule at the bottom will be interpreted by the browser as \u00a0part of the first rule originally outside the media query block as:<\/p>\n<pre class=\"lang:default decode:true \">#yiv7320523903 \r\n\r\n#yiv7320523903 .yiv7320523903div1 { \r\n  background-color:blue;\r\n}<\/pre>\n<p>Causing it to mangle the rule that sets the first box to blue.<\/p>\n<h4>The Fix<\/h4>\n<p>Applying the techniques discussed in the previous post we change our markup to:<\/p>\n<pre class=\"lang:default mark:4-6,9 decode:true \">...\r\n@media only screen and (max-device-width: 480px) \u00a0{\r\n  .random-rule { \u00a0height:50px; \u00a0\u00a0\u00a0}\r\n  .div3[class=div3] {\r\n    background-color: green;\r\n  }\r\n}\r\n\r\n.yfix{}\r\n\r\n.div1 {\r\n  background-color:blue;\r\n}\r\n...<\/pre>\n<p>Which then produces:<\/p>\n<pre class=\"lang:default mark:4-6,8-9 decode:true \">_filtered #yiv0279000434 {\r\n}\r\n\r\n#yiv0279000434 .yiv0279000434div3 .filtered99999 \u00a0{\r\n  background-color:green;\r\n}\r\n\r\n#yiv0279000434\r\n#yiv0279000434 .yiv0279000434yfix{}\r\n\r\n#yiv0279000434 .yiv0279000434div1 {\r\n  background-color:blue;\r\n}<\/pre>\n<p>The modification of the media query now produces an invalid CSS for the rule that sets the 3rd box to green so it&#8217;s not active.<\/p>\n<p>The .yfix{} bogus rule right after the media query block also neutralizes the incomplete CSS rule that is produced after a media query block.<\/p>\n<p>With the updated changes our email now displays as intended.<\/p>\n<p><b>The Key Take Away<\/b><\/p>\n<p>Until Yahoo! Mail fixes their CSS transformer code, remember these two rules when sending to recipients at Yahoo!:<\/p>\n<p>1) Craft your media query CSS rules to avoid them being enabled in Yahoo! Mail using this <a href=\"http:\/\/www.campaignmonitor.com\/blog\/post\/3457\/media-query-issues-in-yahoo-mail-mobile-email\/\" target=\"_blank\">technique<\/a>.<\/p>\n<p>2) Avoid putting regular CSS beneath your Media Query block or use the .yfix{} trick mentioned above.<\/p>\n<p><BR><br \/>\n<b>Update:<\/b><br \/>\nHaving comments in your CSS tags also causes the first CSS rule beneath a comment to be &#8220;mangled&#8221; as well. However most mailers strip comments before an email is sent so this is less likely to be a problem.<BR><BR><\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The <a title=\"first part of this article\" href=\"http:\/\/freshinbox.com\/blog\/why-not-to-put-regular-css-under-media-query-blocks-the-yahoo-mail-edition-part-1\/\">first part of this article<\/a> talked about what you should be aware when creating email with Media Queries in relation to Yahoo! Mail.<BR><BR><\/p>\n<p>In this article we\u2019ll look at what happens when Yahoo! Mail mangles media queries. This article will be very technical in nature and may be of limited value if you&#8217;re just looking for tips. However, if you want to understand what appears to be going on &#8220;under the hood&#8221;, read on&#8230;<\/p>\n","protected":false},"author":2,"featured_media":165,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,2,19],"tags":[8,11,10,5,16,9,4,14,18,15,13,22],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/144"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=144"}],"version-history":[{"count":32,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/144\/revisions"}],"predecessor-version":[{"id":1638,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/144\/revisions\/1638"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/165"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}