Email Client CSS Targeting Generator
Selectively target or isolate Gmail, Outlook, Apple Mail, Samsung Email, Yahoo and more. Wrap your CSS in verified, community-tested selector quirks and wrapper hacks.
Technique Details
Place targeted client CSS inside a <style> tag in <head>. Verify with Emailens preview before sending.
Progressive Enhancement vs. Brittle Hacks
Email client targeting hacks exist because email clients use vastly different rendering engines (WebKit, Blink, Microsoft Word, Gecko). While universal modern CSS is the ideal goal, progressive enhancement often requires applying layout fixes or dark-mode overrides to one stubborn client without affecting another.
Whenever possible, prefer safe structural techniques (like conditional comments for Outlook Classic or documented attribute selectors like [data-ogsc]) over vendor CSS parsing bugs.
Frequently Asked Questions
How do you target Gmail with CSS?
Gmail rewrites email doctypes and prepends an empty <u></u> immediately before the element inheriting your body tag. By placing a class on your body element (e.g. <body class="body">), you can target Gmail web and mobile using the selector 'u + .body .your-class'.
How do you target Outlook desktop (Word engine)?
Outlook Windows (2007-2021) renders with Microsoft Word. It is best targeted using conditional comments: <!--[if mso]> ... <![endif]--> for Outlook-only markup, or <!--[if !mso]><!--> ... <!--<![endif]--> to hide modern CSS from Outlook.
How do you target Outlook Web dark mode?
When Outlook.com inverts colors in dark mode, it injects [data-ogsc] (for text colors) and [data-ogsb] (for background colors). You can override dark mode styling by styling '[data-ogsc] .your-class' or '[data-ogsb] .your-class'.
Why do email client hacks deprecate?
Email client webmail interfaces update regularly. Hacks that rely on unintended bugs (like parsing invalid media queries or unescaped CSS comments) often get patched. Emailens tracks both working and deprecated hacks to prevent broken code from shipping.