{"id":36337,"date":"2023-05-25T16:55:52","date_gmt":"2023-05-25T11:25:52","guid":{"rendered":"https:\/\/email.uplers.com\/blog\/?p=36337"},"modified":"2024-05-23T10:49:24","modified_gmt":"2024-05-23T05:19:24","slug":"conditional-css-for-email","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/conditional-css-for-email\/","title":{"rendered":"Conditional CSS for Email ~ The Developer\u2019s Guide To Crafting Responsive Emails"},"content":{"rendered":"\n

Ask any email developer worth his salt about his Achilles Heel, and they are most likely to point out the elusiveness of crafting an HTML email that renders uniformly across email clients and devices. While we are all familiar with the issues MSO (Microsoft Outlook) poses in crafting that \u201cuniversal renderable HTML template,\u201d in the text that follows, we will attempt to find a solution to this white whale of every developer. <\/p>\n\n\n\n

The Issue At Hand<\/h2>\n\n\n\n

Before we get to the solution, let\u2019s understand the complexities of the issue at hand. Since its 2007 version, Outlook started employing the services of the Word processor in order to render its emails, which in turn comes with its own challenges, such as its limits on renderable CSS styles, certain HTML tags, and their parameters. <\/p>\n\n\n\n

Even though Outlook has the provision of deploying VML (Vector Markup Language) in rendering email templates, it works only on Outlook 2007-2013 version; therefore, developers have to use CSS styles or HTML code differently compared to other email clients that may use Webkit, for instance. <\/p>\n\n\n\n

The Solution In Sight <\/h2>\n\n\n\n

When the need arises to code separately for MSO and other email clients, conditional code steps in to save the day. Also known as MSO conditional statements or conditional comments, it has the potential to iron out many difficulties that email developers<\/a> face on a daily basis. Let\u2019s see how that works out.<\/p>\n\n\n\n

What is the Meaning of Conditional Code?<\/h2>\n\n\n\n

Simply said, much like its name, conditional code deploys \u201cif-then\u201d statements to specify actions to be carried out when a particular statement is true. For instance, \u201cIf X is true, then execute Y.\u201d In this particular piece of code, X will be executed only when condition Y is met. <\/p>\n\n\n\n

One might say that complex conditional code can only be deployed by programming languages like PHP, Python, JavaScript, C#, etc.; however, markup languages like HTML presented by style sheets like CSS (Cascade Styling Sheets) can handle a limited set of conditional statements. This can help developers to present platform-specific content through a range of different clients and devices. Conditional comments can help you target a plethora of versions of MSO and render emails seamlessly across a range of devices using Conditional CSS via media queries or employ fallback classes within your <style> tags in your email <head>.  You could finally deploy those stellar email newsletter templates<\/a> that you envisioned for your brand! <\/p>\n\n\n\n

Conditional Comments with MSO<\/h2>\n\n\n\n

Microsoft developed MSO tags (<!– and \u2192) so that they could be recognized, and their content will be displayed specifically by Outlook. These comments allow developers to add a specific piece of code or a styled element that might have been ignored in their HTML documents. Incidentally, as you might be aware, HTML comments are mostly ignored by email clients and browsers. <\/p>\n\n\n\n

However, T-online is one email client that will render all comments effectively. Therefore if your emails are directed to t-online.de domains, you must hide comments<\/a> from that client. <\/p>\n\n\n\n

<\/div>
<\/div>
<\/div><\/div>
Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>
<!--[if mso]>\n<table><tr><td>\n<p>Content type here \/\/ It will display only in outlook.<\/p>\n<\/td><\/tr><\/table>\n<![endif]--><\/code><\/pre><\/div><\/div>\n\n\n\n
\"Conditional<\/figure><\/div>\n\n\n\n
In the above example, only Outlook will be able to process and deploy the table and its contents whilst other email clients won\u2019t be able to read the comments and use the styles. <\/p>\n\n\n\n
Let\u2019s have a look at some of the codes you can use as per your bespoke need:<\/p>\n\n\n\n