Adds @client media queries to allow you to target different email clients.
npm install postcss-target-email --savepostcss([ require('postcss-target-email')({ comment: false, bodyClass: '.body' }) ])
// do your processing here 🎉Or use it in some other PostCSS way.
Default: false
Use this option to define whether or not to add documenting comments above CSS.
Default: .body
Use this option to set the class on your body. This is required to properly target your CSS.
If you want to style all links on Gmail and Yahoo be colored orange you would write the following:
@client gmail, yahoo {
a {
color: orange;
}
}You will get this result:
/**
* Targeting gmail
*/
u + .body a {
color: orange;
}
/**
* Targeting yahoo
*/
@media screen yahoo {
a {
color: orange;
}
}At the moment this package supports targeting the following clients.
aolyahoogmailoutlook-comthunderbirdsamsunglotusnotes8webkit(not really a client, but quite helpful)
This package is entirely dependent on the amazing work of people in the email community.