Proton Mail email CSS: what breaks, and what to write instead

200 of 300 features work in Proton Mail · 18 partial · 82 not supported. Of the 82 not supported, 17 work in at least 14 of the other 20 clients.

Works 200 · Partial 18 · Not supported 82 · Untested 0 · of 300

Proton · webmail · prefers-color-scheme: not supported

Check your email, free

No signup · Five clients free, Outlook Classic included · All 21 with an account

The checker needs a computer screen.

See what breaks ↓

Proton Mail opens with a free account.

A free account opens all 21 clients and keeps your checks for 7 days. Create a free account →

@emailens/engine 0.18.22 · data last changed 10 Nov 2026

Where Proton Mail is the outlier

17 features work in at least 14 of the other 20 clients and are not supported here.

So an email that looks right in most clients can reach your reader in Proton Mail without them.

All 17

What works in Proton Mail and breaks elsewhere

54 features work in Proton Mail and in 6 or fewer of the other 20 clients, so they need a fallback.

All 54

What to write instead

4 features Proton Mail does not fully support have a written fix. See them in the table ↓

<form>

The fix for Proton Mail

Replace embedded form with a link to a hosted form

The engine still flags this in the fix: Proton Mail does not support "text-decoration".

after

13 lines

<table role="presentation" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background-color: #6d28d9; border-radius: 6px;
               padding: 12px 32px;">
      <a href="https://example.com/subscribe"
        style="color: #fff; text-decoration: none;
               font-family: Arial, sans-serif;
               font-weight: bold;">
        Subscribe Now
      </a>
    </td>
  </tr>
</table>

Show the original

before

4 lines

<form action="/subscribe" method="POST">
  <input type="email" placeholder="Email" />
  <button type="submit">Subscribe</button>
</form>

Test this fix, free

Proton Mail opens with a free account; the checker shows five clients without one.

The checker needs a computer screen.

animation

The fix for Proton Mail

Replace CSS animation with an animated GIF

after

4 lines

<!-- Use an animated GIF for the effect -->
<img src="https://example.com/badge-animated.gif"
  width="60" height="24" alt="New!"
  style="display: inline-block; border: 0;" />

Show the original

before

5 lines

<style>
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  .badge { animation: pulse 2s infinite; }
</style>
<span class="badge">New!</span>

Test this fix, free

Proton Mail opens with a free account; the checker shows five clients without one.

The checker needs a computer screen.

<video>

The fix for Proton Mail

Replace video with animated GIF or linked thumbnail

after

5 lines

<a href="https://example.com/watch" target="_blank">
  <img src="https://example.com/video-thumb.gif"
    width="600" alt="Watch the video"
    style="display: block; border: 0; max-width: 100%;" />
</a>

Show the original

before

3 lines

<video width="600" autoplay muted>
  <source src="demo.mp4" type="video/mp4">
</video>

Test this fix, free

Proton Mail opens with a free account; the checker shows five clients without one.

The checker needs a computer screen.

Paste your email and see what Proton Mail does to it.

Check your email, free

No signup · Five clients free, Outlook Classic included · All 21 with an account

The checker needs a computer screen.

Dark mode in Proton Mail

Not supported @media prefers-color-scheme is not supported in Proton Mail.

Works in 9 of 21.
Not supported color-scheme is not supported in Proton Mail.

Works in 4 of 21.
Not supported meta-color-scheme is not supported in Proton Mail.

Works in 2 of 21.

How to target Proton Mail

Selectors that single out Proton Mail, from the community list the engine ships (howtotarget.email). Copy one and replace .your-class-name.

css

3 lines

#proton-root .your-class-name {
  /* Replace this comment with your styles */
}

Build one for several clients →

Your next question

Gmail · Outlook 365 · Yahoo Mail · HEY Mail · AOL Mail · Fastmail

Every feature in Proton Mail

What breaks here (100) Everything (300)

HTML Elements · 20 of 48 not supported or partial here

