{"id":15628,"date":"2014-12-10T14:57:00","date_gmt":"2014-12-10T14:57:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=15628"},"modified":"2025-12-08T11:32:28","modified_gmt":"2025-12-08T16:32:28","slug":"a-bulletproof-guide-to-using-html5-and-css3-in-email","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email","title":{"rendered":"A Bulletproof Guide to Using HTML5 and CSS3 in Email"},"content":{"rendered":"<p>\u201cYou can\u2019t use HTML5 or CSS3 in email.\u201d<\/p>\n<p>Due to their \u201climited\u201d support, the idea that using HTML5 and CSS3 in email is &#8220;impossible&#8221; remains a commonly-held notion throughout the email design industry. However, we&#8217;re calling it a complete myth.<\/p>\n<p>While support certainly isn\u2019t universal, many of the leading email clients support HTML5 and CSS3. In fact, about <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/emailclientmarketshare.com\" target=\"_blank\" rel=\"noopener noreferrer\">50% of the total market<\/a> and 3 out of the top 5 email clients support them. Support may be even bigger for your particular audience.<\/p>\n<p>But, what about the clients that don\u2019t support these advanced functionalities? How will your email look to those subscribers? When it comes to email, it\u2019s all about providing your subscribers with a great experience. However, this doesn\u2019t mean that your email has to look the same across every client\u2014it just needs to be easily accessible for all of your subscribers.<\/p>\n<p>Two of our favorite email rockstars\u2014Jonathan Kim and Brian Graves\u2014have emphasized the varying approaches being used: defensive email design and progressive enhancement.<\/p>\n<h3>Defensive email design<\/h3>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/hijonathan\" target=\"_blank\" rel=\"noopener noreferrer\">Jonathan Kim<\/a> presented \u201c<a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/learning\/34-pushing-the-limits-of-email\" target=\"_blank\" rel=\"noopener noreferrer\">Pushing the Limits of Email<\/a>\u201d at our Mobile Masterclass workshop. During his talk, Jonathan coined the term <strong>defensive email design<\/strong> to explain the current state of email design.<\/p>\n<p>He explained that email designers are stuck in an archaic state of design due to some email clients having limited CSS support. He advocated for email designers to start designing for the clients that support web rendering engines first in order to advance the email design industry.<\/p>\n<h3>Progressive enhancement<\/h3>\n<p>In a similar fashion, at <a rel=\"noopener\" href=\"https:\/\/litmus.com\/conference\" target=\"_blank\" rel=\"noopener noreferrer\">The Email Design Conference 2014<\/a>, <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/briangraves\" target=\"_blank\" rel=\"noopener noreferrer\">Brian Graves<\/a>, UI designer at DEG, presented on \u201cWinning the Design Battle on Every Screen.\u201d The main focus of his talk was on <strong>progressive enhancement<\/strong>, which involves providing advanced functionality in environments where its supported.<\/p>\n<p>He also emphasized the importance of graceful degradation. Graceful degradation means that if your subscriber\u2019s email client doesn\u2019t support a certain functionality, you\u2019ll still provide them with a pleasant experience.<\/p>\n<div id=\"wistia_8dhppa3j18\" class=\"wistia_embed\" style=\"width: 495px; height: 278px;\"><\/div>\n<p><script type=\"text\/javascript\" src=\"\/\/fast.wistia.com\/assets\/external\/E-v1.js\"><\/script><script type=\"text\/javascript\">\/\/ <\/script><\/p>\n<p>An escalator is a great example of progressive enhancement and graceful degradation in real life. The late comedian Mitch Hedberg joked, \u201cAn escalator can never break: it can only become stairs. You should never see an Escalator Temporarily Out Of Order sign, just Escalator Temporarily Stairs. Sorry for the convenience.\u201d Regardless of its environment, an escalator maintains its functionality.<\/p>\n<h2>IMPLEMENTING PROGRESSIVE ENHANCEMENT FOR HTML5 + CSS3<\/h2>\n<p>Using progressive enhancement is the most efficient way to approach email design. We know that using conventional HTML5 and CSS3 in email causes a lot of rendering problems across clients. Fallback support is very inconsistent\u2014some HTML and CSS have solid fallbacks whereas others don\u2019t. Different quirks pop up in individual clients. Using standard HTML5 and CSS3 requires a lot more testing and slows down development. So, what is the best way to actually implement progressive enhancement in email?<\/p>\n<p>Using HTML5 and CSS3 in email doesn\u2019t have to be difficult. It doesn\u2019t require endless hours of troubleshooting in quirky email clients (we\u2019re looking at you, Outlook). All it takes is the proper framework to quickly implement HTML5 and CSS3 without the hassle or fear of running into rendering problems. And, lucky for you, we have that framework!<\/p>\n<p>Here is the single greatest line of code ever made for email designers and developers:<\/p>\n<pre><code style=\"background: #333; color: #fff;\">@media screen and (-webkit-min-device-pixel-ratio:0) {\n  \/* Insert styles here *\/\n}<\/code><\/pre>\n<p>This media query only targets WebKit-supported email clients\u2014which have incredible support for HTML5 and CSS3. This media query allows you to use of modern techniques like HTML5 video, CSS3 animation, <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/\">web fonts<\/a>, and more.<\/p>\n<p>This approach also splits email development for modern email clients and older clients in two. You can use Safari\/Chrome to test and develop modern techniques for WebKit-supported clients while using Firefox for your baseline experience for older clients like Outlook.<\/p>\n<p>Approaching email development this way transitions more of the quality assurance (QA) process to the browser instead of the email client. It gives email designers more power, control, and confidence in developing an email that will render gracefully across all email clients.<\/p>\n<div style=\"background: #f6f6f6; border: 1px solid #ddd; border-radius: 10px; padding: 15px; margin: 35px 0;\">\n<table style=\"border: 0; margin: 0;\" width=\"100%\">\n<tbody>\n<tr>\n<td style=\"border: 0;\" colspan=\"2\" valign=\"bottom\">\n<p style=\"margin: 0; font-weight: bold; font-size: 14px; text-align: center;\">WebKit Targeting Media Query Support in Email Clients<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0;\">\n<p style=\"margin: 0;\">Apple Mail<\/p>\n<\/td>\n<td style=\"border: 0;\" align=\"center\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/check-green.png\" alt=\"check-green\" width=\"15\" height=\"15\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0;\">\n<p style=\"margin: 0;\">iOS (iPhone \/ iPad)<\/p>\n<\/td>\n<td style=\"border: 0;\" align=\"center\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/check-green.png\" alt=\"check-green\" width=\"15\" height=\"15\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0;\">\n<p style=\"margin: 0;\">Android Mail 2.3<\/p>\n<\/td>\n<td style=\"border: 0;\" align=\"center\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/check-green.png\" alt=\"check-green\" width=\"15\" height=\"15\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0;\">\n<p style=\"margin: 0;\">Android Mail 4.2<\/p>\n<\/td>\n<td style=\"border: 0;\" align=\"center\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/check-green.png\" alt=\"check-green\" width=\"15\" height=\"15\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0;\">\n<p style=\"margin: 0;\">AOL Mail (Chrome)<\/p>\n<\/td>\n<td style=\"border: 0;\" align=\"center\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/check-green.png\" alt=\"check-green\" width=\"15\" height=\"15\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0;\">\n<p style=\"margin: 0;\">Outlook 2011 + 2015 (Mac)<\/p>\n<\/td>\n<td style=\"border: 0;\" align=\"center\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/check-green.png\" alt=\"check-green\" width=\"15\" height=\"15\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Check out these <a rel=\"noopener\" href=\"https:\/\/litmus.com\/pub\/6dd5ca6\" target=\"_blank\" rel=\"noopener noreferrer\">Litmus test results<\/a>, which shows support for WebKit targeting media queries. It should be noted that Gmail\u2014both as a webmail client and mobile app\u2014does not support media queries, so the tests are not valid for those screenshots.<\/p>\n<p>You can also target Gecko (Firefox) rendering with this media query:<\/p>\n<pre><code style=\"background: #333; color: #fff;\">@-moz-document url-prefix() {\n  \/* Insert styles here *\/\n}<\/code><\/pre>\n<p>Few clients have Gecko (Firefox) as a rendering engine, which is why it\u2019s best to target WebKit for your enhanced version of your email. But, it\u2019s easy to simply add in the same functionality WebKit rendering engines have with this media query for certain clients like Thunderbird.<\/p>\n<p>Are there other ways to implement HTML5 and CSS3 in email besides this method? Yes. But, we believe this technique is the fastest way to develop\u2014as well as the most bulletproof. It minimizes the amount of development work needed for quirky email clients like Outlook and focuses on browser-based testing.<\/p>\n<h2>SUMMING IT UP: TIPS FOR PROGRESSIVE ENHANCEMENT<\/h2>\n<h3>Know your audience<\/h3>\n<p>Where are your subscribers opening your emails? Are they using clients with great CSS and HTML support, like iPhone and Apple Mail? You can use <a rel=\"noopener\" href=\"https:\/\/litmus.com\/email-analytics\" target=\"_blank\" rel=\"noopener noreferrer\">Litmus\u2019 Email Analytics<\/a> tool to figure out which email apps are most popular with your subscribers.<\/p>\n<p>Based off of this information, you can then determine whether progressive enhancement will work for you. For example, if a large percentage of your audience is using WebKit, which has great support for advanced functionalities, then perhaps trying out innovative techniques like HTML5 video may be a good idea!<\/p>\n<h3>Build a baseline experience<\/h3>\n<p>Build a baseline email experience for subscribers using email apps with limited support for HTML and CSS\u2014such as Outlook and Gmail\u2014before enhancing your email for other clients. Progressive enhancement should not create suboptimal experiences for other users.<\/p>\n<h3>Enhance where possible<\/h3>\n<p>Once you have a baseline experience built, enhance that experience for your other users. You can use techniques like CSS3, video, interaction, SVG, and web fonts. Remember, even the email clients with better HTML and CSS support have their own individual quirks and still require testing to see what\u2019s possible.<\/p>\n<h2>SEE IT IN ACTION: EXAMPLES OF PROGRESSIVE ENHANCEMENT IN EMAIL<\/h2>\n<p>Let\u2019s take a look at a few groundbreaking examples that use progressive enhancement in email. To view the enhancements for these emails, you must be using a WebKit-powered browser like Chrome or Safari.<\/p>\n<figure style=\"margin: -20px -38px -25px -112px;\">\n<div class=\"builder-embed-wrapper\"><\/div>\n<\/figure>\n<h3>The Email Design Conference 2014 HTML5 Video Background Email<\/h3>\n<p>To announce The Email Design Conference 2014, we decided to do some serious <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/how-to-code-html5-video-background-in-email\" target=\"_blank\" rel=\"noopener noreferrer\">progressive enhancement with an HTML5 video background<\/a>. Even though this specific technique only worked in Apple Mail and Outlook 2011 (Mac), those two clients accounted for about 40% of our audience for that particular email send.<\/p>\n<p><a rel=\"noopener\" href=\"https:\/\/litmus.com\/builder\/a908938\" target=\"_blank\" rel=\"noopener noreferrer\">View the full email here<\/a><\/p>\n<p>The HTML5 video simply fell back to a static background image for all email clients that did not support the video. Our results were amazing\u2014and so was the feedback!<\/p>\n<figure style=\"margin: -20px -38px 10px -112px;\"><script type=\"text\/javascript\" src=\"https:\/\/litmus.com\/builder\/embed\/v1.js\"><\/script><\/figure>\n<h3>B&amp;Q Interactive Carousel Email<\/h3>\n<p>One of the coolest emails of the year was B&amp;Q\u2019s interactive carousel email. For WebKit clients, the email contained a hotspot carousel where users could tap through to see different sections.<\/p>\n<p><a rel=\"noopener\" href=\"https:\/\/litmus.com\/builder\/6ba9f5f\" target=\"_blank\" rel=\"noopener noreferrer\">View the full email here<\/a><\/p>\n<p>Perhaps the most impressive part of the entire email is the fallback it used for non-WebKit emails \u2014a beautiful grid layout of the carousel that didn\u2019t hide or duplicate any content!<\/p>\n<figure id=\"post-9265 media-9265\" class=\"aligncenter\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/bq-fallback.jpg\" alt=\"b&amp;q-fallback\" \/><\/figure>\n<p>You can open the email in Firefox or Internet Explorer to view the fallback.<\/p>\n<figure style=\"margin: 35px -38px 10px -112px;\"><script type=\"text\/javascript\" src=\"https:\/\/litmus.com\/builder\/embed\/v1.js\"><\/script><\/figure>\n<h3>Litmus Builder Interactive Tour Email<\/h3>\n<p>For the launch of our new email code editor, <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/litmusbuilder.com\" target=\"_blank\" rel=\"noopener noreferrer\">Litmus Builder<\/a>, we made a fully clickable interactive tour inside of the email. Again, this technique only worked in Apple Mail and Outlook 2011 (Mac) but accounted for a large part of our audience. (*Note: The email needs to be at least 800px wide to view the tour.)<\/p>\n<p>The tour simply fell back into a static background image and a call to action to the landing page. The email was a massive success, gaining thousands of users of the product in the first few days.<\/p>\n<p><a rel=\"noopener\" href=\"https:\/\/litmus.com\/builder\/d965a91\" target=\"_blank\" rel=\"noopener noreferrer\">View the full email here<\/a><\/p>\n<h2>A FRAMEWORK FOR EMAIL DESIGN INNOVATION<\/h2>\n<pre><code style=\"background: #333; color: #fff;\">@media screen and (-webkit-min-device-pixel-ratio:0) {\n  \/* Insert styles here *\/\n}<\/code><\/pre>\n<p>This media query provides a simple framework of innovation for email designers. We can build a better experience for the majority of subscribers who have modern email clients.<\/p>\n<p>The best defense is a good offense. It\u2019s time to start playing offense. To start innovating in email design with this media query. To push email forward.<\/p>\n<p>Do it for your subscribers. For our craft. <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/for-the-love-of-email\" target=\"_blank\" rel=\"noopener noreferrer\">For the love of email<\/a>.<\/p>\n<p>We can\u2019t wait to see what we build together.<\/p>\n<p>If you use this method\u2014or develop more advanced versions of your own\u2014in your email(s), or if you have any questions about the method, please post in the comments below or, better yet, the <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\" target=\"_blank\" rel=\"noopener noreferrer\">Litmus Community<\/a>!<\/p>\n<h2>DISCOVER YOUR AUDIENCE + TEST YOUR DESIGNS<\/h2>\n<p>Feeling inspired to start pushing email forward using advanced techniques like HTML5 and CSS3? Be sure to identify your subscribers\u2019 favorite emails apps, as well as test your newly created emails.<\/p>\n<p>With Email Analytics you can understand where your subscribers are opening your emails so you can focus your progressive enhancement (and graceful degradation!) efforts.<\/p>\n<p>Testing your designs is also crucial step during this process. Consistently test across over 50+ clients and apps to ensure that your subscribers are easily accessible for your subscribers\u2014regardless of where they are opening your emails.<\/p>\n<p>Learn more about Litmus today.<\/p>\n<p><a class=\"btn medium orange\" style=\"font-weight: bold; color: #fff; font-size: 16px;\" rel=\"noopener\" href=\"https:\/\/litmus.com\/hello\">Get started today \u2192<\/a><\/p>\n<p><script src=\"\/\/platform.twitter.com\/oct.js\" type=\"text\/javascript\"><\/script><br \/>\n<script type=\"text\/javascript\"><br \/>\ntwttr.conversion.trackPid('l514s', { tw_sale_amount: 0, tw_order_quantity: 0 });<\/script><\/p>\n<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/img_5ebc0b0d43b1e.gif\" alt=\"\" width=\"1\" height=\"1\" \/><br \/>\n<img decoding=\"async\" src=\"\/\/t.co\/i\/adsct?txn_id=l514s&amp;p_id=Twitter&amp;tw_sale_amount=0&amp;tw_order_quantity=0\" alt=\"\" width=\"1\" height=\"1\" \/>\n","protected":false},"excerpt":{"rendered":"<p>\u201cYou can\u2019t use HTML5 or CSS3 in email.\u201d Due to &hellip;<\/p>\n","protected":false},"author":3,"featured_media":15629,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"blog_category":[57,53],"class_list":["post-15628","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","blog_category-observations","blog_category-tips-resources"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Bulletproof Guide to Using HTML5 and CSS3 in Email - Litmus<\/title>\n<meta name=\"description\" content=\"\u201cYou can\u2019t use HTML5 or CSS3 in email.\u201d Due to their \u201climited\u201d support, the idea that using HTML5 and CSS3 in email is &quot;impossible&quot; remains a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Bulletproof Guide to Using HTML5 and CSS3 in Email\" \/>\n<meta property=\"og:description\" content=\"\u201cYou can\u2019t use HTML5 or CSS3 in email.\u201d Due to their \u201climited\u201d support, the idea that using HTML5 and CSS3 in email is &quot;impossible&quot; remains a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-10T14:57:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-08T16:32:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/html5-css3-header-1000x525-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Bulletproof Guide to Using HTML5 and CSS3 in Email - Litmus","description":"\u201cYou can\u2019t use HTML5 or CSS3 in email.\u201d Due to their \u201climited\u201d support, the idea that using HTML5 and CSS3 in email is \"impossible\" remains a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email","og_locale":"en_US","og_type":"article","og_title":"A Bulletproof Guide to Using HTML5 and CSS3 in Email","og_description":"\u201cYou can\u2019t use HTML5 or CSS3 in email.\u201d Due to their \u201climited\u201d support, the idea that using HTML5 and CSS3 in email is \"impossible\" remains a","og_url":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2014-12-10T14:57:00+00:00","article_modified_time":"2025-12-08T16:32:28+00:00","og_image":[{"width":1000,"height":525,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/html5-css3-header-1000x525-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email"},"author":{"name":"","@id":""},"headline":"A Bulletproof Guide to Using HTML5 and CSS3 in Email","datePublished":"2014-12-10T14:57:00+00:00","dateModified":"2025-12-08T16:32:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email"},"wordCount":1607,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/html5-css3-header-1000x525-1.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email","url":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email","name":"A Bulletproof Guide to Using HTML5 and CSS3 in Email - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/html5-css3-header-1000x525-1.png","datePublished":"2014-12-10T14:57:00+00:00","dateModified":"2025-12-08T16:32:28+00:00","description":"\u201cYou can\u2019t use HTML5 or CSS3 in email.\u201d Due to their \u201climited\u201d support, the idea that using HTML5 and CSS3 in email is \"impossible\" remains a","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/html5-css3-header-1000x525-1.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/html5-css3-header-1000x525-1.png","width":1000,"height":525},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/a-bulletproof-guide-to-using-html5-and-css3-in-email#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"A Bulletproof Guide to Using HTML5 and CSS3 in Email"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=15628"}],"version-history":[{"count":4,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15628\/revisions"}],"predecessor-version":[{"id":121572,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15628\/revisions\/121572"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/15629"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=15628"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=15628"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=15628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}