{"id":108,"date":"2014-01-06T07:43:06","date_gmt":"2014-01-06T07:43:06","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=108"},"modified":"2015-04-10T09:40:38","modified_gmt":"2015-04-10T09:40:38","slug":"why-not-to-put-regular-css-under-media-query-blocks-the-yahoo-mail-edition-part-1","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/why-not-to-put-regular-css-under-media-query-blocks-the-yahoo-mail-edition-part-1\/","title":{"rendered":"Why Not to Put Regular CSS Under Media Query Blocks [Yahoo! Mail]"},"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 column is no longer relevant! :)<\/i><BR><\/p>\n<p>In a <a href=\"https:\/\/freshinbox.com\/blog\/how-to-limit-email-interactivity-to-non-mobile-clients\/\">previous blog post<\/a> we saw how Yahoo! Mail mangles media queries and how we can address it. However there is a less well known, adverse effect that arises from Yahoo! Mail&#8217;s mangling of CSS. If you have CSS rules after \u00a0Media Query blocks, it can get frustrating trying to figure out why Yahoo! Mail seems to be enabling and disabling rules seemingly at random.<\/p>\n<p>Here&#8217;s an example:<\/p>\n<pre class=\"lang:default decode:true\">&lt;style&gt;\r\n.box1, .box2 {\r\n display: inline-block;\r\n width: 50px;\r\n height: 50px;\r\n border: 1px solid black;\r\n}\r\n\r\n\u00a0@media only screen and (max-device-width: 480px) {\r\n .random-rule1 { height: 50px; }\r\n}\r\n\r\n.box1 {\r\n background-color: blue;\r\n}\r\n\r\n.box2 {\r\n background-color: red;\r\n}\r\n&lt;\/style&gt;\r\n&lt;div class=\"box1\"&gt;box1&lt;\/div&gt;\r\n&lt;div class=\"box2\"&gt;box2&lt;\/div&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>From the above code block, you&#8217;d expect to see two squares with the first one colored blue and the second one red.<\/p>\n<style><!--\n.box1, .box2 {\ndisplay: inline-block;\nwidth: 50px;\nheight:50px;\nborder:1px solid black;\n}\n--><\/style>\n<div class=\"box1\" style=\"background-color: blue;\">box1<\/div>\n<div class=\"box2\" style=\"background-color: red;\">box2<\/div>\n<p>&nbsp;<\/p>\n<p>However if the same code was sent in an email and rendered in Yahoo! Mail, the first square would have a white background instead of blue.<\/p>\n<div class=\"box1\" style=\"background-color: white;\">box1<\/div>\n<div class=\"box2\" style=\"background-color: red;\">box2<\/div>\n<p>&nbsp;<\/p>\n<p>This happens because the CSS rule that sets box1&#8217;s background to blue is mangled by Yahoo! Mail&#8217;s processing of CSS since it appears right after the Media Query block. Although most people already place Media Queries at the bottom of the style block, this adds another reason not to place regular CSS under Media Query blocks. However it is possible to place a bogus rule right after the block to address this problem.<\/p>\n<pre class=\"lang:default mark:6 decode:true\">...\r\n@media only screen and (max-device-width: 1024px) {\r\n.random-rule1 { height:50px; }\r\n}\r\n\r\n.yfix {}\r\n\r\n.div1 {\r\nbackground-color: blue;\r\n}\r\n...<\/pre>\n<p>&nbsp;<\/p>\n<h4>The Key Take Away<\/h4>\n<p>In part two I&#8217;ll go into detail to explain what appears to be happening but in order to make sure your Media Queries and CSS are not producing unwanted results in Yahoo! Mail follow these two rules:<\/p>\n<p>1) Make sure to write your Media Query CSS rules according to the tips given by <a href=\"http:\/\/www.campaignmonitor.com\/blog\/post\/3457\/media-query-issues-in-yahoo-mail-mobile-email\/\" target=\"_blank\">Campaign Monitor<\/a> and <a href=\"http:\/\/www.emailonacid.com\/blog\/details\/C13\/stop_yahoo_mail_from_rendering_your_media_queries\" target=\"_blank\">Email on Acid<\/a>.<br \/>\n2) Place regular CSS above Media Query blocks.<\/p>\n<p>For more information on what exactly appears to be happening see <a href=\"https:\/\/freshinbox.com\/blog\/how-yahoo-mails-mangling-of-media-queries-affects-your-css\/\">How Yahoo! Mail&#8217;s Mangling of Media Queries affects your CSS<\/a><br \/>\n<BR><BR><br \/>\n<b>Update:<\/b><BR><br \/>\nThis  problem also happens if you put CSS right under a comment as well. But since most mailers strip comments before an email is sent this is less likely to be a problem.<BR><BR><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In a <a href=\"http:\/\/freshinbox.com\/blog\/how-to-limit-email-interactivity-to-non-mobile-clients\/\">previous blog post<\/a> we saw how Yahoo! Mail mangles media queries and how we can address it. However there is a less well known, adverse effect that arises from Yahoo! Mail&#8217;s mangling of CSS. If you have CSS rules after \u00a0Media Query blocks, it can get frustrating trying to figure out why Yahoo! Mail seems to be enabling and disabling rules seemingly at random&#8230;<\/p>\n","protected":false},"author":2,"featured_media":142,"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\/108"}],"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=108"}],"version-history":[{"count":40,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/108\/revisions"}],"predecessor-version":[{"id":1636,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/108\/revisions\/1636"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/142"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}