<abbr> Works Works in 14 of 21
<acronym> Works Works in 13 of 21
<address> Works Works in 20 of 21
<audio> The src attribute is transformed into proton-src. Not supported Works in 4 of 21
<base> Not supported Works in 4 of 21
<bdi> Works Works in 6 of 21
<blockquote> Works Works in 19 of 21
<body> Not supported Works in 5 of 21
<button type="reset"> Not supported Works in 10 of 21
<button type="submit"> Not supported Works in 11 of 21
<code> Works Works in 20 of 21
<del> Works Works in 20 of 21
<dfn> Works Works in 17 of 21
<dialog> Not supported Works in 5 of 21
<div> Works Works in 20 of 21
<form> fix Not supported. Not supported Works in 10 of 21
<h1> Works Works in 20 of 21
<hr> Works Works in 18 of 21
<img> Works Works in 19 of 21
<input type="checkbox"> Not supported Works in 16 of 21
<input type="hidden"> Not supported Works in 16 of 21
<input type="radio"> Not supported Works in 16 of 21
<input type="reset"> Not supported Works in 15 of 21
<input type="submit"> Not supported Works in 12 of 21
<input type="text"> Not supported Works in 13 of 21
<link> fix Not supported Works in 3 of 21
<marquee> The behavior attribute is not supported. Partial Works in 8 of 21
<meter> Works Works in 11 of 21
<object> Not supported Works in 1 of 21
<p> Works Works in 20 of 21
<picture> Not supported Works in 4 of 21
<pre> Works Works in 20 of 21
<progress> Works Works in 6 of 21
<rp> Works Works in 15 of 21
<rt> Works Works in 15 of 21
<ruby> Works Works in 15 of 21
<select> Works Works in 14 of 21
<small> Works Works in 20 of 21
<span> Works Works in 20 of 21
<strike> Works Works in 17 of 21
<strong> Works Works in 20 of 21
<style> Partial. Partial Works in 16 of 21
<svg> Works Works in 5 of 21
<table> Works Works in 20 of 21
<textarea> Buggy. Partial Works in 13 of 21
<ul> Works Works in 7 of 21
<video> fix The <video> element is supported and the poster image is visible, but the video can not play due to a strict Content Security Policy. Not supported Works in 3 of 21
<wbr> Works Works in 16 of 21

HTML Attributes · 6 of 22 not supported or partial here

[align] Partial. Partial Works in 17 of 21
[aria-describedby] Works Works in 9 of 21
[aria-hidden] Works Works in 13 of 21
[aria-label] Works Works in 13 of 21
[aria-labelledby] Works Works in 7 of 21
[aria-live] Works Works in 8 of 21
[background] Works Works in 16 of 21
[cellpadding] Works Works in 18 of 21
[cellspacing] Works Works in 18 of 21
[command] Not supported Works in 3 of 21
[dir] Works Works in 19 of 21
[height] Works Works in 18 of 21
[hidden] Works Works in 5 of 21
[lang] Works Works in 15 of 21
[loading] Not supported Works in 4 of 21
[popover] Works Works in 3 of 21
[required] Not supported Works in 7 of 21
[role] Works Works in 14 of 21
[srcset] The sizes attribute is supported but not srcset. Not supported Works in 4 of 21
[target] Not supported. Not supported Works in 0 of 21
[valign] Works Works in 20 of 21
[width] Works Works in 18 of 21

HTML & Email Structure · 6 of 8 not supported or partial here

amp4email Not supported Works in 6 of 21
anchor-links Not supported Works in 12 of 21
doctype Not supported Works in 13 of 21
html-comments Works Works in 18 of 21
html5-semantics Works Works in 6 of 21
image-maps Not supported Works in 15 of 21
mailto-links Partial. Partial Works in 17 of 21
meta-color-scheme Not supported Works in 2 of 21

CSS At-Rules · 9 of 10 not supported or partial here

@font-face Not supported Works in 6 of 21
@import Not supported Works in 4 of 21
@keyframes Not supported Works in 7 of 21
@media Partial. Partial Works in 5 of 21
@media device-pixel-ratio Not supported Works in 10 of 21
@media hover Works Works in 9 of 21
@media orientation Not supported Works in 11 of 21
@media prefers-color-scheme Not supported Works in 9 of 21
@media prefers-reduced-motion Partially supported. Partial Works in 9 of 21
@supports Not supported Works in 9 of 21

Pseudo-Elements · 6 of 6 not supported or partial here

::after Not supported Works in 6 of 21
::before Not supported Works in 6 of 21
::first-letter Not supported Works in 10 of 21
::first-line Not supported Works in 10 of 21
::marker Not supported Works in 10 of 21
::placeholder Not supported Works in 9 of 21

Pseudo-Classes & Selectors · 28 of 34 not supported or partial here

