8 ms·

Gmail will now support CSS media queries

204 points by synotic 10y ago

ykler 10y ago
Does anyone know why it took them so long to do this?
- jazoom 10y ago
  I'm going to guess they didn't think it would affect their bottom line too much. This was never a priority for Google.
- simcop2387 10y ago
  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).
- cpmsmith 10y ago
  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 https://developers.google.com/gmail/design/css
  - mschuster91 10y ago
    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.
    - jcranmer 10y ago
      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.
    - packetslave 10y ago
      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.
inthewoods 10y ago
I would just love to see an update to the Gmail app on iOS - very far behind Outlook imho.
- agildehaus 10y ago
  I don't know what you're looking for in an email client, but Gmail's future is the Inbox app.
  - inthewoods 10y ago
    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.
  - swiley 10y ago
    I tried inbox for a while, it tries to be too intelligent and I ended up missing important stuff because of it.
    - cmg 10y ago
      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.
TazeTSchnitzel 10y ago
This is mostly a distraction, but I still wish text/enriched had won instead of HTML email: https://en.wikipedia.org/wiki/Enriched_text 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).
- colmvp 10y ago
  Regarding the example in the Wiki page: Is it possible to use hex colors codes or rgb color codes? The example uses color name.
  - TazeTSchnitzel 10y ago
    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 https://tools.ietf.org/html/rfc1896#page-5) Odd that it's 96bpp colour, of all things.
  - mschuster91 10y ago
    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.
dang 10y ago
Url changed from https://gmail.googleblog.com/2016/09/better-emails-tailored-to-all-your-devices.html https://gmail.googleblog.com/2016/09/better-emails-tailored-..., which points to this, which is more specific.
saurik 10y ago
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 https://news.ycombinator.com/item?id=12500838
- tambourine_man 10y ago
  I really dislike this new dedup algorithm. I feel like I'm reading Hacker Rehashed News
CM30 10y ago
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.
- haimez 10y ago
  Good luck stopping a browser from implementing a "fun" javascript API just because it opens a security or usability hole in email.
  - networth 10y ago
    Put it in a safe iframe, whats the catch?
    - haimez 10y ago
      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.
      - networth 10y ago
        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.
  - 10y ago
jeena 10y ago
I always wish we could go back to plaintext emails.
- sumoboy 10y ago
  Why not just go back to morse code.
  - hueving 10y ago
    Because it's harder to read.
    - haimez 10y ago
      Plus the accessibility story is a nightmare.
      - toast0 10y ago
        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.
        haimez 10y ago
        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.
- Alex3917 10y ago
  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.
drannex 10y ago
Welcome to 2011!
drannex 10y ago
Welcome to 2011!
robryan 10y ago
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.
mschuster91 10y ago
Whoa! That's awesome. Now, if all the other webmailers would follow suit...
nsfmc 10y ago
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.
MereInterest 10y ago
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.
- hrayr 10y ago
  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.
  - userbinator 10y ago
    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.gaertner.de/~neitzel/mail-policy.html https://www-user.tu-chemnitz.de/~heha/email.var 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."
- deleted 10y ago
  [deleted]
- themodelplumber 10y ago
  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.
  - MereInterest 10y ago
    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.
tszming 10y ago
For those who are not familiar in Email's CSS support, Gmail is actually a blocker, not a mover: https://www.campaignmonitor.com/css/ https://www.campaignmonitor.com/css/
- buro9 10y ago
  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.
  - amelius 10y ago
    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.
    - ClashTheBunny 10y ago
      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.
    - buro9 10y ago
      > 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".
tscs37 10y ago
Personally, I'd love if Gmail would support markdown or retext. I don't need any of this fancy.

204 points by synotic 10y ago

ykler 10y ago

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

jazoom 10y ago
I'm going to guess they didn't think it would affect their bottom line too much. This was never a priority for Google.
simcop2387 10y ago
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).
cpmsmith 10y ago
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 https://developers.google.com/gmail/design/css
- mschuster91 10y ago
  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.
  - jcranmer 10y ago
    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.
  - packetslave 10y ago
    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.

inthewoods 10y ago

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

agildehaus 10y ago
I don't know what you're looking for in an email client, but Gmail's future is the Inbox app.
- inthewoods 10y ago
  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.
- swiley 10y ago
  I tried inbox for a while, it tries to be too intelligent and I ended up missing important stuff because of it.
  - cmg 10y ago
    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.

TazeTSchnitzel 10y ago

This is mostly a distraction, but I still wish text/enriched had won instead of HTML email: https://en.wikipedia.org/wiki/Enriched_text 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).

colmvp 10y ago
Regarding the example in the Wiki page: Is it possible to use hex colors codes or rgb color codes? The example uses color name.
- TazeTSchnitzel 10y ago
  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 https://tools.ietf.org/html/rfc1896#page-5) Odd that it's 96bpp colour, of all things.
- mschuster91 10y ago
  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.

dang 10y ago

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

saurik 10y ago

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 https://news.ycombinator.com/item?id=12500838

tambourine_man 10y ago
I really dislike this new dedup algorithm. I feel like I'm reading Hacker Rehashed News

CM30 10y ago

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.

haimez 10y ago
Good luck stopping a browser from implementing a "fun" javascript API just because it opens a security or usability hole in email.
- networth 10y ago
  Put it in a safe iframe, whats the catch?
  - haimez 10y ago
    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.
    - networth 10y ago
      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.
- 10y ago

jeena 10y ago

I always wish we could go back to plaintext emails.

sumoboy 10y ago
Why not just go back to morse code.
- hueving 10y ago
  Because it's harder to read.
  - haimez 10y ago
    Plus the accessibility story is a nightmare.
    - toast0 10y ago
      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.
      - haimez 10y ago
        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.
Alex3917 10y ago
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.

drannex 10y ago

Welcome to 2011!

drannex 10y ago

Welcome to 2011!

robryan 10y ago

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.

mschuster91 10y ago

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

nsfmc 10y ago

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.

MereInterest 10y ago

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.

hrayr 10y ago
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.
- userbinator 10y ago
  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.gaertner.de/~neitzel/mail-policy.html https://www-user.tu-chemnitz.de/~heha/email.var 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."
deleted 10y ago
[deleted]
themodelplumber 10y ago
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.
- MereInterest 10y ago
  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.

tszming 10y ago

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

buro9 10y ago
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.
- amelius 10y ago
  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.
  - ClashTheBunny 10y ago
    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.
  - buro9 10y ago
    > 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".

tscs37 10y ago

Personally, I'd love if Gmail would support markdown or retext. I don't need any of this fancy.