Yahoo Mail iOS email CSS: what breaks, and what to write instead

120 of 300 features work in Yahoo Mail iOS · 28 partial · 150 not supported · 2 untested. Of the 150 not supported, 16 work in at least 14 of the other 20 clients.

Works 120 · Partial 28 · Not supported 150 · Untested 2 · of 300

Yahoo · mobile · 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 ↓

Yahoo Mail iOS 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

What Yahoo Mail iOS rewrites

Yahoo Mail iOS changes some CSS rather than dropping it, so the email can render differently from what the code says. The engine's notes for this app:

<base>
Buggy. The element is removed but URLs are turned into links with href attribute.
<video>
<video>, <source> and <track> tags are stripped. The fallback content is shown instead.
[target]
Not supported. target="_blank" is forced on all links.
!important
Partial. Removed if there is no space before when used with a background-image property. (See email-bugs#16)
background
Partial. Does not support multiple values. The comma between two values is removed.
background-image
Partial. Does not support multiple values. The comma between two values is removed.
background-position
Partial. Does not support multiple values. The comma between two values is removed.
background-repeat
Partial. Does not support multiple values. The comma between two values is removed.

All 18

background-size
Partial. Does not support multiple values. The comma between two values is removed.
css-comments
Buggy. The first <head> in the HTML is removed, so comment needs to be in the <style> tag of a second <head> element.
height
Buggy. Replaces height by min-height.
html5-semantics
Unsupported opening and closing tags are stripped.
nesting
Not supported. The nested selectors are removed, making the nested properties apply to the parent selector.
pseudo-class-nth-last-of-type
Not supported. Removes the parenthesis part.
text-justify
Buggy. text-justify is stripped
:nth-child
Not supported. Removes the parenthesis part.
:nth-last-child
Not supported. Removes the parenthesis part.
:nth-of-type
Not supported. Removes the parenthesis part.

Yahoo Mail iOS against Yahoo Mail Android

They give the same answer on 284 of the 297 features both are tested on. Where they split:

Works in Yahoo Mail iOS, not in Yahoo Mail Android (7)

Works in Yahoo Mail Android, not in Yahoo Mail iOS (4)

Yahoo Mail iOS against Yahoo Mail

They give the same answer on 282 of the 298 features both are tested on. Where they split:

Works in Yahoo Mail iOS, not in Yahoo Mail (4)

Works in Yahoo Mail, not in Yahoo Mail iOS (8)

How Yahoo Mail iOS renders email

Yahoo Mail iOS is the Yahoo app on iOS. It shares the Yahoo engine with Yahoo Mail on the web and on Android: it keeps a <style> block, but rewrites much of the CSS inside it on the way in. It does not support @font-face or @media (prefers-color-scheme), and its media queries are limited to screen, min-width, max-width, min-height and max-height.

font-weight: Only the round values 100, 200, 300, 400, 500, 600, 700, 800 and 900 apply. A value such as 650 does not.
height: Rewritten to min-height, so a box can grow past the height you set.
nesting: Nested selectors are removed and their properties apply to the parent selector.
:nth-child and :nth-of-type: The part in parentheses is removed.
Forms: A text field and a <textarea> are supported, but <form>, <select> and submit buttons are not. Yahoo Mail Android is the reverse.

Where Yahoo Mail iOS is the outlier

16 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 Yahoo Mail iOS without them.

All 16

What to write instead

11 features Yahoo Mail iOS does not fully support have a written fix. See them in the table ↓

box-sizing

The fix for Yahoo Mail iOS

Account for padding in width manually (no box-sizing)

after

5 lines

<div style="width: 300px;">
  <div style="padding: 20px;">
    Content; padding on inner element
  </div>
</div>

Show the original

before

4 lines

<div style="width: 300px; padding: 20px;
            box-sizing: border-box;">
  Content; total width stays 300px
</div>

Test this fix, free

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

The checker needs a computer screen.

<form>

The fix for Yahoo Mail iOS

Replace embedded form with a link to a hosted form

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

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

The checker needs a computer screen.

gap

The fix for Yahoo Mail iOS

Use padding or margin on child elements instead of gap

after

8 lines

<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>

Show the original

before

5 lines

<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Test this fix, free

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

The checker needs a computer screen.

Paste your email and see what Yahoo Mail iOS 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 Yahoo Mail iOS

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

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

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

Works in 2 of 21.

Before you send to Yahoo Mail iOS

Use round font weights such as 400 and 700.
Keep selectors flat in the <style> block: no nesting, no :nth-child.
Supply a complete system font stack: web fonts never load.

Your next question

Closest to Yahoo Mail iOS: Yahoo Mail Android, which agrees on 284 of the 297 features both are tested on.

Yahoo Mail · Yahoo Mail Android

Every feature in Yahoo Mail iOS

Show all 300

What breaks here (178) Everything (300) Untested (2)

HTML Elements · 20 of 48 not supported or partial here

<abbr> Not supported Works in 14 of 21
<acronym> Not supported Works in 13 of 21
<address> Works Works in 20 of 21
<audio> Not supported Works in 4 of 21
<base> Buggy. Partial Works in 4 of 21
<bdi> Not supported 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 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"> Works Works in 16 of 21
<input type="hidden"> Works Works in 16 of 21
<input type="radio"> Works Works in 16 of 21
<input type="reset"> Works Works in 15 of 21
<input type="submit"> Not supported Works in 12 of 21
<input type="text"> Works Works in 13 of 21
<link> fix Not supported Works in 3 of 21
<marquee> Works Works in 8 of 21
<meter> Not supported 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> Not supported 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> Not supported 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> Works Works in 16 of 21
<svg> fix Not supported Works in 5 of 21
<table> Works Works in 20 of 21
<textarea> Works Works in 13 of 21
<ul> Partial. Partial Works in 7 of 21
<video> fix <video>, <source> and <track> tags are stripped. Not supported Works in 3 of 21
<wbr> Works Works in 16 of 21

HTML Attributes · 14 of 22 not supported or partial here

[align] Works Works in 17 of 21
[aria-describedby] Not supported Works in 9 of 21
[aria-hidden] Not supported Works in 13 of 21
[aria-label] Not supported Works in 13 of 21
[aria-labelledby] Not supported Works in 7 of 21
[aria-live] Not supported 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] Not supported Works in 5 of 21
[lang] Not supported on <td> elements. Partial Works in 15 of 21
[loading] Not supported Works in 4 of 21
[popover] Not supported Works in 3 of 21
[required] Not supported Works in 7 of 21
[role] Partial. Partial Works in 14 of 21
[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 · 3 of 8 not supported or partial here

amp4email Works Works in 6 of 21
anchor-links Buggy. Not supported Works in 12 of 21
doctype Works Works in 13 of 21
html-comments Works Works in 18 of 21
html5-semantics Unsupported opening and closing tags are stripped. Not supported Works in 6 of 21
image-maps Works Works in 15 of 21
mailto-links Works 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 Not supported 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 Not supported Works in 9 of 21
@supports Works Works in 9 of 21

Pseudo-Elements · 2 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 Works Works in 10 of 21
::first-line Works Works in 10 of 21
::marker Works Works in 10 of 21
::placeholder Works Works in 9 of 21

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

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

CSS Functions · 8 of 8 not supported or partial here

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

CSS Properties · 114 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 Not supported Works in 13 of 21
animation fix Not supported Works in 5 of 21
aspect-ratio Not supported Works in 5 of 21
backdrop-filter Not supported Works in 6 of 21
background Partial. Partial Works in 16 of 21
background-blend-mode Not supported Works in 13 of 21
background-clip Not supported Works in 14 of 21
background-color Works Works in 21 of 21
background-image Partial. Partial Works in 16 of 21
background-origin Not supported 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 Works Works in 9 of 21
block-size Not supported Works in 7 of 21
border Works Works in 20 of 21
border-collapse Works Works in 19 of 21
border-image Not supported Works in 7 of 21
border-inline Not supported Works in 3 of 21
border-inline-individual Not supported Works in 3 of 21
border-inline-longhand Not supported Works in 4 of 21
border-radius Partial support. Partial Works in 16 of 21
border-radius-logical Not supported Works in 3 of 21
border-spacing Works Works in 17 of 21
bottom Not supported Works in 11 of 21
box-shadow Not supported Works in 14 of 21
box-sizing fix Not supported Works in 16 of 21
caption-side Works Works in 20 of 21
clear Partial. Partial Works in 9 of 21
clip-path Not supported Works in 8 of 21
color Works Works in 21 of 21
color-scheme Not supported Works in 4 of 21
column-count Not supported Works in 16 of 21
columns Not supported Works in 16 of 21
css-comments Buggy. Partial Works in 14 of 21
cursor iOS assistive touch does not respond to cursor. Not supported Works in 2 of 21
custom-properties Not supported Works in 6 of 21
direction Works Works in 21 of 21
display Partial. Partial 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 Not supported Works in 14 of 21
filter Not supported Works in 7 of 21
flex Not supported Works in 13 of 21
flex-basis Not supported Works in 13 of 21
flex-direction Not supported Works in 12 of 21
flex-wrap Not supported Works in 13 of 21
float Partial. Partial Works in 14 of 21
font Works Works in 20 of 21
font-family Works Works in 21 of 21
font-kerning Not supported Works in 13 of 21
font-size Partial support. Partial Works in 13 of 21
font-size-adjust 2-value syntax is supported, but the first value (font-metric) is ignored. Partial Works in 10 of 21
font-stretch Not supported Works in 10 of 21
font-weight Partial support. Partial Works in 16 of 21
gap fix Not supported Works in 7 of 21
grid-template-columns Not supported Works in 7 of 21
height Buggy. Not supported Works in 16 of 21
hyphenate-character Not supported Works in 4 of 21
hyphenate-limit-chars Not supported Works in 1 of 21
hyphens Not supported Works in 4 of 21
inert Not supported Works in 3 of 21
inline-size Not supported Works in 4 of 21
inset Not supported Works in 3 of 21
justify-content Not supported Works in 13 of 21
left Not supported Works in 11 of 21
letter-spacing Works Works in 20 of 21
light-dark Not supported Works in 3 of 21
line-height Works Works in 20 of 21
list-style list-style-image values are not supported but the rest of the list-style property is kept. Partial Works in 11 of 21
list-style-image 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 Partial. Partial Works in 8 of 21
margin-block-start-end Not supported Works in 4 of 21
margin-inline-block Not supported Works in 6 of 21
margin-inline-start-end Not supported Works in 4 of 21
mask-image Not supported Works in 4 of 21
max-block-size Not supported Works in 5 of 21
max-height Works Works in 20 of 21
max-inline-size Not supported Works in 4 of 21
max-width Works Works in 20 of 21
min-block-size Not supported Works in 4 of 21
min-height Works Works in 19 of 21
min-inline-size Not supported Works in 5 of 21
min-width Works Works in 20 of 21
mix-blend-mode Not supported Works in 13 of 21
modern-color Not supported Works in 4 of 21
nesting Not supported. Not supported Works in 2 of 21
object-fit Not supported Works in 14 of 21
object-position Not supported Works in 14 of 21
opacity Works Works in 19 of 21
orphans Not supported Works in 10 of 21
outline Works Works in 20 of 21
outline-offset Not supported Works in 7 of 21
overflow Partial. Partial Works in 4 of 21
overflow-wrap fix Not supported Works in 2 of 21
padding Works Works in 20 of 21
padding-block-start-end Not supported Works in 4 of 21
padding-inline-block Not supported Works in 3 of 21
padding-inline-start-end Not supported Works in 4 of 21
position fix Partial. Partial Works in 2 of 21
resize Not supported Works in 1 of 21
rgb Whitespace syntax is not supported (rgb(0 128 0 / 1)). Partial Works in 12 of 21
rgba Whitespace syntax is not supported (rgb(0 128 0 / 1)). Partial Works in 12 of 21
right Not supported Works in 11 of 21
scroll-snap Not supported Works in 6 of 21
shape-margin Not supported Works in 6 of 21
shape-outside Not supported Works in 6 of 21
system-ui Works Works in 12 of 21
tab-size Not supported Works in 8 of 21
table-layout Works Works in 16 of 21
text-align Partial. Partial Works in 13 of 21
text-align-last Not supported Works in 7 of 21
text-decoration Works 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 Not supported Works in 7 of 21
text-decoration-style Works Works in 16 of 21
text-decoration-thickness Not supported Works in 7 of 21
text-emphasis Not supported Works in 9 of 21
text-emphasis-position Not supported Works in 4 of 21
text-indent Partial. Partial Works in 13 of 21
text-justify Buggy. Not supported Works in 0 of 21
text-orientation Not supported Works in 13 of 21
text-overflow Not supported Works in 13 of 21
text-shadow Works Works in 12 of 21
text-transform Works Works in 20 of 21
text-underline-offset Not supported Works in 7 of 21
text-underline-position Not supported Works in 8 of 21
text-wrap Not supported Works in 4 of 21
top Not supported Works in 11 of 21
transform fix Not supported Works in 7 of 21
transition Partial. Partial Works in 4 of 21
unit-ch Not supported 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 Not supported 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 Not supported Works in 15 of 21
unit-vh Works Works in 17 of 21
unit-vmax Not supported Works in 15 of 21
unit-vmin Not supported Works in 15 of 21
unit-vw Works Works in 18 of 21
user-select Not supported Works in 3 of 21
vertical-align Works Works in 21 of 21
visibility Works Works in 13 of 21
white-space Partial. Partial Works in 15 of 21
white-space-collapse Not supported Works in 4 of 21
widows Not supported Works in 10 of 21
width Works Works in 20 of 21
word-break fix Not supported Works in 4 of 21
word-spacing Does not support rem and ch values. Partial Works in 14 of 21
writing-mode Not supported Works in 13 of 21
z-index Works Works in 17 of 21