2012-10-16 35 views
16

Gần đây tôi đã phát triển một bản tin cho khách hàng của tôi. Làm thế nào bao giờ tôi dường như không thể tìm thấy thông tin tốt về những gì css và html được an toàn để sử dụng trong các ứng dụng thư lớn.Thuộc tính html/css nào là thư an toàn?

Tôi nghĩ rằng có thể có những người ở đây có kiến ​​thức và chúng tôi có thể tạo một số loại danh sách những thứ hoạt động trong các ứng dụng thư khách lớn.

Đây là danh sách các ứng dụng thư khách phổ biến mà tôi đã mượn từ màn hình chiến dịch. (Nếu tôi quên bất cứ điều gì, vui lòng cho tôi biết)

Microsoft Outlook 
Apple Mail 
Hotmail 
Yahoo! Mail 
Gmail 

Câu hỏi là thẻ, thuộc tính, đặc biệt có trong các trình duyệt chính này và cách chúng có thể dễ dàng tránh được.

Thanks for the help,

Trả lời

6

Bạn có thể tìm thấy một danh sách toàn diện được hỗ trợ và không được hỗ trợ Tính năng CSS cho tất cả các ứng dụng email chính tại Email Standard Project

Thực sự là bootstrap hữu ích cho việc phát triển các email HTML, trong đó có một tấn eliminators biệt là HTML Email Bolerplate

Và như một quy luật chung - luôn luôn sử dụng bảng và tất cả các thẻ HTML cũ-trường (align, center, valign, color vv). Một số reading về chủ đề.

0

Gmail đã hỗ trợ thẻ style vào đầu

Bạn có thể sử dụng một tập hợp con của selectors CSS để áp dụng phong cách. Gmail hỗ trợ bộ chọn lớp, phần tử và id.

<html> 
    <head> 
    <style> 
     .colored { 
     color: blue; 
     } 
     #body { 
     font-size: 14px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id='body'> 
     <p>Hi Pierce,</p> 
     <p class='colored'>This text is blue.</p=> 
     <p>Jerry</p> 
    </div> 
    </body> 
</html> 

Và truy vấn phương tiện truyền thông:

Bạn có thể sử dụng các truy vấn phương tiện CSS tiêu chuẩn để điều chỉnh phong cách của một email cho phù hợp với thiết bị hiện tại của người dùng.Gmail hỗ trợ truy vấn dựa trên chiều rộng, hướng và độ phân giải màn hình.

<html> 
    <head> 
    <style> 
     .colored { 
     color: blue; 
     } 
     #body { 
     font-size: 14px; 
     } 
     @media screen and (min-width: 500px) { 
     .colored { 
      color:red; 
     } 
     } 
    </style> 
    </head> 
    <body> 
    <div id='body'> 
     <p>Hi Pierce,</p> 
     <p class='colored'> 
     This text is blue if the window width is 
     below 500px and red otherwise. 
     </p> 
     <p>Jerry</p> 
    </div> 
    </body> 
</html> 
Các vấn đề liên quan