├── .gitignore ├── .gitattributes ├── postcss.config.js ├── src ├── css │ ├── clients │ │ ├── android.css │ │ ├── gmail.css │ │ ├── apple.css │ │ └── outlook.css │ ├── index.css │ └── generic.css └── index.js ├── .editorconfig ├── .github ├── workflows │ └── nodejs.yml └── CONTRIBUTING.md ├── license ├── test └── test.js ├── .stylelintrc.json ├── package.json ├── email-normalize.css ├── readme.md ├── deprecated.md └── media └── logo.svg /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto eol=lf 2 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-import'), 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/css/clients/android.css: -------------------------------------------------------------------------------- 1 | /* Center email on Android 4.4 */ 2 | 3 | div[style*="margin: 16px 0"] { 4 | margin: 0 !important; 5 | } 6 | -------------------------------------------------------------------------------- /src/css/index.css: -------------------------------------------------------------------------------- 1 | @import "generic.css"; 2 | 3 | @import "clients/android.css"; 4 | @import "clients/apple.css"; 5 | @import "clients/gmail.css"; 6 | @import "clients/outlook.css"; 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_style = space 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | 10 | [*.{css,js}] 11 | indent_size = 2 12 | -------------------------------------------------------------------------------- /src/css/clients/gmail.css: -------------------------------------------------------------------------------- 1 | /* Normalize links in Gmail */ 2 | 3 | u + #body a { 4 | color: inherit; 5 | text-decoration: none; 6 | font-size: inherit; 7 | font-weight: inherit; 8 | line-height: inherit; 9 | } 10 | 11 | /* Hide the download button on large images */ 12 | 13 | u ~ div img + div > div { 14 | display: none; 15 | } 16 | -------------------------------------------------------------------------------- /src/css/clients/apple.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Normalize triggered links, such as dates or phone numbers, 3 | * in Apple Mail / iOS Mail 4 | */ 5 | 6 | a[x-apple-data-detectors] { 7 | color: inherit !important; 8 | text-decoration: none !important; 9 | font-size: inherit !important; 10 | font-family: inherit !important; 11 | font-weight: inherit !important; 12 | line-height: inherit !important; 13 | } 14 | -------------------------------------------------------------------------------- /src/css/clients/outlook.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Tables in Outlook on Windows 3 | * 4 | * `border-collapse` removes spaces between tables caused by border size 5 | * `mso-table-[l/r]space` ensures no left and right space is added 6 | * next to tables (Outlook specific CSS attributes). 7 | */ 8 | 9 | table { 10 | border-collapse: collapse; 11 | mso-table-lspace: 0; 12 | mso-table-rspace: 0; 13 | } 14 | 15 | /* Fix color of links, including visited, in Outlook */ 16 | 17 | span.MsoHyperlink, 18 | span.MsoHyperlinkFollowed { 19 | color: inherit !important; 20 | mso-style-priority: 99 !important; 21 | } 22 | -------------------------------------------------------------------------------- /src/css/generic.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Reset body 3 | * 4 | * Apple Mail, iOS Mail plus many more have preset margin and padding for 5 | * the HTML - this normalizes it so rendering is consistent. 6 | */ 7 | 8 | body { 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | /* 14 | * Normalize headings 15 | * 16 | * Values used are browser CSS defaults. 17 | * 18 | * Samsung Mail: older versions reset the font-size on elements 19 | * Mail.ru: resets font-size on

&

20 | * Outlook.com: resets margin on

