JayOram/email-css-resets

LaPoste - all:revert

M-J-Robbins opened this issue · 2 comments

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.

Just working through this in specificity:
* { all:revert; }
Will make all elements use the browser (email client in this case is a webmail so revert will make it go to browser defaults) user agent styles.

If someone has:
h1 {color: red;} OR .class { color: red;} OR style="color:red;"
Then it will have more specificity than the * universal selector above, so will override all the CSS being reverted. If you don't have anything set - it will just look the same in that email client as it would have already been using the user-agent styles.

So in any client that prefaces all styles with an ID (LaPoste):
#message * {all: revert;}

Because all styles are prefixed with an ID then they will always be more specific than the universal selector and ID.

From @M-J-Robbins LaPoste sets the default styles in a stylesheet here so the all:revert; will go to the browser defaults not LaPoste webmail defaults.

Will create a test email and check no other email clients are affected, just to double check, then will add it in thanks.