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

• Normal
• Minified

CDN

• jsdelivr
• unpkg

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.