jayoram / email-css-resets Goto Github PK

A repository to hold all CSS resets from past and present email clients.

CSS 100.00%

email-css-resets's Introduction

email-css-resets

A repository to hold all CSS resets/normalisation from past and present email clients.

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.

There are two types of CSS -

1. General CSS normalisation

CSS that will affect change needed across email clients to normalise behaviour.

For example:

table { border-collapse: collapse; }

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.

2. Email client specific CSS

CSS that will reset/override specific styles an email client will force on HTML elements.

For example:

u + .body a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  }

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.

Two main files -

Old CSS resets
Current CSS resets/normalisation

I would love anyone to send updates / pull requests with any CSS resets they find in old templates or know of?

Thanks to Ted Goas for updating the read me to look much better!

Contributors: 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.

email-css-resets's People

Contributors

Stargazers

Watchers

Forkers

tedgoas spdrman n2-jonathon rakhithjk pzendrato rosemaryking vkovic oskarhulter suntandan

email-css-resets's Issues

Outlook Android app

The android version of Outlook adds class="ms-outlook-linkify" to generated links.

So adding this can help

.ms-outlook-linkify{
  color: inherit !important;
}

Outlook App double id hack is not working anymore

anchor tag resets to text-decoration: none;

A common tag seen in a lot of email templates/html files is to add:

a {text-decoration: none;}

This would automatically stop links being underlined - this is a design/code choice, that is not fixing a email clients incorrect rendering and could even be seen as a hindrance when styling an email if you want all links underlined.

Auto-linking for Samsung android

In similar vein to the Gmail auto-links, Samsung adds links for dates, phone numbers, addresses and the like.

We can't target them with [x-apple-data-detectors], but we can use the Samsung-specific targeting #MessageViewBody.

So you could then add that to your Gmail CSS like so:

u + .body a, #MessageViewBody a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  }

(I would also suggest reviewing the need for font-size, font-weight and line-height as there's no indication this is set anywhere by any email environment that auto-links)

LaPoste - all:revert

LaPoste webmail adds a number of tricky default styles including things like border-bottom: 1px solid #EDEDED; and background: #FFF; on an <h2> or an <h3> which can mess with styling a fair bit.

Luckily LaPoste also supports a very simple fix

*{
  all:revert
}

That CSS will put styles back to the browser default styling, but it is dependant on the specificity of other styles set.

Luckily LaPoste also prefixes all of your styles with an id (which will increase the specificity) so when the email is rendered it will become

#message *{
  all:revert
}

This fixes a few issues in LaPoste and works as a good potential catch for other emails clients so i think it should be included in the CSS reset.

Gmail iOS .body reset

On iOS Gmail sets this code

body {
  -webkit-text-size-adjust: none;
  background-color: #ffffff;
  color: #313131;
  font-family: Roboto;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  word-spacing: 1px;
  word-wrap: break-word;
  min-height: 10px;
}

As discussed here hteumeuleu/email-bugs#80 (comment)

The word-wrap and word-spacing are not standard and can cause issues. We can fix it with

.body{
   word-wrap: normal;
   word-spacing:normal;
}

This also requires adding a class of body to the body <body class="body">

However this doesn't fix the issue for GANGA so it's probably better done inline.
<body style="word-wrap: normal; word-spacing:normal;">

Outlook mac autolinking

Outlook on mac is adding
<span id="WEBEXT" contextualstring="Suite‌ 43920‌, ‌Beaverton‌, ‌Oregon‌ 97008" style="color: rgb(0, 114, 198); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: currentcolor;">

This isn't rendered as a link as such so we cant target it with an a{} but they do add an id, so we can remove all the styles by using

#WEBEXT{
  all:revert !important;
}

Black text looks bolder on white background

From Ben Tweedy in EmailGeeks slack:

Just spent an hour pulling my hair out and trying to work out why a custom font looks bolder than it should do…. Turns out it’s because of the anti-aliasing algorithm being used in some browsers. If anyone encounters the same, add this to your head (I always used to include it but removed it a while ago….back in it goes!)

body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}

https://stackoverflow.com/questions/14477265/css-white-text-on-black-background-looks-bolder

Outlook webmail autolinking

Outlook webmail is adding
<span data-markjs="true" class="HQEo7" tabindex="0" role="link">

This isn't rendered as a link as such so we cant target it with an a{} but they do add a class, so we can remove all the styles by using

[class="HQEo7"]{
  border:none !important;
  cursor: auto !important;
  padding:0 !important;
}

Note that this is using an attribute selector as Outlook will prefix all class selectors with x_

Reset <li> margin for Outlook Windows Desktop

Should this be included?

<!--[if mso]>
<style type="text/css">
li {margin-left:-40px !important;}
</style>
<![endif]-->

As it will reset the list item to 0px margin left?

Maybe with the added information that to change the indentation using margin to adjust the -40px ?