Settings

Theme

Gmail will now support CSS media queries

googleappsdeveloper.blogspot.com

204 points by synotic 9 years ago · 69 comments

Reader

TazeTSchnitzel 9 years 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

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

  • wvenable 9 years ago

    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.

    • jcranmer 9 years ago

      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.

    • TazeTSchnitzel 9 years ago

      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?

  • colmvp 9 years 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 9 years 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)

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

    • mschuster91 9 years 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.

      • nightpool 9 years ago

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

  • beefsack 9 years ago

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

saurik 9 years 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

tszming 9 years 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/

  • buro9 9 years 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 9 years 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.

      • buro9 9 years 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".

        • nailer 9 years ago

          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.

      • ClashTheBunny 9 years 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.

    • tszming 9 years ago

      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.

      • chrisscastaneda 9 years ago

        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.

  • ianhawes 9 years ago

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

CM30 9 years 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 9 years ago

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

    • jcranmer 9 years ago

      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.

    • networth 9 years ago

      Put it in a safe iframe, whats the catch?

      • haimez 9 years 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 9 years 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.

  • fungi 9 years ago

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

MereInterest 9 years 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 9 years 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.

  • themodelplumber 9 years 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 9 years 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.

      • sokoloff 9 years ago

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

        • MereInterest 9 years ago

          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.

  • TeMPOraL 9 years ago

    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).

jeena 9 years ago

I always wish we could go back to plaintext emails.

  • Alex3917 9 years 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.

    • tedunangst 9 years ago

      "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.

    • pferde 9 years ago

      If only.

  • CaptSpify 9 years ago

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

    • taeric 9 years ago

      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.

      • CaptSpify 9 years ago

        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.

        • taeric 9 years ago

          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.)

          • CaptSpify 9 years ago

            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".

  • sumoboy 9 years ago

    Why not just go back to morse code.

    • hueving 9 years ago

      Because it's harder to read.

      • haimez 9 years ago

        Plus the accessibility story is a nightmare.

        • toast0 9 years 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 9 years 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.

robryan 9 years 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.

ykler 9 years ago

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

  • cpmsmith 9 years 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

    • mschuster91 9 years 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.

      • packetslave 9 years 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.

      • jcranmer 9 years 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.

  • simcop2387 9 years 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).

  • jazoom 9 years 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.

nsfmc 9 years 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.

tscs37 9 years ago

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

I don't need any of this fancy.

inthewoods 9 years ago

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

  • agildehaus 9 years ago

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

    • swiley 9 years ago

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

      • cmg 9 years 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.

    • inthewoods 9 years 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.

mschuster91 9 years ago

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

drannex 9 years ago

Welcome to 2011!

dang 9 years ago

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

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection