Gmail will now support CSS media queries | Hacker News Reader

Gmail will now support CSS media queries

googleappsdeveloper.blogspot.com

204 pointssynotic67 comments

This is mostly a distraction, but I still wish text/enriched had won instead of HTML email: https://en.wikipedia.org/wiki/Enriched_text

If only because it's simpler, so it might have been more fully and consistently supported (and it's not a security nightmare).

Regarding the example in the Wiki page: Is it possible to use hex colors codes or rgb color codes? The example uses color name.

It is indeed!

     Color
          causes the affected text to be displayed in a specified
          color. The "color" command requires a parameter that is
          specified by using the "param" command. The parameter
          data can be one of the following:

               red
               blue
               green
               yellow
               cyan
               magenta
               black
               white

          or an RGB color value in the form:

               ####,####,####

          where '#' is a hexadecimal digit '0' through '9', 'A'
          through 'F', or 'a' through 'f'. The three 4-digit
          hexadecimal values are the RGB values for red, green, and
          blue respectively, where each component is expressed as
          an unsigned value between 0 (0000) and 65535 (FFFF). The
          default color for the message is unspecified, though
          black is a common choice in many environments. When
          nested, the inner "color" command takes precedence.

(https://tools.ietf.org/html/rfc1896#page-5)

Odd that it's 96bpp colour, of all things.

In fact, you have even more options, not just two:

1) RGB: #rrggbb (rgb hex) / rgb(r,g,b) (rgb int 0-255) / rgba(r,g,b,a) (as before, plus alpha). In addition, rgb/rgba support percentage values instead of 0-255.

2) red (color names)

3) hsl(h,s,l)

4) cmyk(c,m,y,k)

For compatibility with anything except Thunderbird (which supports all four formats IIRC), stick with #rrggbb or plaintext names. Webmailers are especially prone to filtering by regex (ugh), and stripping out everything they don't know.

I'm not seeing that on the text/enriched spec? You might be thinking of HTML email.

I'm writing a text-rendered board games by email service and this would have been a perfect format for me. If only.

I was expecting something significantly different from HTML but this is really just pre-CSS HTML with different tags. At this point, I can't imagine another SGML based language for formatting is necessary.

If everyone could just agree on a safe subset of HTML for email then that's all we would need.

Thunderbird literally implements it by rewriting it into HTML: https://dxr.mozilla.org/comm-central/source/mailnews/mime/sr...

text/enriched was basically proposed as an interim result for richer text than plain text back when HTML email was controversial.

There is a more-or-less defunct community group at the W3C about building an HTML email specification. In practice, the elephant in the room remains Outlook, which uses the same HTML engine built into MS Word, which, IIRC, is built on IE 5.5.

Unlike HTML, the the syntax is minimal and trivial to parse (there's no attributes or implicitly-closed tags, and there's only a single character entity (<<)), and it's limited to a very small set of clearly-defined formatting options.

In lacking most of HTML's complexity and features, it lacks its security issues, too. And in being very small, you can reasonably expect the whole spec to be implemented.

But yes, with a very strictly validated, very small HTML subset you could get a similar effect. At that point, though, why use HTML?

The last time this got submitted and ended up with comments is here (though this is the forth time this has been submitted in as many days).

https://news.ycombinator.com/item?id=12500838

I really dislike this new dedup algorithm.

I feel like I'm reading Hacker Rehashed News

For those who are not familiar in Email's CSS support, Gmail is actually a blocker, not a mover: https://www.campaignmonitor.com/css/

You say that like it is a bad thing.

I'm really pleased that email cannot set a style header and has limited ability to have the email deviate greatly in presentation from other email I receive.

Why not block styling on web pages too then? I mean, what makes an email different from a web page, other than that it has been sent to you?

Just playing devil's advocate here.

One is push, the other is pull. I can choose never to go to a URL again, but I can't choose to never receive spam from the same person from a different address and server.

Also, I think many people do that with AdBlock, so it's not unheard of to block styling on webpages of dubious origin.

> what makes an email different from a web page, other than that it has been sent to you?

I think it's to do with perceived ownership of the environment in which the information is consumed.

Your website... feel free to style, brand, make pretty or ugly. You can make the experience consistent within your realm.

My inbox... I get to control my workflows, how I consume things, in which order, etc. I choose to make the experience consistent within my realm.

That holds fairly well as a definition for why I prefer chat clients that grant me the ability to make all messages consistent, and that do not allow the sender to dictate terms. It also holds up with things like Netflix, it's their realm they can knock themselves out on their design.

It does seem to be whether the environment it is presented is "yours" or "mine".

