caniuse.com shows calc()
can be used today in all modern browsers except Opera. But how good is the support for calc()
in email clients?
Please provide a link to blogs or guides which talk about this.
EDIT
I am referring to the CSS calc()
function
EDIT: For Css Calc(), I would say that maybe you could use it in Apple Mail or iOS native client, but even those are not likely. All others have almost no CSS3 support. See https://www.campaignmonitor.com/css/ for a pretty good list of available CSS and HTML tags in HTML email. Admittedly, this is not the Be-All list of what works in HTML emails, but as Calc() is not even listed, I would view this as a no.
EDIT2: Did a simple table html email to check results using Email On Acid and got surprising results.
https://www.emailonacid.com/app/acidtest/display/summary/hM0n3RkP89L9bfWOtXlTpQR238VwFFotgq4PkQpvBOpUf/shared
Basically looks like it works on:
Apple Mail
Outlook 2011 (apple version)
Thunderbird
Android 4 native client
iOS native
Aol (browser dependant)
Outlook.com (browser dependant)
(GMail will also accept it! - but must be inlined)
This is better then I thought, but considering, it still doesn't seem to be that elegant a solution as it fails completely in many of the popular email clients - including every webmail app (GMail app, Yahoo app, etc). It may be a viable solution depending on your audience, but in general, I would not recommend.
Desktop Outlook for Windows has abyssmal HTML email support, its level of CSS compliance is poor and stuck in ~2001-era CSS 2.1 support. I don't believe it supports any CSS3 features (selectors nor properties). This is because it uses Word's layout engine. So calc
support is definitely not there - and unfortunately desktop Outlook happens to be the most popular desktop e-mail client.
For this reason, I don't recommend HTML emails contain any advanced features and should only be a lead-in with a link to an actual live webpage that contains the features and functionality you want to show users.
I think the existing answers and comments somewhat do answer the OP's question. There is an excellent blogpost on Medium, that more than ably outlines the support for calc()
on different mail engines. Relevant excerpts:
It works in Apple Mail (on iOS and OS X), Thunderbird, Outlook (iOS and Android apps), Gmail (webmail, iOS and Android apps), AOL (webmail), and the old Outlook.com (still present in Europe).
Outlook.com has one small quirk, though. The webmail will filter every property with a calc() that includes any parenthesis.
calc() isn’t supported in old email clients like Lotus Notes, or the latest Outlook for Windows (using Word’s HTML rendering engine). It also won’t work on Outlook Web App (both Office 365 and the new Outlook.com) and Yahoo (webmail, iOS and Android apps).
Also, in the future it might bode well for you or any poor soul out there tasked with the hideous task of birthing a mail template, to refer CampaignMonitor for what's supported and what's not!