21 | */ 22 | 23 | h1 { 24 | margin: 0.67em 0; 25 | font-size: 2em; 26 | } 27 | 28 | h2 { 29 | margin: 0.83em 0; 30 | font-size: 1.5em; 31 | } 32 | 33 | /* `html[dir] h3` increases specificity, to override Outlook.com */ 34 | 35 | h3, 36 | html[dir] h3 { 37 | margin: 1em 0; 38 | font-size: 1.17em; 39 | } 40 | -------------------------------------------------------------------------------- /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Node.js CI 5 | 6 | on: 7 | push: 8 | branches: [main] 9 | pull_request: 10 | branches: [main] 11 | 12 | jobs: 13 | build: 14 | runs-on: ubuntu-latest 15 | 16 | strategy: 17 | matrix: 18 | node-version: [12, 14, 15] 19 | 20 | steps: 21 | - uses: actions/checkout@v2 22 | - name: Use Node.js ${{ matrix.node-version }} 23 | uses: actions/setup-node@v1 24 | with: 25 | node-version: ${{ matrix.node-version }} 26 | - run: npm install 27 | - run: npm test 28 | env: 29 | CI: true 30 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Jay Oram 4 | Copyright (c) Cosmin Popovici 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 7 | 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 9 | 10 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 11 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | const test = require('ava') 2 | const data = require('../src') 3 | 4 | const allNodes = (obj, key, array) => { 5 | array = array || [] 6 | 7 | if ('object' === typeof obj) { 8 | for (let k in obj) { 9 | if (k === key) { 10 | array.push(obj[k]) 11 | } else { 12 | allNodes(obj[k], key, array) 13 | } 14 | } 15 | } 16 | 17 | return array 18 | } 19 | 20 | test('all rules contain css', t => { 21 | const cssValues = allNodes(data, 'css').every(item => item.length > 1) 22 | 23 | t.is(cssValues, true) 24 | }) 25 | 26 | test('all rules contain a description', t => { 27 | const cssValues = allNodes(data, 'description').every(item => item.length > 1) 28 | 29 | t.is(cssValues, true) 30 | }) 31 | 32 | test('deprecated rules contain valid timestamp', t => { 33 | allNodes(data, 'deprecated') 34 | .forEach(timestamp => t.not(new Date(timestamp), 'Invalid Date')) 35 | }) 36 | 37 | test('`deprecated` is undefined by default', t => { 38 | t.is(data.android['4.4'][0].deprecated, undefined) 39 | }) 40 | 41 | test('`can_inline` is undefined by default', t => { 42 | t.is(data.android['4.4'][0].can_inline, undefined) 43 | }) 44 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "block-no-empty": true, 4 | "block-opening-brace-newline-after": "always", 5 | "block-opening-brace-space-before": "always", 6 | "color-hex-case": "upper", 7 | "color-hex-length": "long", 8 | "color-no-invalid-hex": true, 9 | "comment-no-empty": true, 10 | "comment-whitespace-inside": "always", 11 | "declaration-block-semicolon-newline-after": "always", 12 | "declaration-block-trailing-semicolon": "always", 13 | "declaration-colon-space-after": "always", 14 | "declaration-colon-space-before": "never", 15 | "declaration-empty-line-before": "never", 16 | "indentation": 2, 17 | "max-empty-lines": 1, 18 | "max-line-length": 80, 19 | "no-empty-first-line": true, 20 | "no-empty-source": true, 21 | "no-extra-semicolons": true, 22 | "no-invalid-double-slash-comments": true, 23 | "no-invalid-position-at-import-rule": true, 24 | "no-irregular-whitespace": true, 25 | "property-no-unknown": [ 26 | true, 27 | { 28 | "ignoreProperties": ["/^mso-/"] 29 | } 30 | ], 31 | "rule-empty-line-before": "always", 32 | "string-no-newline": true, 33 | "string-quotes": "double", 34 | "unit-no-unknown": true, 35 | "value-list-comma-space-after": "always", 36 | "value-list-comma-space-before": "never" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@maizzle/email-normalize", 3 | "version": "1.0.0", 4 | "description": "CSS resets for default styles in email clients", 5 | "license": "MIT", 6 | "repository": "maizzle/email-normalize", 7 | "bugs": "https://github.com/maizzle/email-normalize/issues", 8 | "contributors": [ 9 | { 10 | "name": "Jay Oram", 11 | "url": "https://github.com/JayOram" 12 | }, 13 | { 14 | "name": "Cosmin Popovici", 15 | "url": "https://github.com/cossssmin" 16 | } 17 | ], 18 | "scripts": { 19 | "build": "npm run style && postcss src/css/index.css -o email-normalize.css", 20 | "style": "stylelint src/css/**/*.css", 21 | "test": "npm run style && ava", 22 | "release": "np" 23 | }, 24 | "engines": { 25 | "node": "^12.20.0 || ^14.13.1 || >=16.0.0" 26 | }, 27 | "main": "src/index.js", 28 | "files": [ 29 | "src", 30 | "email-normalize.css" 31 | ], 32 | "style": "email-normalize.css", 33 | "keywords": [ 34 | "normalize", 35 | "css", 36 | "reset", 37 | "email", 38 | "html-emails", 39 | "style" 40 | ], 41 | "publishConfig": { 42 | "access": "public" 43 | }, 44 | "devDependencies": { 45 | "ava": "^3.15.0", 46 | "np": "*", 47 | "postcss": "^8.3.5", 48 | "postcss-cli": "^8.3.1", 49 | "postcss-import": "^14.0.2", 50 | "stylelint": "^13.0.0" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /email-normalize.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Reset body 3 | * 4 | * Apple Mail, iOS Mail plus many more have preset margin and padding for 5 | * the HTML - this normalizes it so rendering is consistent. 6 | */ 7 | 8 | body { 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | /* 14 | * Normalize headings 15 | * 16 | * Values used are browser CSS defaults. 17 | * 18 | * Samsung Mail: older versions reset the font-size on elements 19 | * Mail.ru: resets font-size on

