Tạo kiểu email HTML cho Gmail


99

Tôi đang tạo một email html sử dụng biểu định kiểu nội bộ, tức là

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

Khi xem trong Gmail, có vẻ như tất cả các kiểu trong biểu định kiểu nội bộ đều bị bỏ qua. Có vẻ như Gmail bỏ qua tất cả các kiểu khác với các quy tắc nội tuyến, ví dụ:

 <h2 style="color: red">Email content here</foo>

Đây có phải là tùy chọn duy nhất của tôi để tạo kiểu email HTML khi xem bằng Gmail không?


14
Có, đây là cái duy nhất vì nhiều ứng dụng e-mail dựa trên web không nhận dạng được các bảng định kiểu nội bộ. Trên thực tế, định kiểu nội tuyến là cách được khuyến nghị để thiết kế bản tin html.
Mike

Theo như tôi biết, người đọc email có thể hỗ trợ html 3.2 và css 1.1.

Bạn đã tạo email của mình như thế nào? Ý tôi là bạn thêm mã tạo ý định?
RaphMclee

7
Nói chung, bạn nên sử dụng <html>thẻ mở ;)
Zaz

1
Gmail tệ. Ứng dụng iOS và ứng dụng dựa trên web nữa!
Adrian Florescu

Câu trả lời:


19

Các câu trả lời ở đây đã lỗi thời, kể từ hôm nay, ngày 30 tháng 9 năm 2016. Gmail hiện đang triển khai hỗ trợ cho stylethẻ trong headcũng như các truy vấn phương tiện. Nếu Gmail là mối quan tâm duy nhất của bạn, bạn có thể yên tâm sử dụng các lớp học như một nhà phát triển hiện đại!

Để tham khảo, bạn có thể kiểm tra tài liệu CSS chính thức của gmail .

Lưu ý thêm, Gmail là ứng dụng khách chính duy nhất không hỗ trợ style( tham khảo , cho đến khi họ vẫn cập nhật). Điều đó có nghĩa là bạn gần như có thể ngừng đặt các kiểu nội tuyến một cách an toàn. Một số khách hàng ít người biết đến vẫn có thể cần chúng.


1
Có vẻ như nó vẫn không hoạt động. Chúng tôi đã thử nó trong Litmus, nhưng nó không hoạt động. Có lý do đặc biệt nào không?
Arian

@ArianHosseinzadeh Điều gì không hoạt động? Đã thêm tham chiếu vào tài liệu của họ về vấn đề này.
Matthew Johnson

Chúng tôi đã thử nó trong Litmus và nó bỏ qua các kiểu không nội tuyến. Bạn đã thử <style> cho gmail sau khi họ thông báo chưa? nó đã hoạt động?
Arian

1
@ArianHosseinzadeh Tôi đã sao chép-n-dán từ ví dụ của họ trong tài liệu của họ và chạy nó thông qua putmail . Phong cách đang hiển thị trong gmail. Tôi đã xác minh ứng dụng gmail Android và gmail trong trình duyệt Chrome. Tôi đoán là các bản xem trước của Litmus chưa được cập nhật để phản ánh sự thay đổi.
Matthew Johnson

1
Tôi đã tự hỏi tại sao các kiểu của mình không hoạt động và nhận ra rằng tôi đã đặt chúng trong bodythẻ thay vì headthẻ.
palswim

67

Sử dụng các kiểu nội tuyến cho mọi thứ. Trang web này sẽ chuyển đổi các lớp của bạn thành các kiểu nội tuyến: http://premailer.dialect.ca/


2
Trang web này thật tuyệt vời. Hiển thị các cảnh báo và cung cấp cho bạn đầu ra văn bản thuần túy cũng như tạo lại HTML của bạn.
jamesbar2

1
Premailer này bằng Ruby, nguồn: github.com/premailer/premailer . Có một cái khác bằng Python: premailer.io source: github.com/peterbe/premailer , cả hai đều là mã nguồn mở.
Maxime R.

1
Câu trả lời này không còn chính xác. gmail hỗ trợ các kiểu và lớp và có tài liệu chính thức về chủ đề này - hãy xem câu trả lời của Matthew Johnson bên dưới.
mikemaccana

12

