Why CSS is not working when sending HTML email?

2019-06-23 08:36发布

站内文章 / HTML/CSS
37 0 0

问题:

As I am using SendGrid service at heroku, I've noticed that when I send HTML based emails, the CSS has no effect, can any one tell me what could be wrong ?

I tried to send it as html.haml, html.erb, but both didn't work, although the images are viewed correctly in the sent emails.

Any idea ?

回答1:

Try using inline styles instead of an external stylesheet. Like this:

<div style="color:green;" id="div"></div>

instead of something like this:

<style>
#div{
color:green;
}
</style>

<div id="div"></div>

(Thanks Kelvis Miho for pointing this out)

Edit: I searched for @Joe's text on Google, and I realized that most of it was copied from http://css-tricks.com/using-css-in-html-emails-the-real-story/ .

Edit: Joe edited his post to include the reference link.

Remember that most email clients don't support a lot of CSS, so you should mostly be using both images, and tables.

You could, for example, code a wonderful email design and then screenshot it. With tables, you could put the logo on the top in the center, the screenshoted beautiful "featured" pane on the left, the "discount" as the content in the center under the logo, ect.



回答2:

What you CAN'T do:

  • Include a section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't.
  • Link to an external stylesheet. Not many email clients support this, best to just forget it.
  • Background-image / Background-position. Gmail is also the culprit on this one.
  • Clear your floats. Gmail again.
  • Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn't work.
  • Font-anything. Chances are Eudora will ignore anything you try to declare with fonts.

There are quite a few more things you should be aware of. For a great complete list of what online email services support what, check out this article at Xavier Frenette.

What you CAN do.

In two words, inline styles. It's not as awful as you might think, since we are basically developing a one-off email, inline styles are not nearly as egregious as using them on a website.

from this site



回答3:

You need to use inline styles.



回答4:

To me, the premailer-rails gem works like a charm. You just need to add this gems to your Gemfile

gem 'nokogiri'
gem 'premailer-rails'

And all your emails will include styles from the assets folder. I usually create a email.css.less in the assets folder and then I include it on the <head> of the email like this

<%= stylesheet_link_tag 'email.css' %>

And also, when I need to include an image I found this helper that allows me to attach images into the email so they have logo and stuff.

module EmailHelper
  def email_image_tag(image, **options)
    attachments[image] = File.read(Rails.root.join("public/#{image}"))
    image_tag attachments[image].url, **options
  end
end

And in the .erb template

<%= email_image_tag "img/logo.png", :class => "some-class" %>

Hope it helps someone, Regards



回答5:

Make sure that you are putting internal style inside head tag

eg:

<head>
    <style type="text/css">
    ...
    ...
    </style>
</head>

Note: Only inline style and internal style (must be in head tag) supports.



标签： css ruby-on-rails-3 heroku html-email sendgrid
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~