:adjacent-sibling Not supported Works in 16 of 21
:attribute-selector Not supported Works in 6 of 21
:chaining Not supported Works in 14 of 21
:checked Not supported Works in 9 of 21
:child-combinator Not supported Works in 16 of 21
:class-selector Not supported Works in 17 of 21
:descendant-combinator Not supported Works in 17 of 21
:first-child Not supported Works in 12 of 21
:first-of-type Not supported Works in 12 of 21
:focus Works Works in 10 of 21
:focus-visible Works Works in 6 of 21
:focus-within Works Works in 6 of 21
:general-sibling Not supported Works in 16 of 21
:grouping Not supported Works in 17 of 21
:has Not supported Works in 5 of 21
:hover Works Works in 12 of 21
:id-selector Not supported Works in 17 of 21
:lang Works Works in 6 of 21
:last-child Not supported Works in 12 of 21
:last-of-type Not supported Works in 12 of 21
:link Not supported Works in 13 of 21
:not Not supported Works in 6 of 21
:nth-child Not supported Works in 6 of 21
:nth-last-child Not supported Works in 6 of 21
:nth-of-type Not supported Works in 6 of 21
:only-child Not supported Works in 12 of 21
:only-of-type Not supported Works in 12 of 21
:target Not supported Works in 7 of 21
:type-selector Not supported Works in 17 of 21
:universal-selector Not supported Works in 16 of 21
:visited Not supported Works in 8 of 21
pseudo-class-active Works Works in 8 of 21
pseudo-class-default Not supported Works in 10 of 21
pseudo-class-nth-last-of-type Not supported Works in 6 of 21

CSS Functions · 0 of 8 not supported or partial here

calc Works Works in 8 of 21
clamp Works Works in 6 of 21
conic-gradient Works Works in 6 of 21
fit-content Works Works in 11 of 21
linear-gradient Works Works in 9 of 21
max Works Works in 6 of 21
min Works Works in 6 of 21
radial-gradient Works Works in 10 of 21

CSS Properties · 25 of 164 not supported or partial here

