├── CSS-normalise.css ├── README.md ├── css-link-resets.md ├── css-normalise-no-comments.css └── old-CSS-resets.css /CSS-normalise.css: -------------------------------------------------------------------------------- 1 | /* General CSS normalisation - investigating common CSS seen in emails */ 2 | 3 | /* 4 | Normalise on all email clients 5 | Apple Mail, iOS Mail plus many more have preset margin and padding for the email body - this normalises it so rendering is consistent and designers can choose. 6 | */ 7 | 8 | body { 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | /* 14 | Fix for Outlook on Windows 15 | border-collapse to stop spaces between tables caused by border size 16 | mso-table-lspace / mso-table-rspace to ensure no left and right space is added next to tables - Outlook specific CSS attributes 17 | */ 18 | 19 | table { 20 | border-collapse:collapse; 21 | mso-table-lspace:0; 22 | mso-table-rspace:0; 23 | } 24 | 25 | /* 26 | Older versions of Samsung mail reset the font-size on

-

elements - But the newer versions don’t. 27 | Mail.ru resets font-size on

&

but other are left 28 | outlook.com resets margin on an
but others are left 29 | So I think a “normalise” on
-
would make sense 30 | / 31 | 32 | h1 { 33 | margin:0.67em 0; 34 | font-size:2em; 35 | } 36 | h2 { 37 | margin:0.83em 0; 38 | font-size:1.5em; 39 | } 40 | 41 | / html[dir] h3 is to increase specificity to override Outlook.com / 42 | html[dir] h3, h3 { 43 | margin:1em 0; 44 | font-size:1.17em; 45 | } 46 | 47 | / From here - all CSS normalisation is based on a specific email client situation / 48 | 49 | / Fix for Outlook links color fix for links and visited links / 50 | 51 | span.MsoHyperlink { 52 | color: inherit !important; 53 | mso-style-priority: 99 !important; 54 | } 55 | 56 | span.MsoHyperlinkFollowed { 57 | color: inherit !important; 58 | mso-style-priority: 99 !important; 59 | } 60 | 61 | / normalise link attributes in Apple Mail / iOS Mail apps - to match the parent element / 62 | 63 | #root [x-apple-data-detectors=true], 64 | a[x-apple-data-detectors=true]{ 65 | color: inherit !important; 66 | text-decoration: inherit !important; 67 | } 68 | 69 | / normalise link attributes in Apple Mail / iOS Mail apps for the date calendar event- to match the parent element / 70 | [x-apple-data-detectors-type="calendar-event"] { 71 | color: inherit !important; 72 | -webkit-text-decoration-color: inherit !important; 73 | } 74 | 75 | / normalise link attributes in Gmail - to match the parent element. NOTE: Need to add class="body" to the body element and a DOCTYPE must be present. / 76 | 77 | u + .body a { 78 | color: inherit; 79 | text-decoration: none; 80 | font-size: inherit; 81 | font-weight: inherit; 82 | line-height: inherit; 83 | } 84 | 85 | / Mark Robbins found iOS Gmail will add word-spacing: 1px and word-wrap: break-word 86 | https://github.com/JayOram/email-css-resets/issues/2#issue-805476023 87 | so added the below to fix that 88 | 89 | This doesn't fix GANGA - so may need to be added inline - 90 | 91 | / 92 | 93 | .body { 94 | word-wrap: normal; 95 | word-spacing:normal; 96 | } 97 | 98 | / centre email on Android 4.4 - margin reset / 99 | 100 | div[style="margin: 16px 0"] { 101 | margin: 0!important; 102 | } 103 | 104 | /* revert all styles for LaPoste webmail / 105 | 106 | #message { 107 | all:revert 108 | } 109 | 110 | /* outlook.com 'celebrations' highlight removal - this doesn't stop the animation, just the highlight and color / 111 | 112 | [data-markjs]{ 113 | color:inherit; 114 | padding:0; 115 | background:none; 116 | } 117 | 118 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # email-css-resets 2 | A repository to hold all CSS resets/normalisation from past and present email clients. 3 | 4 | The aim of these CSS files is to record CSS in use by email developers to normalise the behaviour of HTML elements across email clients. 5 | 6 | There are two types of CSS - 7 | 8 | ## 1. General CSS normalisation 9 | CSS that will affect change needed across email clients to normalise behaviour. 10 | 11 | For example: 12 | ``` 13 | table { border-collapse: collapse; } 14 | ``` 15 | 16 | With all emails currently needing to include the table HTML element, even if only for Outlook, the overall normalisation to collapse table borders will stop gaps appearing between tables and cells. 17 | 18 | ## 2. Email client specific CSS 19 | CSS that will reset/override specific styles an email client will force on HTML elements. 20 | 21 | For example: 22 | ``` 23 | u + .body a { 24 | color: inherit; 25 | text-decoration: none; 26 | font-size: inherit; 27 | font-weight: inherit; 28 | line-height: inherit; 29 | } 30 | ``` 31 | 32 | The above CSS targets link attributes in Gmail - to match the parent element. Gmail will change links to blue and add an underline, without the email developer adding those attributes. This CSS 'reset' sets the color and font attributes to inherit from the parent element and not to have an underline. 33 | 34 | 35 | Two main files - 36 | 37 | Old CSS resets
38 | Current CSS resets/normalisation 39 | 40 | I would love anyone to send updates / pull requests with any CSS resets they find in old templates or know of? 41 | 42 | Thanks to Ted Goas for updating the read me to look much better! 43 | 44 | Contributors: 45 | Mark Robbins, Rémi Parmentier and hat tip to Cosmin Popovici who has created email-normalize an npm package to use email normalise and reset CSS in builds. 46 | -------------------------------------------------------------------------------- /css-link-resets.md: -------------------------------------------------------------------------------- 1 | # CSS targeting for Links 2 | A set of CSS rules that will set the default link styling in your email. 3 | 4 | ## Intro 5 | A lot of CSS 'resets' deal with stopping email clients default link styling of blue color and underlined. Although these are not really 'resets' as it is really just a way of over writing the current styles and all links will be styled differently based on designs. It is important to share how we can target email clients and adjust the color settings for links. 6 | 7 | All of the CSS below will reset ALL links in an HTML document. So may not be the best solution if you want granular control of each link, which can be handled with class/id specifically or inline styles. Gmail App and Non-Gmail Accounts (GANGA) is the last email client still needing inline styles as the `` is ignored. 8 | 9 | ## Code 10 | Generic reset* 11 | 12 | The below meta tag sets the format detection to ignore, addresses, email, date and url - to hopefully ask the email client/browser to not adjust the format. 13 | 14 | ``` 15 | 16 | ``` 17 | 18 | The CSS below resets all links to `text-decoration: none;` and using the below we can ensure any anchor tags `` inherit the color. We need to add `!important` so that outlook .com listens to the `color: inherit`. Outlook on Windows Desktop needs `mso-color-alt: windowtext;` to inherit the text color. 19 | 20 | ``` 21 | a { 22 | color:inherit!important; 23 | mso-color-alt: windowtext; 24 | text-decoration: none; 25 | } 26 | ``` 27 | 28 | This is partially why this isn't necessarily a 'reset' as in browsers, all `` have a default of blue and are underlined, in email the behaviour is the same, but styling links in email clients needs `!important` or specific CSS targeting. 29 | 30 | Also email clients auto-link telephone, dates, addresses, email addresses and urls - which need targeting below to over write email client styles. 31 | 32 | I've seen the below in a lot of emails so thought I should include it. To use it, the body will need `id="body"` - but I have not seen email clients not inheriting the other font styles. 33 | 34 | ``` 35 | #body a { 36 | color: inherit; 37 | text-decoration: none; 38 | font-size: inherit; 39 | font-family: inherit; 40 | font-weight: inherit; 41 | line-height: inherit; 42 | } 43 | ``` 44 | 45 | ### Client specific 46 | 47 | Gmail 48 | 49 | The below needs the `` element to have the `class="body"` and the HTML needs to have a Doctype set, as Gmail turns the `` into a `` tag. 50 | 51 | ``` 52 | u + .body a { 53 | color: inherit; 54 | text-decoration: none; 55 | font-size: inherit; 56 | font-weight: inherit; 57 | line-height: inherit; 58 | } 59 | ``` 60 | 61 | Apple Mail / iOS 62 | 63 | ``` 64 | a[x-apple-data-detectors] { 65 | color: inherit!important; 66 | text-decoration: none!important; 67 | font-size: inherit!important; 68 | font-family: inherit!important; 69 | font-weight: inherit!important; 70 | line-height: inherit!important; 71 | } 72 | ``` 73 | 74 | ``` 75 | [x-apple-data-detectors-type="calendar-event"] { 76 | color: inherit !important; 77 | -webkit-text-decoration-color: inherit !important; 78 | text-decoration: none !important; 79 | } 80 | ``` 81 | 82 | Samsung Mail 83 | 84 | Note: if you include !important after the below it will remove all styling in the app. 85 | 86 | ``` 87 | #MessageViewBody a { 88 | color: inherit; 89 | text-decoration: none; 90 | font-size: inherit; 91 | font-family: inherit; 92 | font-weight: inherit; 93 | line-height: inherit; 94 | } 95 | ``` 96 | 97 | Outlook App Android - Auto generated links 98 | 99 | The class `.ms-outlook-linkify` is added to auto generated links, such as addresses. This makes the link inherit the color you have specified. 100 | 101 | ``` 102 | .ms-outlook-linkify{ 103 | color: inherit !important; 104 | } 105 | ``` 106 | 107 | Outlook App iOS 108 | 109 | This one is complicated! To overide the specificity for the 'blue' link styling. You need to include two #IDs: 110 | 111 | ``` 112 | #id1 #id2 a[x-apple-data-detectors]{ 113 | color: inherit !important; 114 | text-decoration: inherit !important; 115 | } 116 | ``` 117 | 118 | This could be set up as below: 119 | 120 | ``` 121 | 122 | 123 |
124 | 125 | 126 | 127 | ...email content... 128 |
129 | 130 |
131 | 132 | ``` 133 | 134 | Outlook Windows Desktop app 135 | 136 | ``` 137 | 144 | ``` 145 | 146 | Outlook Webmail 147 | 148 | The below needs the `` element to have the `class="body"` to ensure the CSS only targets Outlook webmail, this is done by prefixing the class with `x_` - this doesn't affect attribute selectors. 149 | 150 | ``` 151 | [class=x_body] [role=link] { 152 | border: none !important; 153 | padding: 0 !important; 154 | color: inherit !important; 155 | } 156 | ``` 157 | 158 | Thanks to [Mark Robbins](https://github.com/M-J-Robbins) and [Hussein Al Hammad](https://github.com/husseinalhammad) for finding and working on a solution. More information in [issue #11](https://github.com/JayOram/email-css-resets/issues/11). 159 | 160 | 161 | Outlook on mac 162 | 163 | Submitted by [Mark Robbins](https://github.com/M-J-Robbins) - more information in [issue #10](https://github.com/JayOram/email-css-resets/issues/10). 164 | 165 | ``` 166 | #WEBEXT{ 167 | all:revert !important; 168 | } 169 | ``` 170 | -------------------------------------------------------------------------------- /css-normalise-no-comments.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | table { 7 | border-collapse:collapse; 8 | mso-table-lspace:0; 9 | mso-table-rspace:0; 10 | } 11 | 12 | h1 { 13 | margin:0.67em 0; 14 | font-size:2em; 15 | } 16 | h2 { 17 | margin:0.83em 0; 18 | font-size:1.5em; 19 | } 20 | 21 | html[dir] h3, h3 { 22 | margin:1em 0; 23 | font-size:1.17em; 24 | } 25 | 26 | span.MsoHyperlink { 27 | color: inherit !important; 28 | mso-style-priority: 99 !important; 29 | } 30 | 31 | span.MsoHyperlinkFollowed { 32 | color: inherit !important; 33 | mso-style-priority: 99 !important; 34 | } 35 | 36 | #root [x-apple-data-detectors=true], 37 | a[x-apple-data-detectors=true]{ 38 | color: inherit !important; 39 | text-decoration: inherit !important; 40 | } 41 | 42 | u + .body a { 43 | color: inherit; 44 | text-decoration: none; 45 | font-size: inherit; 46 | font-weight: inherit; 47 | line-height: inherit; 48 | } 49 | 50 | .body { 51 | word-wrap: normal; 52 | word-spacing:normal; 53 | } 54 | 55 | div[style="margin: 16px 0"] { 56 | margin: 0!important; 57 | } 58 | 59 | #message { 60 | all:revert 61 | } 62 | 63 | [data-markjs]{ 64 | color:inherit; 65 | padding:0; 66 | background:none; 67 | } 68 | -------------------------------------------------------------------------------- /old-CSS-resets.css: -------------------------------------------------------------------------------- 1 | /* All resets in this file have been tested to see if they are still needed - check the notes 2 | above each section to find out what they did and which email client they affected. / 3 | 4 | 5 | 6 | / .ReadMsgBody was an old class for targeting hotmail/outlook.com - this reset is no longer needed (Feb 2021) / 7 | 8 | .ReadMsgBody { 9 | width: 100%; 10 | } 11 | 12 | / .ExternalClass was a class added to target Outlook.com/hotmail previously - this reset is no longer needed (Feb 2021). 13 | Added additional common use below to reset line-height - which is also no longer needed (July 2021) / 14 | 15 | .ExternalClass { ... } 16 | 17 | .ExternalClass, 18 | .ExternalClass p, 19 | .ExternalClass span, 20 | .ExternalClass td, 21 | .ExternalClass div { 22 | line-height: 100%; 23 | } 24 | 25 | / webkit and ms text-size-adjust were used to allow font sizes under 13px to be used for old footers/navigation. 26 | Most would now agree a lower limit of 14px for all text so these can now be removed - June 2021 / 27 | 28 | { 29 | -webkit-text-size-adjust: 100%; 30 | -ms-text-size-adjust: 100%; 31 | } 32 | 33 | /* -ms-interpolation-mode was used for re-sampling images that needed to stretch in the HTML - since IE8 this has been set as bicubic. 34 | This now only works in IE11 which will be deprecated soon - but also has a default of bicubic. Outlook also has bicubic set as default, 35 | so no need to specify it any more. / 36 | 37 | img { 38 | -ms-interpolation-mode: bicubic !important; 39 | } 40 | 41 | / Used to fix auto links in outlook app - but an update rolling out since June 14th 2021 has now changed the targeting and this no longer works. / 42 | 43 | body[data-outlook-cycle] a { 44 | color: inherit !important; 45 | text-decoration: none; 46 | } 47 | 48 | / Was used to force a 'View in browser' link in Outlook Windows. This no longer works and can be removed - July 2021 (Not worked since approximately 2016) / 49 | 50 | #outlook a { 51 | padding: 0; 52 | } 53 | 54 | / .yshortcuts used to be added in Yahoo to link popular names/locations - this is no longer needed (July 2021) / 55 | 56 | .yshortcuts, 57 | .yshortcuts:hover, 58 | .yshortcuts:active, 59 | .yshortcuts:focus { 60 | background-color: none; 61 | border: none; 62 | color: #000000; 63 | text-decoration:none; 64 | } 65 | 66 | / .im was used to target Gmail text in conversation threads - this is no longer needed (July 2021) / 67 | 68 | .im { 69 | color: inherit !important; 70 | } 71 | 72 | / Used to be the class on Gmail webmail desktop images to download - this no longer works (July 2021) 73 | 74 | Currently this works: 75 | u ~ div img + div {display: none;} 76 | 77 | / 78 | 79 | .a6S { 80 | display: none !important; 81 | opacity: 0.01 !important; 82 | } 83 | 84 | / .aBn used to be the class on auto-links in Gmail, for example an address, phone number or date - this no longer works (July 2021) */ 85 | 86 | .aBn { 87 | border-bottom: 0 !important; 88 | cursor: default !important; 89 | color: inherit !important; 90 | text-decoration: none !important; 91 | font-size: inherit !important; 92 | font-family: inherit !important; 93 | font-weight: inherit !important; 94 | line-height: inherit !important; 95 | } 96 | --------------------------------------------------------------------------------