Arguably, one of the most exciting aspects of web development in recent years has been a significantly more consistent level of support for new HTML, CSS, and ECMAScript (JavaScript) standards amongst web browsers. However, the same cannot be said for email clients despite the introduction of fresh features such as media queries, flex, rem units, and more.
Let’s take a look at some of these features and how we can make them work for all email clients, in 2022.
Internal CSS
Undoubtedly, one of the most annoying aspects of creating emails is having to declare styles for every individual element within its style attribute (for example <element style=”style:value;”></element>), otherwise known as ‘inline CSS’.
Luckily, internal CSS (i.e. styles written within a <style> element) has more support now. Internal CSS is way more efficient since it enables us to combine selectors and write less code that’s more readable.
According to Can I Email, internal CSS works in 84.85% of today’s email clients, but there are a few rules that must be followed in order to make this happen.
Luckily, all of the rules can be complied with by using two <head> elements/inserting the <style> element into the second one. See the example below…
Online Email Template Builder
With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
Try FreeOther Products
<head>
…
</head>
<head>
<style>
…
</style>
</head>
However, while the days of styling using ancient XHTML attributes (e.g. <element align=”center”>) are over, support for internal CSS isn’t as high as we’d like it to be, so many email developers still choose inline CSS depending on the target audience.
It’s worth noting that some features (e.g. media queries and custom fonts) can’t be ‘inlined’, so a common approach to coding emails is to use internal CSS for progressive enhancements only and inline CSS for everything else (unless you’d be willing to forfeit custom fonts and cool layouts, of course).
It’s not an ideal approach, but it is what it is.
Note: external CSS (i.e. the <link rel=”stylesheet”> method) only works in 21.21% of today’s email clients, which is a huge shame because it somewhat rules out creating email design systems.
Media Queries
Internal CSS allows us to use media queries, a necessary component of responsive design. Without media queries, emails can end up looking dreadfully linear, and while there’s absolutely nothing wrong with that from a minimalist viewpoint, a vertical design won’t be the right choice in every scenario.
Media queries only work in 75.75% of modern email clients so we recommend designing responsive layouts that degrade into vertical layouts very gracefully.
Additionally, there are some rules to remember…
- Avoid nested media queries
- Limit conditions to screen, min-width, and max-width or omit them entirely (@media { … })
</…….