Apple Mail iOS vs Gmail iOS: CSS Support Differences
Apple Mail iOS renders with WebKit; Gmail iOS renders with Gmail Mobile. The gap runs almost entirely one way: 117 features work in Apple Mail iOS and break in the other, against 1 in the reverse direction. Build for the stricter one and the permissive one follows.
Support data derived from caniemail.com (MIT) - last synced Nov 10, 2026 - engine data v0.18.22
104
work in both
the safe intersection
117
only in Apple Mail iOS
breaks in Gmail iOS
1
only in Gmail iOS
breaks in Apple Mail iOS
67
partial on one side
renders, with caveats
Works in Apple Mail iOS, breaks in Gmail iOS
Each of these needs a fallback if the send reaches both.
- <audio>
- <bdi>
- <dialog>
- <link>
- <marquee>
- <meter>
- <object>
- <picture>
- <progress>
- <rp>
- <rt>
- <ruby>
- <svg>
- <wbr>
- [aria-describedby]
- [aria-labelledby]
- [command]
- [hidden]
- [loading]
- [popover]
- [required]
- [srcset]
- @font-face
- @import
- @keyframes
- @media device-pixel-ratio
- @media hover
- @media prefers-color-scheme
- @media prefers-reduced-motion
- @supports
- accent-color
- align-items
- anchor-links
- animation
- aspect-ratio
- backdrop-filter
- block-size
- border-image
- border-inline
- border-inline-individual
- border-inline-longhand
- border-radius-logical
- bottom
- clip-path
- color-scheme
- conic-gradient
- custom-properties
- filter
- flex
- flex-basis
- flex-direction
- flex-wrap
- grid-template-columns
- hyphenate-character
- hyphens
- inert
- inset
- justify-content
- left
- light-dark
- list-style-image
- margin-block-start-end
- margin-inline-block
- margin-inline-start-end
- mask-image
- max-block-size
- max-inline-size
- min-block-size
- min-inline-size
- modern-color
- nesting
- orphans
- outline-offset
- padding-block-start-end
- padding-inline-block
- padding-inline-start-end
- pseudo-class-default
- pseudo-class-nth-last-of-type
- right
- scroll-snap
- shape-margin
- shape-outside
- tab-size
- text-decoration-skip-ink
- text-decoration-thickness
- text-emphasis-position
- text-shadow
- text-underline-offset
- text-wrap
- top
- transform
- transition
- visibility
- white-space-collapse
- widows
- z-index
- ::after
- ::before
- ::first-letter
- ::first-line
- ::marker
- ::placeholder
- :checked
- :first-child
- :first-of-type
- :has
- :hover
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-of-type
- :only-child
- :only-of-type
Works in Gmail iOS, breaks in Apple Mail iOS
Partial on one side
These render in both, but one client applies caveats the other does not. They fail quietly, which makes them the expensive ones.
- <base>
- <body>
- <button type="reset">
- <button type="submit">
- <form>
- <input type="reset">
- <input type="submit">
- <select>
- <strike>
- <style>
- <ul>
- <video>
- [background]
- [target]
- @media
- @media orientation
- !important
- background-blend-mode
- background-clip
- background-origin
- background-size
- box-shadow
- calc
- clamp
- display
- fit-content
- float
- font-size-adjust
- gap
- html5-semantics
- list-style
- margin
- max
- meta-color-scheme
- min
- mix-blend-mode
- object-fit
- object-position
- overflow
- overflow-wrap
- position
- rgb
- rgba
- text-decoration
- text-decoration-color
- text-indent
- text-overflow
- text-underline-position
- unit-initial
- unit-vh
- user-select
- white-space
- word-break
- writing-mode
- :adjacent-sibling
- :attribute-selector
- :chaining
- :child-combinator
- :class-selector
- :descendant-combinator
- :general-sibling
- :grouping
- :id-selector
- :type-selector
- :universal-selector
- display:flex
- display:grid
A further 9 features render in neither client. Not a difference between them, but the other half of the answer to what you can actually use, so the four counts above deliberately do not sum to 298.
2 of 300 features have no confident data point for at least one of these clients, so they are excluded from every count above rather than assumed either way.
Where the divergence sits
Two pairs with the same headline number can be different problems. For these two it concentrates in CSS Properties.
- CSS Properties 95
- Pseudo-Classes & Selectors 28
- HTML Elements 26
- HTML Attributes 10
- CSS At-Rules 10
- CSS Functions 6
23 of these already have a fix
Each links to a copy-paste snippet that keeps the feature working in Gmail iOS without dropping it in Apple Mail iOS.
Check your own HTML against both
Paste your email
Questions
- How different are Apple Mail iOS and Gmail iOS?
- They disagree on 185 of the 298 features verified in both clients, or 62%. 104 features render in both and are the safe intersection to build on.
- What works in Apple Mail iOS but not Gmail iOS?
- 117 features, including <audio>, <bdi>, <dialog>, <link>, <marquee> and 112 more. Each needs a fallback if the send reaches both clients.
- Which engines are these two clients using?
- Apple Mail iOS renders with WebKit; Gmail iOS renders with Gmail Mobile. Where two clients share an engine the divergence is usually configuration, and where they do not it is the engine itself.
- Is this measured in the real clients?
- No. These are documented support levels derived from caniemail.com (MIT-licensed), carried in @emailens/engine data version 0.18.22 and last synced Nov 10, 2026. That sync date is not a test date: caniemail's own per-feature tests run from Feb 28, 2019 to Sep 16, 2026. Anything described as a transform is applied per those documented rules rather than captured from a real client.
Test your email in Gmail, Outlook and Apple Mail
Preview rendering, catch CSS issues, and see what Outlook does to your VML. Free, no account. All 21 clients with one.
Check your email, freeNo signup · Five clients free, Outlook Classic included · All 21 with an account