&

20 | * Outlook.com: resets margin on

21 | */ 22 | 23 | h1 { 24 | margin: 0.67em 0; 25 | font-size: 2em; 26 | } 27 | 28 | h2 { 29 | margin: 0.83em 0; 30 | font-size: 1.5em; 31 | } 32 | 33 | /* `html[dir] h3` increases specificity, to override Outlook.com */ 34 | 35 | h3, 36 | html[dir] h3 { 37 | margin: 1em 0; 38 | font-size: 1.17em; 39 | } 40 | 41 | /* Center email on Android 4.4 */ 42 | 43 | div[style*="margin: 16px 0"] { 44 | margin: 0 !important; 45 | } 46 | 47 | /** 48 | * Normalize triggered links, such as dates or phone numbers, 49 | * in Apple Mail / iOS Mail 50 | */ 51 | 52 | a[x-apple-data-detectors] { 53 | color: inherit !important; 54 | text-decoration: none !important; 55 | font-size: inherit !important; 56 | font-family: inherit !important; 57 | font-weight: inherit !important; 58 | line-height: inherit !important; 59 | } 60 | 61 | /* Normalize links in Gmail */ 62 | 63 | u + #body a { 64 | color: inherit; 65 | text-decoration: none; 66 | font-size: inherit; 67 | font-weight: inherit; 68 | line-height: inherit; 69 | } 70 | 71 | /* Hide the download button on large images */ 72 | 73 | u ~ div img + div > div { 74 | display: none; 75 | } 76 | 77 | /* 78 | * Tables in Outlook on Windows 79 | * 80 | * `border-collapse` removes spaces between tables caused by border size 81 | * `mso-table-[l/r]space` ensures no left and right space is added 82 | * next to tables (Outlook specific CSS attributes). 83 | */ 84 | 85 | table { 86 | border-collapse: collapse; 87 | mso-table-lspace: 0; 88 | mso-table-rspace: 0; 89 | } 90 | 91 | /* Fix color of links, including visited, in Outlook */ 92 | 93 | span.MsoHyperlink, 94 | span.MsoHyperlinkFollowed { 95 | color: inherit !important; 96 | mso-style-priority: 99 !important; 97 | } 98 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Thanks for your interest in contributing to `email-normalize` 😊 4 | 5 | Please take a moment to review this document before submitting a pull request. 6 | 7 | ## Adding resets 8 | 9 | If you're unsure whether you should add a new reset, please [open a Discussion](https://github.com/maizzle/email-normalize/discussions/new) first. 10 | 11 | This helps us check with the community if the code works and is not deprecated. 12 | 13 | When adding a reset: 14 | 15 | - always add it at the bottom of the `.css` file 16 | - update/create the correct `.css` in `/src/css` (client-specific, see below) 17 | - make sure to add a comment explaining the functionality 18 | - make sure you also add it to `src/index.js` in the data object 19 | - follow our [coding standards](#coding-standards) 20 | 21 | Don't worry if you don't get it right the first time, we'll help you get your PR working. 22 | 23 | ### Client-specific resets 24 | 25 | CSS resets are added in `src/css` under their own client `.css` file. 26 | 27 | If a `.css` for the email client does not exist, create it under `src/css/clients` and remember to import it in `src/css/index.css` - see the existing files for an example. 28 | 29 | ### Generic resets 30 | 31 | These are added in `src/css/generic.css`. 32 | 33 | ## Deprecated resets 34 | 35 | These are documented in `deprecated.md`, add yours at the end of the file. 36 | 37 | Deprecated resets are also added to `src/index.js`, for example: 38 | 39 | ```js 40 | { 41 | css: '#outlook a { padding: 0; }', 42 | description: 'This was used to force Outlook on Windows to provide a "View in Browser" message that the user could click to view the email in their browser', 43 | deprecated: 1451599200000, // January 2016 44 | } 45 | ``` 46 | 47 | The `deprecated` key is a timestamp that approximates when the reset was deprecated. 48 | 49 | You can generate it in JavaScript: `new Date('June 14, 2021')` 50 | 51 | If you don't know how to run that code, simply copy it and: 52 | 53 | - open your browser's Devtools (usually F12, or right-click -> inspect element) 54 | - go to the "Console" tab 55 | - paste the code and hit Enter 56 | 57 | ## Coding standards 58 | 59 | Our code formatting rules are defined in [.stylelintrc](https://github.com/maizzle/email-normalize/blob/main/.stylelintrc.json). You can check your code against these standards by running: 60 | 61 | ```sh 62 | npm run style 63 | ``` 64 | 65 | To automatically fix any style violations in your code, you can run: 66 | 67 | ```sh 68 | npm run style -- --fix 69 | ``` 70 | 71 | ## Running tests 72 | 73 | You can run the test suite using the following commands: 74 | 75 | ```sh 76 | npm test 77 | ``` 78 | 79 | Please ensure that the tests are passing when submitting a pull request. 80 | 81 | If you're adding new features to `email-normalize`, please include tests. 82 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 |
2 | email-normalize 3 |
4 |
5 |
6 | 7 | # About 8 | 9 | > CSS resets for default styles in email clients 10 | 11 | Like browsers, email clients use default styles for HTML. 12 | 13 | _Unlike_ browsers, there is little to no standardization, and email developers need to be familiar with many, constantly changing CSS reset techniques. 14 | 15 | `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. 16 | 17 | ## Install 18 | 19 | ```sh 20 | npm install @maizzle/email-normalize 21 | ``` 22 | 23 | ###### Download 24 | 25 | - [Normal](https://cdn.jsdelivr.net/npm/@maizzle/email-normalize@1.0.0/email-normalize.css) 26 | - [Minified](https://cdn.jsdelivr.net/npm/@maizzle/email-normalize@1.0.0/email-normalize.min.css) 27 | 28 | ###### CDN 29 | 30 | - [jsdelivr](https://www.jsdelivr.com/package/npm/@maizzle/email-normalize) 31 | - [unpkg](https://unpkg.com/@maizzle/email-normalize) 32 | 33 | ## Usage 34 | 35 | ### In CSS: 36 | 37 | ```css 38 | @import 'node_modules/@maizzle/email-normalize/email-normalize.css'; 39 | ``` 40 | 41 | ### In HTML: 42 | 43 | ```html 44 | 45 | ``` 46 | 47 | ### In PostCSS: 48 | 49 | ```css 50 | @import '@maizzle/email-normalize'; 51 | ``` 52 | 53 | ### In your app: 54 | 55 | ```js 56 | const rules = require('@maizzle/email-normalize') 57 | ``` 58 | 59 | `rules` is an object containing CSS resets organized by email client. 60 | 61 | Example: 62 | 63 | ```js 64 | module.exports = { 65 | generic: [ 66 | { 67 | css: 'img { -ms-interpolation-mode: bicubic !important; }', 68 | 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.', 69 | can_inline: true, 70 | deprecated: 1655240400000, // June 15, 2022 71 | } 72 | ] 73 | } 74 | ``` 75 | 76 | In this example, the `generic` key represents the email client. 77 | 78 | #### Rule keys 79 | 80 | Each `rule` object includes several keys that you can use. 81 | 82 | #### `css` 83 | 84 | Type: `string` 85 | 86 | The CSS code, without line breaks or comments. 87 | 88 | #### `description` 89 | 90 | Type: `string` 91 | 92 | A description of what the reset does (or did). 93 | 94 | #### `can_inline` 95 | 96 | Type: `undefined|boolean`\ 97 | Default: `undefined` 98 | 99 | Boolean indicating if the CSS reset can be used inline. 100 | 101 | #### `deprecated` 102 | 103 | Type: `undefined|number`\ 104 | Default: `undefined` 105 | 106 | Timestamp indicating the date when the CSS reset was deprecated. 107 | 108 | These are approximations based on personal experience, unless otherwise noted. 109 | 110 | ## Credits 111 | 112 | Name and logo inspired by [modern-normalize](https://github.com/sindresorhus/modern-normalize/). 113 | 114 | Free ["merge" SVG icon](https://www.flaticon.com/free-icon/merge_3580192) by [mavadee](https://www.flaticon.com/authors/mavadee). 115 | -------------------------------------------------------------------------------- /deprecated.md: -------------------------------------------------------------------------------- 1 | # Deprecated 2 | 3 | All of the following resets have been tested and are no longer necessary. 4 | 5 | ### #outlook a 6 | 7 | Deprecated: 2016? 8 | 9 | ```css 10 | #outlook a { 11 | padding: 0; 12 | } 13 | ``` 14 | 15 | This was used to force Outlook on Windows to provide a "View in Browser" message that the user could click to view the email in their browser. 16 | 17 | While this was never intended for _styling_ purposes, we've included it since it can (still!) be commonly found in 'email reset boilerplate' code, and it can be safely removed. 18 | 19 | ### .ReadMsgBody 20 | 21 | Deprecated: February 2021 22 | 23 | ```css 24 | .ReadMsgBody { 25 | width: 100%; 26 | } 27 | ``` 28 | 29 | The `.ReadMsgBody` class was used to force Hotmail/Outlook.com to display the email at full width. 30 | 31 | ### .ExternalClass 32 | 33 | Deprecated: February 2021 34 | 35 | ```css 36 | .ExternalClass { 37 | width: 100%; 38 | } 39 | ``` 40 | 41 | `.ExternalClass` was also used to target Hotmail/Outlook.com. 42 | 43 | This was also used to reset the line-height: 44 | 45 | ```css 46 | .ExternalClass, 47 | .ExternalClass p, 48 | .ExternalClass span, 49 | .ExternalClass td, 50 | .ExternalClass div { 51 | line-height: 100%; 52 | } 53 | ``` 54 | 55 | ### *-text-size-adjust 56 | 57 | Deprecated: June 2021 58 | 59 | ```css 60 | * { 61 | -webkit-text-size-adjust: 100%; 62 | -ms-text-size-adjust: 100%; 63 | } 64 | ``` 65 | 66 | `webkit-` and `ms-` prefixed `text-size-adjust` were used to render font sizes under 13px - an antipattern commonly used in footer text in the past. 67 | 68 | It is now common practice to use a 14px minimum font size, for legibility. 69 | 70 | ### -ms-interpolation-mode 71 | 72 | Deprecated: [June 15, 2022](https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge#what-is-the-lifecycle-policy-for-internet-explorer-) 73 | 74 | ```css 75 | img { 76 | -ms-interpolation-mode: bicubic !important; 77 | } 78 | ``` 79 | 80 | `-ms-interpolation-mode` was used for re-sampling images that needed to stretch. 81 | 82 | Since IE8, this has been set as `bicubic`. 83 | 84 | This now only works in IE11, which also has a default of `bicubic`. Outlook also has `bicubic` set as default, so no need to specify it anymore. 85 | 86 | ### .yshortcuts a 87 | 88 | Deprecated: N/A 89 | 90 | ```css 91 | .yshortcuts, 92 | .yshortcuts:hover, 93 | .yshortcuts:active, 94 | .yshortcuts:focus { 95 | background-color: none; 96 | border: none; 97 | color: #000000; 98 | text-decoration:none; 99 | } 100 | ``` 101 | 102 | Yahoo! used to convert some keywords in your text to links. 103 | 104 | Sometimes, if you were using link names to popular items like "Washer & Dryer", Yahoo! inserted a `` inside your `` tags. 105 | 106 | ### data-outlook-cycle 107 | 108 | Deprecated: June 14, 2021 109 | 110 | ```css 111 | body[data-outlook-cycle] a { 112 | color: inherit !important; 113 | text-decoration: none; 114 | } 115 | ``` 116 | 117 | This was used to reset styling of auto-linked text in the Outlook apps (iOS and Android), but an update rolling out since June 14th 2021 has rendered this useless. 118 | 119 | ### .im 120 | 121 | Deprecated: June 2021 122 | 123 | Prevented Gmail from changing the text color in conversation threads. 124 | 125 | ```css 126 | .im { 127 | color: inherit !important; 128 | } 129 | ``` 130 | 131 | ### .a6S 132 | 133 | Deprecated: June 2021 134 | 135 | Prevented Gmail from displaying a download button on large, non-linked images. 136 | 137 | ```css 138 | .a6S { 139 | display: none !important; 140 | opacity: 0.01 !important; 141 | } 142 | ``` 143 | 144 | ### .aBn 145 | 146 | Deprecated: June 2021 147 | 148 | Prevented Gmail from auto-styling triggered links, like dates or phone numbers. 149 | 150 | ```css 151 | .aBn { 152 | border-bottom: 0 !important; 153 | cursor: default !important; 154 | color: inherit !important; 155 | text-decoration: none !important; 156 | font-size: inherit !important; 157 | font-family: inherit !important; 158 | font-weight: inherit !important; 159 | line-height: inherit !important; 160 | } 161 | ``` 162 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | android: { 3 | '4.4': [ 4 | { 5 | css: 'div[style*="margin: 16px 0"] { margin: 0 !important; }', 6 | description: 'Center email body', 7 | } 8 | ] 9 | }, 10 | apple: { 11 | all: [ 12 | { 13 | css: 'a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }', 14 | description: 'Normalize triggered links, such as dates or phone numbers', 15 | } 16 | ] 17 | }, 18 | generic: [ 19 | { 20 | css: 'body { margin: 0; padding: 0; }', 21 | description: 'Reset body margin and padding', 22 | can_inline: true, 23 | }, 24 | { 25 | css: 'h1 { margin: 0.67em 0; font-size: 2em; } h2 { margin: 0.83em 0; font-size: 1.5em; } h3 { margin: 1em 0; font-size: 1.17em; }', 26 | description: 'Normalize headings. Values used are browser CSS defaults.', 27 | can_inline: true, 28 | }, 29 | { 30 | css: '* { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }', 31 | description: 'Vendor-prefixed `text-size-adjust` properties were used to render font sizes at under 13px - an antipattern commonly used in footer text in the past.', 32 | deprecated: 1622494800000, // June 1, 2021 33 | }, 34 | { 35 | css: 'img { -ms-interpolation-mode: bicubic !important; }', 36 | 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.', 37 | can_inline: true, 38 | deprecated: 1655240400000, // June 15, 2022 39 | } 40 | ], 41 | gmail: { 42 | all: [ 43 | { 44 | css: 'u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-weight: inherit; line-height: inherit; }', 45 | description: 'Normalize links in Gmail', 46 | }, 47 | ], 48 | web: [ 49 | { 50 | css: 'u ~ div img + div > div { display: none; }', 51 | description: 'Hide the download button on large images', 52 | } 53 | ] 54 | }, 55 | outlook: { 56 | windows: [ 57 | { 58 | css: 'table { border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; }', 59 | description: 'Tables in Outlook on Windows: `border-collapse` removes spaces between tables caused by border size, `mso-table-[l/r]space` ensures no left and right space is added next to tables (Outlook specific CSS attributes)', 60 | can_inline: true, 61 | }, 62 | { 63 | css: 'span.MsoHyperlink, span.MsoHyperlinkFollowed { color: inherit !important; mso-style-priority: 99 !important; }', 64 | description: 'Fix color of links, including visited ones', 65 | }, 66 | { 67 | css: '#outlook a { padding: 0; }', 68 | description: 'This was used to force Outlook on Windows to provide a "View in Browser" message that the user could click to view the email in their browser', 69 | deprecated: 1451599200000, // January 2016 70 | } 71 | ], 72 | web: [ 73 | { 74 | css: '.ReadMsgBody { width: 100%; }', 75 | description: '`.ExternalClass` was used to target the email body in Hotmail/Outlook.com', 76 | deprecated: 1613858400000, // February 21, 2021 77 | }, 78 | { 79 | css: '.ExternalClass { width: 100%; }', 80 | description: '`.ExternalClass` was used to target the email body in Hotmail/Outlook.com', 81 | deprecated: 1613858400000, // February 21, 2021 82 | }, 83 | { 84 | css: 'html[dir] h3 { margin: 1em 0; font-size: 1.17em; }', 85 | description: 'Normalize headings - Outlook.com requires increased specificity. Values used are browser CSS defaults.' 86 | } 87 | ], 88 | ios: [ 89 | { 90 | css: 'body[data-outlook-cycle] a { color: inherit !important; text-decoration: none; }', 91 | description: 'Used to reset styling of auto-linked text in the Outlook apps (iOS and Android)', 92 | deprecated: 1623618000000, // June 14, 2021 93 | }, 94 | ], 95 | android: [ 96 | { 97 | css: 'body[data-outlook-cycle] a { color: inherit !important; text-decoration: none; }', 98 | description: 'Used to reset styling of auto-linked text in the Outlook apps (iOS and Android)', 99 | deprecated: 1623618000000, // June 14, 2021 100 | }, 101 | ] 102 | }, 103 | yahoo: { 104 | web: [ 105 | { 106 | css: '.yshortcuts, .yshortcuts:hover, .yshortcuts:active, .yshortcuts:focus { background-color: none; border: none; color: #000000; text-decoration:none; }', 107 | description: 'Yahoo! used to convert some keywords in your text to links. Sometimes, if you were using link names to popular items like "Washer & Dryer", Yahoo! inserted a `` inside your `` tags.', 108 | deprecated: 1622494800000, // June 1, 2021 109 | } 110 | ] 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /media/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | --------------------------------------------------------------------------------