Gmail đã bắt đầu hỗ trợ cơ bản cho các thẻ kiểu trong vùng đầu. Không tìm thấy gì chính thức nhưng bạn có thể dễ dàng tự mình thử.
Dường như bỏ qua các bộ chọn lớp và id nhưng các bộ chọn phần tử cơ bản hoạt động.

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

nó sẽ tạo một thẻ kiểu trong vùng đầu của chính nó được giới hạn trong div chứa nội dung thư

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>

Nó vẫn không hỗ trợ các truy vấn Media mặc dù điều này hơi đáng tiếc. Lớp học và ID cũng rất hữu ích :)
Eoin

2
Giờ đây họ cũng thực hiện các truy vấn phương tiện và hỗ trợ đầy đủ hơn cho kiểu css. stackoverflow.com/questions/39759764/…
crowmagnumb,

7

Tôi đồng ý với tất cả những người ủng hộ các lớp VÀ kiểu nội tuyến. Bạn có thể đã biết điều này ngay bây giờ, nhưng nếu có một sai sót nào trong biểu định kiểu của bạn, Gmail sẽ bỏ qua nó.

Bạn có thể nghĩ rằng CSS của bạn là hoàn hảo, vì bạn đã làm điều đó quá thường xuyên, tại sao tôi lại mắc lỗi trong CSS của mình? Chạy nó thông qua Trình xác thực CSS (ví dụ: http://www.css-validator.org/ ) và xem điều gì sẽ xảy ra. Tôi đã làm điều đó sau khi gặp phải một số sự cố hiển thị Gmail và thật ngạc nhiên, một số khai báo kiểu cụ thể của Microsoft Outlook hiển thị là lỗi.

Điều này có ý nghĩa với tôi, vì vậy tôi đã xóa chúng khỏi biểu định kiểu và đặt chúng vào một only for Microsoftkhối mã, như sau:

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

Đây chỉ là một ví dụ đơn giản, nhưng, ai biết được, nó có thể hữu ích một lúc nào đó.


Cảm ơn, phần về CSS không hợp lệ đã giúp tôi rất nhiều thời gian. Nếu bạn vẫn còn xung quanh, hãy cho tôi biết.
Shadow Wizard là Ear For You,

1
Xin chào @ShadowWizard. Tôi đã đi một thời gian nhưng đã trở lại. Rất vui vì nó đã giúp bạn tiết kiệm thời gian.
Shawn Spencer

Chúc mừng, chỉ muốn đảm bảo tiền thưởng sẽ không bị lãng phí. :-)
Shadow Wizard là Ear For You

2

Như những người khác đã nói, một số chương trình email sẽ không đọc các kiểu css. Nếu bạn đã có một email web được viết sẵn, bạn có thể sử dụng công cụ sau từ zurb để nội dòng tất cả các kiểu của bạn:

http://zurb.com/ink/inliner.php

Điều này cực kỳ hữu ích khi sử dụng các mẫu như được đề cập ở trên từ mailchimp, trình theo dõi chiến dịch, v.v. vì chúng, như bạn đã tìm thấy, sẽ không hoạt động trong một số chương trình email. Công cụ này để lại phần kiểu của bạn cho các chương trình thư sẽ đọc nó và đặt tất cả các kiểu vào dòng để có được khả năng đọc phổ biến hơn ở định dạng bạn muốn.


Cảm ơn bạn đã liên kết nội tuyến.
Shawn Spencer

2

Lưu ý rằng các dịch vụ và công cụ để gửi email có thể nội tuyến CSS của bạn cho bạn, cho phép CSS trong <style>thẻ hoạt động trong Gmail.

Ví dụ: nếu bạn đang gửi email bằng MailChimp, CSS từ <style>các thẻ của bạn sẽ được tự động nội tuyến theo mặc định. Với Mandrill, bạn có thể bật chức năng này (mặc dù nó bị tắt theo mặc định vì lý do hiệu suất ) bằng cách chọn hộp "Kiểu CSS nội tuyến trong email HTML" trong phần "Mặc định gửi" của tab Cài đặt:

Hình ảnh hướng dẫn cách thực hiện việc này trong Mandrill


0

Tôi đã gặp vấn đề tương tự khi thiết kế mẫu trong Mailjet. Giải pháp của vấn đề là mã CSS được rút gọn bên trong <style>các thẻ.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.