{"id":303,"date":"2017-10-10T19:13:37","date_gmt":"2017-10-10T19:13:37","guid":{"rendered":"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?p=303"},"modified":"2017-10-10T19:57:09","modified_gmt":"2017-10-10T19:57:09","slug":"html-email-targeting-yahoo-mail-css","status":"publish","type":"post","link":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-targeting-yahoo-mail-css\/","title":{"rendered":"HTML Email &#8211; Targeting Yahoo Mail browser CSS"},"content":{"rendered":"<h2>HTML Email &#8211; Targeting Yahoo! Mail browser CSS<\/h2>\r\n<p>Yahoo! mail, specifically in Firefox and Chrome, ignores your media query declaration along with all of its conditional statements. It then renders each of the styles as if they are outside of the media query to begin with. This can become problematic when you are developing emails that have a logo in your footer, and you want to position it based on desktop or mobile view. See the image below as an example:<\/p>\r\n\r\n<img loading=\"lazy\" src=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2017\/10\/html-email-yahoo-css-media-query-bug.jpg\" alt=\"Logo that should not appear in desktop view - Yahoo! Mail\" width=\"606\" height=\"251\" class=\"alignnone size-full wp-image-305\" srcset=\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2017\/10\/html-email-yahoo-css-media-query-bug.jpg 606w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2017\/10\/html-email-yahoo-css-media-query-bug-300x124.jpg 300w\" sizes=\"(max-width: 606px) 100vw, 606px\" \/>\r\n\r\n<p>In this situation, the logo underneath the hyperlinks should be hidden, only appearing on mobile email clients. Here is the initial HTML.<\/p>\r\n\r\n<h4>HTML<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\n&lt;a href=&quot;http:\/\/www.website.com&quot; target=&quot;_blank&quot; style=&quot;text-decoration:none;color:#ffffff;&quot;&gt;\r\n   &lt;img src=&quot;logo.png&quot; alt=&quot;logo&quot; width=&quot;116&quot; height=&quot;31&quot; <b>class=&quot;show-mobile&quot; style=&quot;display:none;<\/b> border:none; border-style:none;&quot;\/&gt;\r\n&lt;\/a&gt;\r\n<\/div>\r\n<\/pre>\r\n\r\n<p>The inline style of <span class=\"white_space_pre\">display:none;<\/span> and <span class=\"white_space_pre\">class=&#8221;show-mobile&#8221;<\/span> are in bold. The former is intended to hide the logo under the links in desktop view, while the latter is meant to display the logo in mobile view.<\/p>\r\n\r\n<p>Below is the source code that is generated by the Yahoo! email client.<\/p>\r\n\r\n<img loading=\"lazy\" src=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2017\/10\/yahoo-email-source-code.jpg\" alt=\"yahoo! email html source code\" width=\"736\" height=\"128\" class=\"alignnone size-full wp-image-309\" srcset=\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2017\/10\/yahoo-email-source-code.jpg 736w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2017\/10\/yahoo-email-source-code-300x52.jpg 300w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2017\/10\/yahoo-email-source-code-650x113.jpg 650w\" sizes=\"(max-width: 736px) 100vw, 736px\" \/>\r\n\r\n<p>Yahoo! mail will prepend the following string \u201cyiv##########\u201d to your inline css that is used to show the element in mobile devices, as you can see it does so with <span class=\"white_space_pre\">class=&#8221;show-mobile&#8221;<\/span>.<\/p>\r\n\r\n<p>Despite the fact that there is now a Yahoo! media query that will fix this bug, attribute selectors are still not supported. Using a CSS rule as shown below, will not work when trying to target the Yahoo! generated CSS class.<\/p>\r\n\r\n<h4>CSS<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\n[class^=\"yiv\"][class=$=\u201dshow-mobile\u201d] {\r\n   display: none;\r\n} \r\n<\/div>\r\n<\/pre>\r\n\r\n<p>Just for kicks, even if you explicitly create a rule for the generated class, it will still not work:<\/p>\r\n\r\n<h4>CSS<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\n[class=\u201dyiv0779069323show-mobile\u201d]\r\n   display:none;\r\n}\r\n<\/div>\r\n<\/pre>\r\n\r\n<p>Using the Yahoo! media query will do the trick and hide the logo.<\/p>\r\n\r\n<h4>CSS<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\n@media screen yahoo {\r\n   span[class=\"show-mobile\"] {\r\n      display: none !important;\r\n   }\r\n}\r\n<\/div>\r\n<\/pre>\r\n\r\n<p>See the intended result below.<\/p>\r\n\r\n<img loading=\"lazy\" src=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2017\/10\/html-email-logo-footer-desktop-view.jpg\" alt=\"Logo in footer for desktop view - Yahoo! mail\" width=\"603\" height=\"201\" class=\"alignnone size-full wp-image-311\" srcset=\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2017\/10\/html-email-logo-footer-desktop-view.jpg 603w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2017\/10\/html-email-logo-footer-desktop-view-300x100.jpg 300w\" sizes=\"(max-width: 603px) 100vw, 603px\" \/>\r\n\r\n<p>Please note that I discovered that this problem only happens in Firefox and Chrome only, not in IE.<\/p>\r\n\r\n<p>The Email on Acid website has two terrific articles on their website that were of great help when trying to solve this problem, <a href=\"https:\/\/www.emailonacid.com\/blog\/article\/email-development\/9_ways_to_prevent_yahoo_headaches#yahoo_tip8\" target=\"_blank\">https:\/\/www.emailonacid.com\/blog\/article\/email-development\/9_ways_to_prevent_yahoo_headaches#yahoo_tip8<\/a> and <a href=\"https:\/\/www.emailonacid.com\/blog\/article\/industry-news\/yahoo_mail_now_supports_media_queries\">https:\/\/www.emailonacid.com\/blog\/article\/industry-news\/yahoo_mail_now_supports_media_queries<\/a><\/p>","protected":false},"excerpt":{"rendered":"HTML Email &#8211; Targeting Yahoo! Mail browser CSS Yahoo! mail, specifically in Firefox and Chrome, ignores your media query declaration along with all of its conditional statements. It then renders each of the styles as if they are outside of the media query to begin with. This can become problematic when you are developing emails [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[1],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Yahoo! Mail rendering issues - CSS media queries<\/title>\n<meta name=\"description\" content=\"Here is a work around for problems that may arise due to Yahoo! Mail not supporting media queries in your CSS for mobile devices.\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Yahoo! Mail rendering issues - CSS media queries\" \/>\n<meta property=\"og:description\" content=\"Here is a work around for problems that may arise due to Yahoo! Mail not supporting media queries in your CSS for mobile devices.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-targeting-yahoo-mail-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development Reference\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-10T19:13:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-10T19:57:09+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2017\/10\/html-email-yahoo-css-media-query-bug.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Web Development Reference\",\"description\":\"Web Development Solutions Explained -- Easy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-targeting-yahoo-mail-css\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2017\/10\/html-email-yahoo-css-media-query-bug.jpg\",\"contentUrl\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2017\/10\/html-email-yahoo-css-media-query-bug.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-targeting-yahoo-mail-css\/#webpage\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-targeting-yahoo-mail-css\/\",\"name\":\"Yahoo! Mail rendering issues - CSS media queries\",\"isPartOf\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-targeting-yahoo-mail-css\/#primaryimage\"},\"datePublished\":\"2017-10-10T19:13:37+00:00\",\"dateModified\":\"2017-10-10T19:57:09+00:00\",\"author\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\"},\"description\":\"Here is a work around for problems that may arise due to Yahoo! Mail not supporting media queries in your CSS for mobile devices.\",\"breadcrumb\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-targeting-yahoo-mail-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-targeting-yahoo-mail-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-targeting-yahoo-mail-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-targeting-yahoo-mail-css\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-email-targeting-yahoo-mail-css\/\",\"name\":\"HTML Email &#8211; Targeting Yahoo Mail browser CSS\"}}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7o7aF-4T","_links":{"self":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/303"}],"collection":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/comments?post=303"}],"version-history":[{"count":5,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/303\/revisions"}],"predecessor-version":[{"id":312,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/303\/revisions\/312"}],"wp:attachment":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/media?parent=303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/categories?post=303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/tags?post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}