5

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

Anubhav
  • 7,138
  • 5
  • 21
  • 33
  • 3
    I doubt you will find much information in blogs and the like about this. Reason is that html emails are typically frowned upon by programmers, they regard html emails as unnecessary bloating of a perfectly simple thing: an email. If you want to find out more, then ask yourself: what html rendering engine is used in the various email clients. That will answer the css support available. Thunderbird uses the gecko engine, kmail uses webkit these days, not sure about the evolution email client, actually, MS-Outlook uses the MS-IE engine, so it is always a bit incompatible with all others. – arkascha Oct 10 '15 at 13:45
  • `calc()` is JavaScript-based, so I'd say it's very unlikely. HTML emails generally require CSS of about ten years ago. – sevenseacat Oct 10 '15 at 13:47
  • 2
    @sevenseacat I doubt that the OP referred to the js function. More likely the css calc() function is meant which is proposed in CSS3: https://developer.mozilla.org/de/docs/Web/CSS/calc – arkascha Oct 10 '15 at 13:49
  • 2
    Hello the best way is to check here : https://www.campaignmonitor.com/css/ It's like https://caniuse.com/ but for emails – Laurent Khoudja May 08 '18 at 15:23
  • In reply to comments above: (1) No, you CANNOT determine what will work in an email by determining what rendering engine is used, because email clients can and must restrict these engines for security & privacy reasons. E.g., Thunderbird may use Gecko, but JavaScript won't work in an email. (2) No, `calc()` is *not* JavaScript; it’s pure CSS. (3) TYVM to Laurent for that excellent resource & description! :D – Alan H. Apr 13 '22 at 18:23

3 Answers3

4

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.

Gortonington
  • 3,557
  • 2
  • 18
  • 30
4

I think the existing answers and comments somewhat do answer the OP's question. There is an excellent blogpost on FreeCodeCamp, 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!

Alan H.
  • 16,219
  • 17
  • 80
  • 113
Sayan
  • 2,053
  • 3
  • 25
  • 36
2

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.

Dai
  • 141,631
  • 28
  • 261
  • 374
  • 1
    The article is from over 3 years ago (September 2012) and is no longer relevant. Please check out - https://emailclientmarketshare.com/ and you will see Outlook is not nearly as prevalent as previously and that the majority of the client share it does have is in a B2B world and not B2C. I also disagree with the 'advanced features' I think with the right fallbacks, there is no reason an email cannot have animations or carousels or any high end functionality for supported users - especially with iOS being most prevalent. (http://freshinbox.com/resources/techniques.php) – Gortonington Oct 13 '15 at 12:28
  • Has there been an update on this? – Shad Jun 20 '23 at 08:05
  • 1
    @Kid Over the past year or so, Microsoft seems to be transitioning desktop Outlook to using `MSWebView2` which uses the Blink engine (i.e. Chromium) but nothing definite _yet_ - so here's to hoping (at the extreme-end, I've heard rumours that desktop Outlook will be killed-off entirely and rewritten as an Electron app (...oh dear), but at least they'll finally be able to get the same UX on WIndows, macOS, and maybe even Linux, whereas Outlook-for-Mac has always felt like a knock-off. – Dai Jun 20 '23 at 08:16