About
CSS resets for default styles in email clients
Like browsers, email clients use default styles for HTML.
Unlike browsers, there is little to no standardization, and email developers need to be familiar with many, constantly changing CSS reset techniques.
email-normalize tries to help by providing an up-to-date, community-maintained list of CSS snippets that you can use to normalize styles in HTML emails.
Install
npm install @maizzle/email-normalize
Download
CDN
Usage
In CSS:
@import 'node_modules/@maizzle/email-normalize/email-normalize.css';
In HTML:
<link rel="stylesheet" href="node_modules/@maizzle/email-normalize/email-normalize.css">
In PostCSS:
@import '@maizzle/email-normalize';
In your app:
const rules = require('@maizzle/email-normalize')
rules is an object containing CSS resets organized by email client.
Example:
module.exports = {
generic: [
{
css: 'img { -ms-interpolation-mode: bicubic !important; }',
description: '`-ms-interpolation-mode` was used for re-sampling images that needed to stretch. Since IE8, this has been set as `bicubic`. This now only works in IE11, which also has a default of `bicubic`. Outlook also has `bicubic` set as default.',
can_inline: true,
deprecated: 1655240400000, // June 15, 2022
}
]
}
In this example, the generic key represents the email client.
Rule keys
Each rule object includes several keys that you can use.
css
Type: string
The CSS code, without line breaks or comments.
description
Type: string
A description of what the reset does (or did).
can_inline
Type: undefined|boolean
Default: undefined
Boolean indicating if the CSS reset can be used inline.
deprecated
Type: undefined|number
Default: undefined
Timestamp indicating the date when the CSS reset was deprecated.
These are approximations based on personal experience, unless otherwise noted.
Credits
Name and logo inspired by modern-normalize.
Free "merge" SVG icon by mavadee.
12 Dec 25, 2022
10 Nov 30, 2022
4.8k Jan 3, 2023
19 Jul 12, 2022
5 Sep 27, 2022
121 Jan 2, 2023
3 Oct 4, 2022
87 Dec 28, 2022
795 Dec 23, 2022
210 Dec 28, 2022