email Styling HTML cho Gmail

tôi là tạo ra một email html có sử dụng một kiểu nội bộ, ví dụ:email Styling HTML cho Gmail

<!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 phong cách trong kiểu nội bộ được bỏ qua. Dường 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à lựa chọn duy nhất để tạo kiểu email HTML khi xem bằng Gmail không?

Nguồn

2012-01-29 Dónal

+14

Có điều này là duy nhất vì nhiều ứng dụng email dựa trên web không nhận ra bảng định kiểu nội bộ. Trên thực tế việc tạo 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ể được mong đợi hỗ trợ html 3.2 và css 1.1. – bdares

Bạn đã tạo email của mình bằng cách nào? Tôi có nghĩa là con bạn thêm mã của việc tạo ra ý định? – RaphMclee

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

Nguồn

2012-02-03 21:43:39 substate

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

Tuyệt vời, nó rất hữu ích. Cảm ơn –

Premailer này là trong Ruby, nguồn: https://github.com/premailer/premailer. Có một số khác trong Python: https://premailer.io/ source: https://github.com/peterbe/premailer, cả hai đều là mã nguồn mở. –

Gmail bắt đầu hỗ trợ cơ bản cho thẻ kiểu trong khu vực đầu. Không tìm thấy gì chính thức nhưng bạn có thể dễ dàng thử nó cho mình.
Dường như bỏ qua các bộ chọn lớp và id nhưng bộ chọn yếu 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 ra một thẻ phong cách trong lĩnh vực đầu riêng của mình giới hạn ở những div chứa body của mail

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

Nguồn

2014-05-22 12:43:46 fuchs777

Nó vẫn không hỗ trợ truy vấn phương tiện truyền thông mặc dù đó là một chút xấu hổ. Các lớp và ID cũng rất hữu ích :) – Eoin

Bây giờ, các truy vấn phương tiện cũng hỗ trợ đầy đủ hơn cho kiểu dáng css. http://stackoverflow.com/questions/39759764/unexpected-value-fileuploadmodule-imported-by-the-module-uploadermodule-ng – crowmagnumb

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

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

này do thỏa thuận hợp cực kỳ tiện dụng khi sử dụng mẫu giống như những người nêu trên từ MailChimp, theo dõi chiến dịch , vv như họ, 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 rời khỏi phần phong cách của bạn cho các chương trình thư sẽ đọc nó và đặt tất cả các kiểu nội tuyến để có được khả năng đọc phổ quát hơn ở định dạng mà bạn muốn.

Nguồn

2015-03-22 22:59:55

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 các thẻ <style> hoạt động trong Gmail.

Ví dụ: nếu bạn đang gửi email bằng MailChimp, CSS của bạn từ <style> thẻ sẽ tự động được inline theo mặc định. Với giống phi phi, bạn có thể kích hoạt chức năng này (mặc dù nó tắt theo mặc định for performance reasons) bằng cách kiểm tra "Inline CSS Styles trong email HTML" hộp trong "Gửi Defaults" của tab Settings:

Image showing how to do this in Mandrill

Nguồn

2015-05-30 11:27:27

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 tại là rolling out support cho thẻ style trong số head cũng như 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 an toàn khi 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 official gmail CSS docs.

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

Nguồn

2016-09-30 19:05:09

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

@ArianHosseinzadeh Điều gì không hiệu quả? Đã thêm một tham chiếu đến tài liệu của họ về vấn đề này. –

Chúng tôi đã thử nó ở Litmus, và nó bỏ qua các kiểu chữ không phải là nội tuyến. Bạn đã thử

email Styling HTML cho Gmail

Trả lời