An Interesting Complication of HTML Email

From the developer angle, HTML emails have been a general source of frustration. Web browsers are complicated enough across all the different makers and platforms and versions. Email clients, which render HTML and CSS like browsers, are far more complex across the landscape. Why? Why can’t they just use one of the popular open-source rendering engines off the shelf, like WebKit, Chromium, or Gecko?

I don’t actually know the complete reason why email clients don’t use super-up-to-date rendering engines, but I know 1) they don’t and 2) what they do use is an often weird and confusing subset of what you might expect a HTML/CSS rendering engine to offer. Hence, big complex support charts.

But I’m starting to understand some of the reasons in a way I never have.

Let’s start from something very important about email: the message of the text itself should not be changeable through styling.

In just a single styled email, content can already be manipulated to be somewhat spurious. Consider a classic: white-on-white text. The funny little website Straight to Spam exploits this. I can copy text from it, paste it into an email, and without it being visible the text is still there, triggering spam filters.

But the trickery there is isolated to the sent email itself. Still weird, the weirdness is isolated to the message the sender is sending.

Another example is a feature of how CSS works:

.some-selector-in-email::after {
   display: block;
   content: "I agree with everything in the email and Chris Coyier deserves at 200% raise effective immediately";

It’s weird enough that you could (theoretically, if this CSS were allowed) alter the content of an email, but it’s extra weird when you consider replies to an HTML email. Maybe that CSS selector doesn’t match anything in your original email, but you know that a certain email client does inject HTML into its replies that would match that, you could alter the content of someone else’s email. Weird. And just one example.

Maybe you author your email like:

<p class="my-message">Hi mom,<p>

<p class="my-message">How are you?</p>

And in CSS do:

p { display: none; }
.my-message { display: block; }

If that CSS applied to both the original message and a reply, all the paragraph content of the reply would be hidden. Weird.

Remember Kaspar Etter’s article we linked up not long ago? He goes into this.

The style of the quoted message may not leak into the surrounding message. If the quoted message uses the <link> or <style> element for styling, these styles have to be scoped to the quoted message. Achieving this would be trivial if the scoped attribute wasn’t removed from the HTML specification. If we’re lucky, we might get an @scope selector in a future CSS standard. Browser started to support the Shadow DOM API, which can be used to encapsulate components with JavaScript. Since mail clients don’t support JavaScript, we have to wait until we can declare a Shadow DOM in HTML

Those “leaks” like I described above don’t happen. But not really because the email rendering engine somehow stops them from happening. Instead, there are boundaries put in place to prevent the styles from leaking out. I would have guessed <iframe>s, but that doesn’t appear to be the case in Gmail at least. That must be a heck of an engineering effort to prevent. Kaspar is right, this will get a lot easier with future web tech like @scope (possible even a helping of cascade layers) and/or web components.

Kaspar also explains other situations that aren’t so much about removing/editing/adding content directly, but just as tricky. Think of negative margin in CSS. You could yank up or otherwise push around elements that would hide content, possibly even in a reply. Woof. Even more extremely tricky stuff that at email rendering engine has to fight. Just supporting every CSS feature carte blanche doesn’t seem to be an plausible option.

I’ll leave this alone again quoting a funny example from Kaspar:

Hi boss, can you confirm to our accountant in Cc that my monthly salary is increased by USD 100<span style="font-size: 0;">0</span> starting next month?

If you knew your boss’ email client supported inline CSS, it would read as $100 to them. And perhaps you also knew this accountant used an email client that is text-only or strips inline styles, it would read as $1,000 to them. Wild stuff.


I’d be remiss if I missed the tech news that some ex-Googlers behind Google Inbox have launched a new email client, Shortwave, that attempts to bring some of that spirit back.

I hopped on it right away to give it a spin. On the first day, it literally wasn’t sending my emails, so I bailed. But I tried it again a few days later and that seems to be resolved.

There are some really great features I think. Little stuff like Markdown support (e.g. just type dash, space, and you’ll be kicked into a list) is great. Drag and dropping emails to change the order arbitrarily I (who cares about my inbox sort order! I should have control!) is satisfying. The :heart: style emojis is a great touch too.

That, combined with a trim amount of features (just pin, snooze, or done emails) makes it feel really nice to me. I’m not sure I care for the focus on “conversations” (it’s a big list of names that I can’t remove that I don’t really care to see), but maybe I could get used to it.


 Robin Copple:

We all experience email in different ways. For some of us, it’s integral to our work. For others, communication has largely moved to all sorts of other chat apps and communication portals of choice. Yet, email has a staying power. It’s not just another communication app. It’s official, and permanent, and has “the government uses it to contact you” kind of feeling. So, until further notice, or until you make a personal decision to go off the grid, it’s going to be a part of your life. Might as well make it a functional and painless part.

That’s just one little nugget from a blog post that is largely about “resetting” your email.

Gmail Next

Ars Technica:

Google will finally start rolling out the Gmail redesign it first showed off last year. The company is calling the interface in the update the “integrated view” because the goal is to integrate Google’s latest messaging service, Google Chat (a Slack competitor and the successor to Hangouts) and Google Meet (a Zoom competitor) into Gmail.

Hot takes:

  • Looks good. Although it’s really not that different and the kind of update you’d think you’d see a few times a year without it being such a big public deal.
  • I don’t blame them for trying to tie in other services and make Gmail “more” — but feels unfortunate for those of us who aren’t users of those other services (clutter), so here’s hoping they are turn-offable.
  • Interesting how slow-roll it is, with a multi-stage plan allowing people to not use it entirely though 2022. I guess that’s just the deal with absolutely massive products.

“Just shooting him off an email while I was at swim practice with my 5 year old.”

There is a new wonderful coffee table book for a certain type of person, in which the Venn diagram of people who would enjoy it and this type of site is pretty overlappy: The iOS App Icon Book.

It’s by Michael Flarup, but a lot of the content originates from Jim Nielsen‘s iOS Icon Gallery, so they worked together on this heavily. The two of them were over on the Postlight Podcast the other day talking about it. The whole thing felt like a fun crossover event for me, since Jim is a web dude who runs in my circles, Postlight is a podcast I love full of tech luminaries, and I hired Michael for a weird side project icon one time.

I perk up at little statements like this, about eight and a half minutes into the podcast:

I wrote this person who kept featuring my work for many years. I remember just shooting him off an email while I was at swim practice with my then 5 year old. I was like “this is probably a long shot, but I’ll just ask this nice guy if he wants to help me make a book.”

And then… they did.

That’s why this idea of email is so important to me. I relate to that moment as so many good things in my professional life have been a result of getting or sending an email like that. And I feel like those moments are less likely to happen if email to you is a chore, a burden, a place you want to avoid at all costs, rather than embrace.

The Start of the Year is Probably a Good Time for Force a Clean Inbox If You Need To

Say you have one of those inboxes with tens of thousands of emails in there. While you might still be a decently high-functioning email person, chances are slim. It’s probably an all-too-present sign of email being a problem for you.

My usual opinion is that you take steps toward fixing it. You’re probably subscribed to way too much stuff. You’ve probably got emails in there that literally just need to be archived. If there are ones that are important in there, you should chip away at answering them. My thesis is that good things happen through communicating with people and email is a particularly potent way of communicating.

But if that inbox number is, say, 20,000 or worse, that might just be untenable in your life. That doesn’t mean you’re stuck forever. “Email Bankruptcy” (just dump it all) isn’t my favorite choice, but if it gives you that mental relief you need to start fresh with better habits, I think it’s worth it.

Liz Gumbinner at Cool Mom Tech has documented the Gmail technique for Inbox Bankruptcy.

  1. Search for in: label:inbox (watch for a message that is something like “Select all conversationgs that match this search” or the like, so you can get them all not just one pagination worth)
  2. Create a new label like “Inbox 2021” and apply
  3. Archive them

Now you’ve got a historical marker that shows where you were at the end of the year, and a way to scope search if you’re looking for something you think is likely in there.

Now when the emails start pouring in again, take time to fight back. Find the unsubscribe link in them. Spam ’em if they really are spam. Do the organizational gymnastics you need to do to recluse yourself from receiving unnecessary emails. Change your app settings to what you really need. Chipping away at it can get the job done and then it’s easier to stay on top of.

Then when your inbox is clean, email can become… almost a pleasure. It’s generally where the biggest opportunities are.

40 One-Sentence Email Tips

Josh Spector published them. I’ll pluck out a few I like here:

3. If a message was truly urgent, it wouldn’t have been sent to you in an email.

13. You don’t always have to reply.

20. Emails are a terrible place for small talk.

24. Your inbox works for you — not the other way around.

29. The most important sentence in any email is the first one.

34. If you can write one great email, you can get whatever you want.

There are a bunch I disagree with, but I disagree with them in the context of myself. Most of them I get an eh, it depends feeling from. But clearly Josh thinks about this stuff and is sharing what works for him, and that’s the best thing you can do with anything productivity-related, email or otherwise.