!important Partial. Partial Works in 11 of 21
accent-color Not supported Works in 5 of 21
align-items Works Works in 13 of 21
animation fix Not supported Works in 5 of 21
aspect-ratio Works Works in 5 of 21
backdrop-filter Works Works in 6 of 21
background Works Works in 16 of 21
background-blend-mode Works Works in 13 of 21
background-clip Works Works in 14 of 21
background-color Works Works in 21 of 21
background-image Works Works in 16 of 21
background-origin Works Works in 14 of 21
background-position Works Works in 20 of 21
background-repeat Works Works in 20 of 21
background-size Works Works in 17 of 21
bimi Not supported Works in 9 of 21
block-size Works Works in 7 of 21
border Works Works in 20 of 21
border-collapse Works Works in 19 of 21
border-image Works Works in 7 of 21
border-inline Works Works in 3 of 21
border-inline-individual Works Works in 3 of 21
border-inline-longhand Works Works in 4 of 21
border-radius Works Works in 16 of 21
border-radius-logical Works Works in 3 of 21
border-spacing Works Works in 17 of 21
bottom Works Works in 11 of 21
box-shadow Works Works in 14 of 21
box-sizing Works Works in 16 of 21
caption-side Works Works in 20 of 21
clear Works Works in 9 of 21
clip-path Works Works in 8 of 21
color Works Works in 21 of 21
color-scheme Not supported Works in 4 of 21
column-count Works Works in 16 of 21
columns Works Works in 16 of 21
css-comments Works Works in 14 of 21
cursor Partial. Partial Works in 2 of 21
custom-properties Works Works in 6 of 21
direction Works Works in 21 of 21
display Works Works in 13 of 21
display:flex Works Works in 18 of 21
display:grid Works Works in 18 of 21
display:none Works Works in 20 of 21
empty-cells Works Works in 14 of 21
filter Works Works in 7 of 21
flex Works Works in 13 of 21
flex-basis Works Works in 13 of 21
flex-direction Works Works in 12 of 21
flex-wrap Works Works in 13 of 21
float Works Works in 14 of 21
font Works Works in 20 of 21
font-family Works Works in 21 of 21
font-kerning Works Works in 13 of 21
font-size Works Works in 13 of 21
font-size-adjust Works Works in 10 of 21
font-stretch Works Works in 10 of 21
font-weight Works Works in 16 of 21
gap Works Works in 7 of 21
grid-template-columns Works Works in 7 of 21
height Works Works in 16 of 21
hyphenate-character Works Works in 4 of 21
hyphenate-limit-chars Works Works in 1 of 21
hyphens Works Works in 4 of 21
inert Not supported Works in 3 of 21
inline-size Works Works in 4 of 21
inset Buggy. Not supported Works in 3 of 21
justify-content Works Works in 13 of 21
left Works Works in 11 of 21
letter-spacing Works Works in 20 of 21
light-dark Buggy. Partial Works in 3 of 21
line-height Works Works in 20 of 21
list-style Not supported Works in 11 of 21
list-style-image url() is transformed into proton-url(). Not supported Works in 6 of 21
list-style-position Works Works in 19 of 21
list-style-type Works Works in 21 of 21
margin Works Works in 8 of 21
margin-block-start-end Works Works in 4 of 21
margin-inline-block Works Works in 6 of 21
margin-inline-start-end Works Works in 4 of 21
mask-image Notation using url is not supported. Partial Works in 4 of 21
max-block-size Works Works in 5 of 21
max-height Works Works in 20 of 21
max-inline-size Works Works in 4 of 21
max-width Works Works in 20 of 21
min-block-size Works Works in 4 of 21
min-height Not supported Works in 19 of 21
min-inline-size Works Works in 5 of 21
min-width Works Works in 20 of 21
mix-blend-mode Works Works in 13 of 21
modern-color Not supported Works in 4 of 21
nesting Partial. Partial Works in 2 of 21
object-fit Works Works in 14 of 21
object-position Works Works in 14 of 21
opacity Works Works in 19 of 21
orphans Works Works in 10 of 21
outline Works Works in 20 of 21
outline-offset Works Works in 7 of 21
overflow Partial. Partial Works in 4 of 21
overflow-wrap word-wrap is correctly supported, however word-break seems to break for all values Partial Works in 2 of 21
padding Works Works in 20 of 21
padding-block-start-end Works Works in 4 of 21
padding-inline-block Works Works in 3 of 21
padding-inline-start-end Works Works in 4 of 21
position Works Works in 2 of 21
resize Not supported Works in 1 of 21
rgb Works Works in 12 of 21
rgba Works Works in 12 of 21
right Works Works in 11 of 21
scroll-snap Works Works in 6 of 21
shape-margin Works Works in 6 of 21
shape-outside Works Works in 6 of 21
system-ui Partial. Partial Works in 12 of 21
tab-size Works Works in 8 of 21
table-layout Works Works in 16 of 21
text-align Works Works in 13 of 21
text-align-last Works Works in 7 of 21
text-decoration Not supported Works in 14 of 21
text-decoration-color Works Works in 17 of 21
text-decoration-line Works Works in 16 of 21
text-decoration-skip-ink Works Works in 7 of 21
text-decoration-style Works Works in 16 of 21
text-decoration-thickness Works Works in 7 of 21
text-emphasis Works Works in 9 of 21
text-emphasis-position Works Works in 4 of 21
text-indent Partial. Partial Works in 13 of 21
text-justify Not supported Works in 0 of 21
text-orientation Works Works in 13 of 21
text-overflow Works Works in 13 of 21
text-shadow Works Works in 12 of 21
text-transform Works Works in 20 of 21
text-underline-offset Works Works in 7 of 21
text-underline-position Works Works in 8 of 21
text-wrap Works Works in 4 of 21
top Works Works in 11 of 21
transform Works Works in 7 of 21
transition Not supported Works in 4 of 21
unit-ch Works Works in 15 of 21
unit-cm Works Works in 20 of 21
unit-em Works Works in 20 of 21
unit-ex Works Works in 20 of 21
unit-in Works Works in 20 of 21
unit-initial Works Works in 12 of 21
unit-mm Works Works in 20 of 21
unit-pc Works Works in 20 of 21
unit-percent Works Works in 20 of 21
unit-pt Works Works in 20 of 21
unit-px Works Works in 20 of 21
unit-rem Works Works in 15 of 21
unit-vh Works Works in 17 of 21
unit-vmax Works Works in 15 of 21
unit-vmin Works Works in 15 of 21
unit-vw Works Works in 18 of 21
user-select all value does not work Partial Works in 3 of 21
vertical-align Works Works in 21 of 21
visibility Works Works in 13 of 21
white-space Works Works in 15 of 21
white-space-collapse Works Works in 4 of 21
widows Works Works in 10 of 21
width Works Works in 20 of 21
word-break Buggy. Partial Works in 4 of 21
word-spacing Works Works in 14 of 21
writing-mode Works Works in 13 of 21
z-index Works Works in 17 of 21