It's your client, but the site's content, in both web and email cases.

You are free to set your client to ignore styling on the content, but the content should be stylable for everyone else that wants it to look good.

However Gmail does support inline CSS.

If you want to show your styles to Gmail users and you have to inline your CSS in every HTML tags you want to alter, which is very ugly and made the email size unneeded large.

Most every email client supports inline CSS, and in my experience, inlining your CSS for emails is the safest bet to ensure your styling is consistent across all email clients. What you can't inline ever (on email or web) is CSS media queries. IMHO, I don't think media queries are supported broadly enough to use them extensively, though Gmail supporting them is a step in the right direction.

Changelog on this chart indicates it was last updated in 2014.

It's a good start, and something that's very useful for people coding HTML emails.

That said, we still need to get this sort of thing in Microsoft Outlook, and both that and Gmail really need to support CSS to something of a normal standard, like with say Apple Mail or what not. There's no real reason email standards should be different to browser ones, except with the former not having Javascript included.

Good luck stopping a browser from implementing a "fun" javascript API just because it opens a security or usability hole in email.

Put it in a safe iframe, whats the catch?

Everything. iframes can't fuck with you code, but they are 1. displayed in your page (is this a good idea, does this iframe agree with how your page will display it). 2. Is leaking information to this iframe (and consequently, that iframe's server that this email had been opened) a good idea (no. 100% it's not.). 3. Can someone else contrive another vector of page control or information leak that suits their motives and hasn't been considered a priori by you (also yes, 100%. Never underestimate the motivation or creativity of others).

Never, ever, EVER embed an iframe thinking it will make your life better.

Are most of these protected by sandboxed iframes? What kind if leak are you talking about? Referer leak? That is easy to fix, but what else?

I dont think email sender cares about how iframe is rendered. They currently render in a rectangle, and they will keep render in a rectangle.

No email client that I'm aware of supports JS in email. (Thunderbird used to have a hidden option for turning it on, but even that was removed when we doubted the ability to enforce sandboxing at all). All email clients sanitize the HTML in email to some extent anyways.

You can have a lot of fun placing elements over the web mail client buttons.

This is a great thing. One more metric by which to filter out spam. If I am receiving an email from an actual person, it will be plain text, perhaps with 1-2 links or images, and will not contain any CSS.

A bit passive aggressive don't you think?

There are plenty of reputable email clients that add extra styling to make email look better that are not necessarily spam.

I filter out HTML emails too, and a lot of mailing lists do as a standard practice. For some reason I find a large amount of sites which specify precise expectations for email are either German or somewhere in that region. Here's two examples:

https://www.gaertner.de/~neitzel/mail-policy.html

https://www-user.tu-chemnitz.de/~heha/email.var

The prevailing attitude seems to be "If you can't configure your email client to send plaintext or follow the other rules I've listed on my site, I'm not interested in communicating with you."

Well, if you ever end up working with a company for which someone created a responsive email footer, I hope your missing their email is not a big deal.

In that case, the company domain goes on the whitelist, after being noticed on a weekly glance at the spam folder. The existence of CSS headers isn't a catch-all, but is one more sign that the email is mere marketing, rather than an attempt at human communication.

You don't imagine that gmail users will be a prime source of CSS-decorated email within 12 months?

I don't imagine that, no. My experience is that gmail addresses are primarily personal email addresses, not mass-marketing emails intended to be a full web page embedded into an email viewer.

Indeed. If anything is going to be an "e-mail killer", it's not going to be Slack, et al., but allowing more "freedom of design" for the senders. We'll drown in crap, and people will switch to using anything that has stronger restrictions on content (like most IMs).

I always wish we could go back to plaintext emails.

Why not just go back to morse code.

Because it's harder to read.

Plus the accessibility story is a nightmare.

Morse is readily adaptable to whatever you can sense: I've experienced it with sound, light, and vibration. Taste, heat, and smell might not work so well.

For input, you need to be able to reliably close and open a switch. This may be difficult for people with tremors, but many accessibility systems are built around single bit inputs, so it's a start. If you can manage another input method, it can be translated to Morse as well.

Internationalization is harder, it's not a good fit for non-alphabetic languages.

You are correct, I was being snide.

Morse code is highly translatable to other senses assuming that the audience had a reason to learn it. I can't think of a single disability with lack of temporal awareness, and only a few with impediments to temporal perception (as you noted).

That said, I don't know ANY blind sea captains. This will be a problem for adoption.

Pretty much every single html email also has a plaintext version attached, otherwise it hurts the deliverability. You just need to set your email client to use the plaintext version.

"Your client does not support HTML."

Yeah, thanks. I'm doubly ecstatic when the unsubscribe link is in the HTML version and not the text version.

If only.

One of the benefits of using a text-based email client, is that it forces emails to be text.

Sadly... no it doesn't. I use emacs for my email, and while I could make it not render html email at all, the vast majority of my correspondence is with people sending rich emails through outlook. So... yeah, html it is.

yeah, it does. There are tricks to make it try to look like rendered html, but they all fall flat IME, and it ends up coming across as text. If you get rid of that expectation, it works fine. I get plenty of html emails every day, but all I see is text.

I think we were just talking past each other. I took your statement to mean convincing others to stop sending HTML emails. You meant it more to just focus on the text. (If I am reading correctly.)

In that, yes, I agree. Bonus points for being able to inline respond to messages again. (I hate Outlook's forcing top posting.)

Ah yes. I was confused by your response. That makes more sense. No, I generally don't ask push others to use text-based email, but when asked, I explain the difference with a definite preference for text.

One thing that seems to have helped me (but is very much YMMV), is when I reply, it keeps the html code all messed up. Then when the person I'm discussing with sees that, they'll occasionally ask me why their email is messed up. That gives me an opportunity to explain html vs text, and they usually would rather their email "work everywhere".

That is great. We use emarsys for marketing emails which extensively uses media queries to build a mobile specific version of your template.

The example they give with a YouTube email. I wonder if they decided to make the change because of internal pressure from those sending out marketing emails.

Does anyone know why it took them so long to do this?

I'm going to guess they didn't think it would affect their bottom line too much. This was never a priority for Google.

I'd bet part of it was making sure that it wouldn't leak information. They've spent a good deal of time on that in the past few years (images in email are fetched by google, rather than your browser). If done incorrectly it could be used to help fingerprint the email client in some way (screen size, which queries are listened to, etc.) which could enable another email to be sent that attacks a vulnerable device (think stagefright like media attack).

They've historically been very restrictive about what they do and don't allow in emails—iirc, they even stripped CSS blocks entirely until recently. Even now they only accept a specific list of properties, selectors, and queries.[1] My impression is it's broadly in the name of security: if you allow arbitrary content inside a Google webpage, it's easy to imagine phishing running amok.

[1]: https://developers.google.com/gmail/design/css

The solution is very simple actually: place user-generated content like emails inside an iframe, after stripping out the JS. Add a CSP header disallowing external resource loads until the user confirms explicitly.

This way, content using position:absolute can't escape the iframe borders, and the mail gets to enjoy full responsiveness.

iframes require explicit sizing, it's hard to adapt the size of an iframe to the size of its contents. Gmail, for example, doesn't use iframes to display message contents.

There is a request to HTML to let iframes take the height of their contents (the main thing anyone wanted from <iframe seamless>, which is now removed from HTML), but it's gone nowhere as of yet.

a gentle hint: if you find yourself writing "the solution is very simple" and you're talking about something at the scale of gmail (or Firefox, or AWS, or Linux, or...), you can probably be assured there are a few things you haven't considered.

although this was announced on friday, it has yet to be enabled (at least on test emails i've been developing). I'm not sure why it was announced without the feature being generally available, but i guess whenever they flip the switch, old emails will be upgraded to use the style tags embedded in them?

Even without media queries, enabling <style> blocks in html emails is huge (google was the last holdout). For anyone developing html emails, this is a nice set of changes.

Personally, I'd love if Gmail would support markdown or retext.

I don't need any of this fancy.

I would just love to see an update to the Gmail app on iOS - very far behind Outlook imho.

I don't know what you're looking for in an email client, but Gmail's future is the Inbox app.

Maybe - I think we might see a bifurcation between the Gmail experience for consumers (Inbox) and what they provide as part of Google for Work.

I'm looking for something that resembles GMail's actual functionality that is currently supported by Outlook and a variety of other email clients. I would just prefer a Gmail-native app because the Gmail app works more smoothly with Gmail than Outlook or any other provider does - particularly around search.

I tried inbox for a while, it tries to be too intelligent and I ended up missing important stuff because of it.

Agreed, I had the same experience. I might be waiting for a password reset or shipping email, or something on a mailing list, and with Inbox it was more of a guessing game.

I've gone back to using standard Gmail but added the Inbox Categories, which I find to be very useful on top of the labels & filters I have in place.

Whoa! That's awesome. Now, if all the other webmailers would follow suit...

Welcome to 2011!

Url changed from https://gmail.googleblog.com/2016/09/better-emails-tailored-..., which points to this, which is more specific.

Reply on news.ycombinator.com